在MVC剃刀視圖中提供選擇層次結構的最佳方式

我必須創建一個向用戶呈現選項層次結構的表單，而且我似乎無法得到正確的結果。在MVC剃刀視圖中提供選擇層次結構的最佳方式

所以，如果我有以下的父子關係（水平的項目顯示的階段）：

選項1（1級）

選項3（2級）

選項16（等級4）

選項17（等級4）

Option18（級別4）

選項4（2級）

Option11（級別3）

Option12（級別3）

選項5（2級）

選項13（等級3）

選項14（等級3）

Option15（級別3）

選項2（級別1）

選項6（2級）

選項7（2級）

選項8（第3級）

選項9（等級3）

選項10（等級3）

Option19（級別5）

Option20（級別5）

這些選項被顯示爲單選按鈕。除了第一級的選項（選項1和選項2）之外，所有這些都需要隱藏。因爲某些選項在某個級別與更高級別的另一個選項有關，但不具體指先前的級別a，所以這些級別會帶來額外的複雜性。

當用戶選擇Option1或Option2（他們只能選擇一個級別）時，顯示下一級選項。例如，如果用戶選擇了選項1，則會顯示選項3，選項4和選項5。如果用戶在選擇選項1後選擇選項2，選擇將重置並將選項6顯示爲選項10。

選項19和選項20沒有父項，並且是最後顯示。

我目前正在做以下工作，顯然是不正確的，因爲我問這個問題。

@using (Html.BeginForm()) 
    {     
      int prevLevel = 0; 
      foreach (var option in Model.Options) 
      { 
       //close previous Div if we are starting a new level and we are not at the start 
       if (option.LevelId != prevLevel && Model.Options.IndexOf(option) != 0) 
       { 
        @:</div> 
        @:<div class="option-section" id="[email protected](option.LevelId)"> 
       } 
       else if(Model.Options.IndexOf(option) == 0)//This should only occur at the start 
       { 
        @:<div class="option-section" id="[email protected](option.LevelId)"> 
       } 

        @Html.RadioButton("OptionIds[" + (option.LevelId - 1) + "]", option.OptionId, false, new { parent = option.ParentOptionId }) 
        @option.OptionName 

       prevLevel = option.LevelId; 

      } 

     <div class="buttons"> 
      <input type="submit" value="Continue" class="button" /> 
     </div>  
    }

我看起來就像這樣（從實際的HTML輸出）：抱歉不能讓我的代碼，在編輯器中正確顯示。

enter image description here

來源

2011-04-21 Racter

我想我可能已經想通了。我相信我應該做的是使用一個Levels類，它包含每個級別的所有選項。去嘗試一下，如果它有效，我會更新這個。 – Racter 2011-04-21 23:03:31

關於我使用ID的問題。從我的理解我應該只使用一次ID。但是，在這種情況下，我使用ID來幫助選擇要顯示的選項。任何人都知道更好的方法來做到這一點？ – Racter 2011-04-22 20:04:33

好了，我相信我想通了。我創建了一個名爲OptionLevels的新實體。用我的水平和每個級別的可用選項填充它。這使我可以迭代各個級別，從而遍歷每個級別的選項。

@using (Html.BeginForm()) 
    { 
     foreach (var Level in Model.Levels) 
     { 
      @:<div class="level" id="[email protected](Level.LevelId)"> 
      foreach (var option in Level.Options) 
      { 
       @:<div class="option" id="[email protected](option.ParentOptionId)"> 
       @Html.RadioButton("OptionIds[" + (option.LevelId - 1) + "]-", 
         option.OptionId, 
         false, new { parent = option.ParentOptionId } 
         ) 
       @option.OptionName 
       @:</div> 
      } 
      @:</div>      
     } 

     <div class="buttons"> 
      <input type="submit" value="Continue" class="button" /> 
     </div>  
    }

我還需要弄清楚如何顯示隱藏取決於以前的水平以前的其他選擇正確的選項。

來源

2011-04-22 15:18:29 Racter

想要更新這個，因爲我找到了更好的方法，那就是使用模板。使用正確的模型（即OptionLevels vs Options）仍然解決了我的問題。但是，使用模板可以提供更清晰的代碼。例如，請參閱[鏈接]（http://stackoverflow.com/questions/6067806/not-able-to-bind-html-checkbox-on-form-post）。 – Racter 2011-05-25 22:12:46

這也可以用多個下拉框來完成。僅在選擇第一個框時填充第二個框的內容，然後使用該選擇值查詢下一個框的數據。

來源

2012-06-06 14:57:53 Stuart

在MVC剃刀視圖中提供選擇層次結構的最佳方式

回答

相關問題