如何在选择第一个下拉列表时将数据绑定到第二个下拉列表?
我使用强类型视图绑定第一个下拉列表。
现在如何调用操作名称并在选择第一个下拉列表中绑定第二个下拉列表?
<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();
}
答案 0 :(得分:2)
如果我理解你的问题是正确的那么你只需要做简单的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);
}
答案 1 :(得分:0)
您可以在更改下拉列表时添加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上附加其余的Data。就像它一样。
$(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);
}