MVC的DropDownList，的onchange [英] MVC dropdownlist, onchange
本文介绍了MVC的DropDownList，的onchange的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个2 Dropdownlistfor在HTML中，dropdownlistfor国家和dropdownlistfor状态。即时通讯使用MVC，我想是这样的输出，如果我改变所选择的国家，选定国家的国家将在dropdownlistfor状态来填补。我可是从数据库中获取的国家和国家的数据，并在状态表存在用于countryId场。感谢帮助。
下面是HTML样本code。
＆LT; DIV CLASS =fieldBlock＆GT;
＆LT; DIV＆GT;＆LT;标签＆gt;国家＆LT; /标签＆gt;＆安培; NBSP; * LT; / DIV＆GT;
＆LT; DIV＆GT; @ Html.DropDownListFor（型号=＆GT; model.Country.Id，Model.CountrySelectList，新{@class =width305，@id =ddlCountry}）LT; / DIV＆GT;
@ Html.HiddenFor（型号=＆GT; model.Country.Name）@ Html.HiddenFor（型号=＆GT; model.Country.Abbreviation）
＆LT; DIV＆GT; @ Html.ValidationMessageFor（型号=＆GT; model.Employee.StateId）LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =fieldBlock＆GT;
＆LT; DIV＆GT; @ Html.LabelFor（型号=＆GT; model.Employee.StateId，州/省）及NBSP; * LT; / DIV＆GT;
＆LT; DIV＆GT; @ Html.DropDownListFor（型号=＆GT; model.Employee.StateId，Model.CountryStateProvinceSelectList，新{@class =width305}）LT; / DIV＆GT;
＆LT; DIV＆GT; @ Html.ValidationMessageFor（型号=＆GT; model.Employee.StateId）LT; / DIV＆GT;
＆LT; / DIV＆GT;
解决方案
试试这个
在View
＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
$（＃ddlCountry）。改变（函数（）{
VAR将selectedItem = $（本）.VAL（）;
VAR ddlStates = $（＃ddlState）;
VAR statesProgress = $（＃状态装载正在进行）;
statesProgress.show（）;
$阿贾克斯（{
缓存：假的，
键入：GET，
网址：@（Url.Action（SomeAction，SomeController）），
数据：{countryId：将selectedItem}，
成功：功能（数据）{
ddlStates.html（''）;
$。每个（数据，功能（ID，可选）{
ddlStates.append（$（'＆LT;选项＆GT;＆LT; /选项＆GT;'）。VAL（option.id）的.html（option.name））;
}）; }，
错误：功能（XHR，ajaxOptions，thrownError）{
警报（'无法检索状态。'）; }
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; DIV CLASS =fieldBlock＆GT;
＆LT; DIV＆GT;＆LT;标签＆gt;国家＆LT; /标签＆gt;＆安培; NBSP; * LT; / DIV＆GT;
＆LT; DIV＆GT; @ Html.DropDownListFor（型号=＆GT; model.Country.Id，Model.CountrySelectList，新{@class =width305，@id =ddlCountry}）LT; / DIV＆GT;
@ Html.HiddenFor（型号=＆GT; model.Country.Name）@ Html.HiddenFor（型号=＆GT; model.Country.Abbreviation）
＆LT; DIV＆GT; @ Html.ValidationMessageFor（型号=＆GT; model.Employee.StateId）LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; DIV CLASS =fieldBlock＆GT;
＆LT; DIV＆GT; @ Html.LabelFor（型号=＆GT; model.Employee.StateId，州/省）及NBSP; * LT; / DIV＆GT;
＆LT; DIV＆GT; @ Html.DropDownListFor（型号=＆GT; model.Employee.StateId，Model.CountryStateProvinceSelectList，新{@class =width305，@id =ddlState}）LT; / DIV＆GT;
＆LT; DIV＆GT; @ Html.ValidationMessageFor（型号=＆GT; model.Employee.StateId）LT; / DIV＆GT;
＆LT; / DIV＆GT;
在控制器
公众的ActionResult SomeAction（字符串countryId）
{
//这里执行你的行动
无功状态= _stateProvinceService.GetStateProvincesByCountryId（country.Id）.ToList（）;
VAR的结果=（从s的状态
选择新的{ID = s.Id，名称= s.GetLocalized（X =＆GT; x.Name）}
）.ToList（）; 返回JSON（结果，JsonRequestBehavior.AllowGet）;
}
请注意：检查编号是否正确绑定到下拉菜单，我已经写假code行动获得国家
I have a 2 Dropdownlistfor in html, dropdownlistfor Country and dropdownlistfor state. Im using MVC, I want to be the output like this, If I change the Selected Country, the state of the selected country will be filled in the dropdownlistfor state. Im getting the data of country and state from database, and in the table of state there is a field for countryId. Thanks for help.
here is the sample Code in Html.
<div class="fieldBlock">
<div><label>Country</label> *</div>
<div>@Html.DropDownListFor(model => model.Country.Id, Model.CountrySelectList, new { @class = "width305", @id = "ddlCountry" })</div>
@Html.HiddenFor(model => model.Country.Name) @Html.HiddenFor(model => model.Country.Abbreviation)
<div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
</div>
<div class="fieldBlock">
<div>@Html.LabelFor(model => model.Employee.StateId, "State/Province") *</div>
<div>@Html.DropDownListFor(model => model.Employee.StateId, Model.CountryStateProvinceSelectList, new { @class = "width305" })</div>
<div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
</div>
解决方案
Try this
In View
<script type="text/javascript">
$(function() {
$("#ddlCountry").change(function() {
var selectedItem = $(this).val();
var ddlStates = $("#ddlState");
var statesProgress = $("#states-loading-progress");
statesProgress.show();
$.ajax({
cache: false,
type: "GET",
url: "@(Url.Action("SomeAction", "SomeController"))",
data: { "countryId": selectedItem},
success: function (data) {
ddlStates.html('');
$.each(data, function(id, option) {
ddlStates.append($('<option></option>').val(option.id).html(option.name));
});
},
error:function (xhr, ajaxOptions, thrownError){
alert('Failed to retrieve states.');
}
});
});
});
</script>
<div class="fieldBlock">
<div><label>Country</label> *</div>
<div>@Html.DropDownListFor(model => model.Country.Id, Model.CountrySelectList, new { @class = "width305", @id = "ddlCountry" })</div>
@Html.HiddenFor(model => model.Country.Name) @Html.HiddenFor(model => model.Country.Abbreviation)
<div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
</div>
<div class="fieldBlock">
<div>@Html.LabelFor(model => model.Employee.StateId, "State/Province") *</div>
<div>@Html.DropDownListFor(model => model.Employee.StateId, Model.CountryStateProvinceSelectList, new { @class = "width305", @id = "ddlState" })</div>
<div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
</div>
In Controller
public ActionResult SomeAction(string countryId)
{
//perform your action here
var states = _stateProvinceService.GetStateProvincesByCountryId(country.Id).ToList();
var result = (from s in states
select new { id = s.Id, name = s.GetLocalized(x => x.Name) }
).ToList();
return Json(result, JsonRequestBehavior.AllowGet);
}
NOTE: Check whether Id is properly bind to dropdowns and I have written dummy code in action to get state.
这篇关于MVC的DropDownList，的onchange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
