asp.net-mvc-4 - MVC4 中可能嵌套 DropDownList 的 DropDownList

Question

我有一组问题供用户选择，其中一些问题有第二个选项列表可供选择。我的目标是有一个下拉列表，如果您选择其中一个在其 SecondaryChoiceList 中有项目的选项，那么第二个列表将出现在初始下拉列表下方，并且所有这些都将被强类型化并在提交时绑定(bind)到模型。

我可以通过以下方式让初始列表出现:

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

但是这与辅助列表没有联系，我完全不知道如何将辅助列表绑定(bind)回提交表单时返回的模型。

这是我的 View 模型:

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

这是 Choice 的样子:

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; }
}

如果有任何我可以解决的问题，请告诉我。

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?")
            };
        }
    }
}

示例 Controller :

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>