如何在 MVC 中的下拉列表更改时调用操作名称？答案

【问题标题】：How to call a Action Name on dropdown change in MVC?如何在 MVC 中的下拉列表更改时调用操作名称？
【发布时间】：2017-04-03 16:58:35
【问题描述】：

如何在选择第一个下拉列表时将数据绑定到第二个下拉列表？

我已经使用强类型视图绑定了第一个下拉列表。

现在如何调用动作名称并在选择第一个下拉列表上绑定第二个下拉列表？

 <tr>
            <td>Select Make:</td>
            <td>@Html.DropDownListFor(m => m.SelectedMake, Model.MakesList, new { @class = "form-control", @onchange = "FillModel()" })</td>
        </tr>
        <tr>
            <td>Select Model</td>
            <td>@Html.DropDownListFor(m => m.SelectedMake, Model.MakesList)</td>
        </tr>

动作名称

public ActionResult FillModel(int MakeId)
        {
            var makedata = objVehicleContext.VehicleMakes.Where(m=>m.MakeId==MakeId);

            ViewBag.makelist = makedata.ToList();
            return View();
        }

【问题讨论】：

你需要使用ajax。有关创建级联下拉列表的示例，请参阅 this answer

标签： asp.net-mvc asp.net-mvc-4

【解决方案1】：

如果我理解你的问题是正确的那么你只需要做简单的 jquery.post

 $("#ddlMake").change(function () {
            $.post("controller/ActionName", function (data) {
                $.each(data, function (val, txt) {
                    $("#ddlModel").append('<option value="' + val + '">' + txt + '</option>');
                });
            });
        });

在控制器中：

    public Actionresult GetModel()
    {
        //your dropdown datasource
        return json(ddlModeldatasurce);
    }

【讨论】：

有没有办法不用Ajax和JQuery？
是的，您也可以使用 Viewbag 来做到这一点。但这会导致您完全回发。

【解决方案2】：

您可以将 Jquery 函数放在更改下拉列表中。例如

 <tr>


        <td>Select Make:</td>
                <td>@Html.DropDownListFor(m => m.SelectedMake, Model.MakesList, new { @class = "form-control", @onchange = "FillModel()", id="ddlMake"

    })</td>
        </tr>
        <tr>
            <td>Select Model</td>
            <td>@Html.DropDownListFor(m => m.SelectedMake, Model.MakesList,new {@id="ddlModel"})</td>
        </tr>

这是在下拉更改时调用操作方法的简单解决方案。

$(document).ready(function(){
    $("#ddlMake").change(function(){url.action('Controller Name','Action Method Name')})
})

但是为了更进一步的效果，你必须调用 Ajax 调用方法并获取数据。在方法成功之后，您必须在 ddlModel 上附加其余数据。就像它一样。

    $(document).ready(function(){

   $("#ddlMake").change(function(){
   $.ajax({
        type:'POST',
        url:'url.action('Controller Name','Action Method Name')'
        data:{id:$('#ddlMake').val()},
        sucess:{
             $("#ddlModel").append('<option value="' + ModelId.Value + '">' + Model.Text + '</option>');
        }
        });)})
        })

而你需要用 Controller 来做到这一点

public JsonResult GetModel()
    {
        //your dropdown datasource
        return json(ddlModeldatasurce,JsonRequestBehavior.AllowGet);
    }

【讨论】：