一个接一个地填充mv中的两个下拉列表

时间:2017-03-13 04:57:41

标签: asp.net-mvc

我是mvc5中的新手,我创建了一个带有两个下拉列表(A,B)的视图,然后使用EF绑定它。 我想在页面加载完成后填写第二个下拉列表(B)然后从下拉列表(A)中获取第一个项目并绑定第二个项目取决于该值,我以aspx形式执行此操作但我无法做到进入mvc.if有没有使用jquery的任何解决方案?

1 个答案:

答案 0 :(得分:0)

你可以这样做,它会显示两个ddls。第一个值为1-4,第二个值为5-8。当您从第一个列表中选择一个项目时,它会将其添加到第二个列表中。

控制器:

public class ModelForDropDowns
{
    public IList<SelectListItem> dropDwownOneList = new List<SelectListItem>();
    public IList<SelectListItem> dropDwownTwoList = new List<SelectListItem>();
    public string selectedDDL1Item { get; set; }
    public string selectedDDL2Item { get; set; }
}

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Index27(ModelForDropDowns m)
    {
        ModelGetDDL(m);

        //add selected item from list1 to list2
        m.dropDwownTwoList.Add(new SelectListItem { Text = m.selectedDDL1Item, Value = m.selectedDDL1Item });
        return View(m);
    }

    public ActionResult Index27()
    {
        ModelForDropDowns mfd = new ModelForDropDowns();
        ModelGetDDL(mfd);

        return View(mfd);
    }

    void ModelGetDDL(ModelForDropDowns mfd)
    {
        SelectListItem sli1 = new SelectListItem { Text = "t1", Value = "v1" };
        SelectListItem sli2 = new SelectListItem { Text = "t2", Value = "v2" };
        SelectListItem sli3 = new SelectListItem { Text = "t3", Value = "v3" };
        SelectListItem sli4 = new SelectListItem { Text = "t4", Value = "v4" };
        SelectListItem sli5 = new SelectListItem { Text = "t5", Value = "v5" };
        SelectListItem sli6 = new SelectListItem { Text = "t6", Value = "v6" };
        SelectListItem sli7 = new SelectListItem { Text = "t7", Value = "v7" };
        SelectListItem sli8 = new SelectListItem { Text = "t8", Value = "v8" };
        mfd.dropDwownOneList.Add(sli1);
        mfd.dropDwownOneList.Add(sli2);
        mfd.dropDwownOneList.Add(sli3);
        mfd.dropDwownOneList.Add(sli4);
        mfd.dropDwownTwoList.Add(sli5);
        mfd.dropDwownTwoList.Add(sli6);
        mfd.dropDwownTwoList.Add(sli7);
        mfd.dropDwownTwoList.Add(sli8);
    }

查看:

@model Testy20161006.Controllers.ModelForDropDowns
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index27</title>
    @*You can add this auto post*@
    @*<script src="~/Scripts/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#list1DDL").change(function () {
                    $("#form1").submit();
                })
            })
        </script>*@
</head>
<body>
    <div>
        @using (Html.BeginForm("Index27", "Home", FormMethod.Post, new { id = "form1" }))
        {
            <table>
                <tr>
                    <td>@Html.LabelFor(r => r.dropDwownOneList)</td>
                    <td>
                        @Html.DropDownListFor(m => m.selectedDDL1Item,
                            new SelectList(Model.dropDwownOneList, "Value", "Text"),
                            new { id = "list1DDL" })
                    </td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(r => r.dropDwownTwoList)</td>
                    <td>
                        @Html.DropDownListFor(m => m.selectedDDL2Item,
                            new SelectList(Model.dropDwownTwoList, "Value", "Text"))
                    </td>
                </tr>
            </table>
            <input type="submit" id="btn1" />
        }
    </div>
</body>
</html>