Asp.net mvc 4 具有MVC4中可能嵌套的DropDownList的DropDownList

我有一组用户可以选择的问题，其中一些问题有一个次要的选项列表可供选择。我的目标是建立一个下拉列表，如果您选择了其中一个在其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; }
}

---

如果有什么我可以澄清的，请告诉我。

我已经尽力让它尽可能简单

因此，下面给出了一个示例模型：

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>

和网页：

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>

@使用StackOverflow2.Models；
@模型示例视图模型
@{
ViewBag.Title=“Stackoverflow示例”；
}
指数
//获取选择并向控制器发出Ajax请求，操作：SetSelection，
//这反过来可能决定您必须显示还是隐藏控件
函数更新ConadryQuestion（id）{
var-xmlhttp；
if（window.XMLHttpRequest）{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
如果（xmlhttp.responseText=='show'）
$（'#Secondary QuestionDropboxId'）.show（）；
其他的
$（'#Secondary QuestionDropboxId'）.hide（）；
}
}
open（“GET”，“/SO/SetSelection？id=“+id，true”）；
xmlhttp.send（）；
}
@Html.DropDownListFor（x=>x.SelectedChoiceId，新建SelectList（Model.PrimaryChoiceList，“Id”，“Name”，“Value”），新建{Id=“PrimaryQuestionDropBoxId”，onchange=“updatesConadryQuestion（Value）；”）
@Html.DropDownListFor（x=>x.SelectedAffiliateId，新建SelectList（Model.SecondaryChoiceList，“Id”，“Name”），新建{Id=“SecondaryQuestionDropBoxId”}）