如何使用Asp.net MVC中的嵌套下拉列表

Question

我有一个动态下拉列表，其中填充了数据库中的数据，例如

for(int i=0;i<count;i++)
{
    @Html.DropDownListFor(m => m.GetTimeSheetDetails[i].PROJ_ID,
                               (SelectList)ViewBag.ProjectList,
                               "-- Choose a Project --", 
                               new { @class = "ddlProjectvalue" })
}

我已经通过编写类似的方法填充了数据

public SelectList getProjects()
{
    IEnumerable<SelectListItem> projectslist = (from proj in res.PROJECTs 
                                                where proj.IS_DELETED == "N" 
                                                select proj
                                               ).AsEnumerable()
                                                .Select(projt => new SelectListItem() 
                                                { 
                                                    Text = projt.NAME, 
                                                    Value = projt.ID.ToString() 
                                                });

    return new SelectList(projectslist, "Value", "Text", PROJ_ID);
}

我已经调用了contoller并将其存储在ViewBag中

ViewBag.ProjectList = timesheetModel.getProjects();
// Ex: Contain list like item1,item2,item3

现在我想在动态下拉列表中，例如，如果我们从“第一下拉列表”中选择一个项目，则不应显示在“第二下拉列表”中（例如，如果我们选择了item1，则不应在第二个下拉列表中显示item1），而在第三下拉列表中的下一个不应显示同时。 如何在Asp.net MVC中做到这一点？ 请帮助我，我没有任何想法。

///编辑

我已经尝试过脚本

    <script>
    $(document).ready(function () {
        $('.ddlProjectvalue').change(function () {

            var selectedValue = $(this).val();
            if (selectedValue != null && selectedValue != '') {
                debugger;
               @* location.href = '@Url.Action("GetDDLData", "Employer")?selectedValue=' + selectedValue;*@
                $.getJSON('@Url.Action("/Employer/GetDDLData")', { selectedValue: selectedValue }, function (jsondata) {
                    var dllSecond = $('.ddlProjectvalue');
                    dllSecond.empty();
                    alert(selectedValue);
                    $.each(jsondata, function (index, data) {

                        dllSecond.append($('<option/>', {
                            value: data.value,
                            text: data.text
                        }));
                    });
                });
            }

        });
    });
  </script>

我已经在雇主控制器中添加了Json结果

    public ActionResult GetDDLData(string selectedValue)
    {
        int projectid = Convert.ToInt32(selectedValue);

        IEnumerable<SelectListItem> projectslist = (from proj in db.PROJECTs where proj.IS_DELETED == "N" && proj.ID != projectid select proj).AsEnumerable().Select(projt => new SelectListItem() { Text = projt.NAME, Value = projt.ID.ToString() });
        var result= new SelectList(projectslist, "Value", "Text", tm.PROJ_ID);
        return Json(result,JsonRequestBehavior.AllowGet);
    }

仍然没有得到，哪里错了？

Answer 1

您正在寻找的是层叠下拉列表。

您可以在第一个下拉列表选择调用ajax上执行操作，并使用您的逻辑过滤第二个下拉列表的选择。

视图

@Html.DropDownListFor(m => m.GetTimeSheetDetails[i].PROJ_ID,
                               (SelectList)ViewBag.ProjectList,
                               "-- Choose a Project --", 
                               new { @id = "ddlProjectvalue" })

根据第一个选择过滤下拉列表。

@Html.DropDownListFor(m => m.GetTimeSheetDetails[i].PROJ_ID,
                               (SelectList)ViewBag.ProjectList,
                               "-- Choose a Project --", 
                               new { @id = "ddlSecond" })


<script type="text/javascript">
    $('#ddlProjectvalue').change(function () {
        var selectedValue = $(this).val();
        if (selectedValue != null && selectedValue != '') {
            $.getJSON('@Url.Action("/YourController/FilterSecondDDL")', { selectedValue: selectedValue }, function (jsondata) {
                var dllSecond = $('#ddlSecond');
                dllSecond.empty();
                $.each(jsondata, function (index, data) {
                    dllSecond.append($('<option/>', {
                        value: data.value,
                        text: data.text
                    }));
                });
            });
        }
    });
</script>

调节器

public ActionResult FilterSecondDDL(string selectedValue)
{
    //filter and return json.    
    return Json();
}