DropDownList在MVC4中可能嵌套DropDownList

Question

我有一組用戶可以選擇的問題，其中一些問題有第二個可供選擇的選項列表。我的目標是有一個下拉列表，如果您選擇其SecondaryChoiceList中有項目的選項之一，那麼第二個列表將顯示在初始下拉列表下方，並且所有這些都將在提交時被強制鍵入並綁定到模型。

我可以得到初步名單說出現：

@Html.DropDownListFor(x => x.SelectedChoiceId, new SelectList(Model.Choices, "Id", "Name")) 

但是這並沒有鉤到次列表，我完全失去了，我怎麼會配合該次列表回模型我提交表單時會返回。

這裏是我的視圖模型：

public class ExampleViewModel 
{ 
    public List<Choice> ChoiceList { get; set; } 
    public int SelectedChoiceId { get; set; } 
    public int SelectedAffiliateId { get; set; } 
} 

這裏是一個選擇的樣子：

public class Choice 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
    public IEnumerable<SecondaryChoice> SecondaryChoiceList { get; set; } 

    public Choice() 
    { 
     SecondaryChoiceList = new List<SecondaryChoice>(); 
    } 
} 

這裏是我的SecondaryChoice對象：

public class EligibleAffiliate 
{ 
    public int Id { get; set; } 
    public int EligibilityChoiceId { get; set; } 
    public string Name { get; set; } 
} 

如果有任何我可以清除讓我知道。

我的烏龜，我感謝你提前

___ 
//_\\ _ Thxs! 
/_|_|_('> 
" " 

Answer 1

我試圖保持儘可能簡單。

namespace StackOverflow.Models 
{ 
    public class Choice 
    { 
     public int Id { get; set; } 
     public string Name { get; set; } 

     public Choice() 
     { 
      Id = 0; 
     } 

     public Choice(int id, string name) 
     { 
      Id = id; 
      Name = name; 
     } 
    } 
} 


namespace StackOverflow.Models 
{ 
    public class ExampleViewModel 
    { 
     public List<Choice> PrimaryChoiceList { get; set; } 
     public List<Choice> SecondaryChoiceList { get; set; } 
     public int SelectedChoiceId { get; set; } 
     public int SelectedAffiliateId { get; set; } 

     public ExampleViewModel() 
     { 
      SelectedChoiceId = 0; 
      SelectedAffiliateId = 0; 

      PrimaryChoiceList = new List<Choice>() 
      { 
       new Choice(1, "How are you?"), 
       new Choice(2, "How is the weahter?"), 
       new Choice(3, "What have you been doing so far?"), 
       new Choice(4, "What's up man?"), 
       new Choice(5, "Any news?"), 
       new Choice(5, "Bla bla bla") 
      }; 

      SecondaryChoiceList = new List<Choice>() 
      { 
       new Choice(1, "How are you dear?"), 
       new Choice(2, "How is the weahter?"), 
       new Choice(3, "What have you been doing so far dear?"), 
       new Choice(4, "What's up man?"), 
       new Choice(5, "Any romantic news?") 
      }; 
     } 
    } 
} 

樣品控制器：

namespace StackOverFlow.Controllers 
{ 
    public class SOController : Controller 
    { 
     public static ExampleViewModel evm = new ExampleViewModel(); 

     public ActionResult Index() 
     { 
      return View(evm); 
     } 

     public ActionResult SetSelection(int id) 
     { 
      evm.SelectedChoiceId = id; 

      if (evm.PrimaryChoiceList.Count() > 0) 
      { 
       Choice selection = evm.PrimaryChoiceList.ElementAt(id-1); 
       Choice affiliate = (Choice)evm.SecondaryChoiceList.FirstOrDefault(x => x.Name == selection.Name); 
       if (affiliate != null) 
       { 
        return Content("show"); 
       } 
       else 
       { 
        return Content("hide"); 
       } 
      } 
      else 
      { 
       return Content("hide"); 
      } 
     } 
    } 
} 

和網頁：

@using StackOverflow2.Models; 
@model ExampleViewModel 

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> 

@{ 
    ViewBag.Title = "Stackoverflow Sample"; 
} 

<h2>Index</h2> 

<script type="text/javascript"> 

    // Get the selection and make Ajax Request to the controller, action: SetSelection, 
    // which in turn may decide whetger you must show or hide the control 
    function updateSeconadryQuestion(id) { 
     var xmlhttp; 
     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else {// code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       if (xmlhttp.responseText == 'show') 
        $('#SecondaryQuestionDropBoxId').show(); 
       else 
        $('#SecondaryQuestionDropBoxId').hide(); 
      } 
     } 
     xmlhttp.open("GET", "/SO/SetSelection?id=" + id, true); 
     xmlhttp.send(); 
    } 

</script> 

@Html.DropDownListFor(x => x.SelectedChoiceId, new SelectList(Model.PrimaryChoiceList, "Id", "Name", "Value"), new { id = "PrimaryQuestionDropBoxId", onchange = "updateSeconadryQuestion(value);" }) 

<div id="SeconadryQuestionDivId"> 
@Html.DropDownListFor(x => x.SelectedAffiliateId, new SelectList(Model.SecondaryChoiceList, "Id", "Name"), new { id = "SecondaryQuestionDropBoxId" }) 
</div> 

所以，一個樣品模型如下