如果表单具有无效的ModelState,如何在httppost之后保留级联下拉列表项
本文关键字:之后 httppost 保留 级联 下拉列表 表单 无效 ModelState 如果 | 更新日期: 2023-09-27 18:16:08
我有三个下拉(级联)在一个视图。第一个下拉元素来自ViewModel。当第一个下拉框改变时,我正在填充第二个下拉框元素。第三个下拉框也是一样。经典的级联下拉列表示例可以在任何地方找到(例如:http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/)
用户提交表单时出现问题。如果ModelState无效,则第二个和第三个下拉框将丢失它们的项,而第一个下拉框将保留其状态。我理解为什么它们的行为是那样的,但不知道如何用用户选择的值再次填充它们。
场景
- 用户请求
/Country/Index
- 在
page loaded
后,用户选择CountryId DropDownList
- 将
Country Id
发送给方法,如果结果不为空,则加载StateId DropDownList
。
- 将
- 不填写
PostalCode Textbox
和提交表格。 - 检查
CountryId DropDownlist
是否被填充并被选中,但StateId ropdownlist
为空。
视图/h2>//HTML Code
//...
@Html.DropDownListFor(m => m.CountryId, ViewBag.Country as IEnumerable<SelectListItem>, "Select Country")
@Html.DropDownListFor(m => m.StateId, new SelectList(string.Empty, "Value", "Text"), "Select State")
@Html.DropDownListFor(m => m.CityId, new SelectList(string.Empty, "Value", "Text"), "Select City")
@Html.TextBoxFor(m=> m.PostalCode)
<script type="text/javascript">
var countryDDL = $("#CountryId");
countryDDL.change(function () {
$.ajax({
type: 'POST',
url: '@Url.Action("LoadStateList")',
dataType: 'json',
data: { countryId: countryDDL.val() },
success: function myfunction(states) {
$("#StateId").empty();
$.each(states, function (i, state) {
$("#StateId").append('<option value="' + state.Value + '">' + state.Text + '</option>');
}); }
});
return false;
});
//Code for 2nd (state) dropdownlist.change() method.
//...
</script>
h2控制器 >public ActionResult Index()
{
ViewBag.CountryList = LoadCountryList();
return View();
}
[HttpPost]
public ActionResult Index(CountryViewModel cvm)
{
if(ModelState.IsValid)
{
//Save or do whatever you want
}
ViewBag.CountryList = LoadCountryList();
return View();
}
视图模型public class CountryViewModel
{
public int CountryId {get;set;}
public int StateId {get;set;}
public int CityId {get;set;}
[Required]
public string PostalCode {get;set;}
}
//HTML Code
//...
@Html.DropDownListFor(m => m.CountryId, ViewBag.Country as IEnumerable<SelectListItem>, "Select Country")
@Html.DropDownListFor(m => m.StateId, new SelectList(string.Empty, "Value", "Text"), "Select State")
@Html.DropDownListFor(m => m.CityId, new SelectList(string.Empty, "Value", "Text"), "Select City")
@Html.TextBoxFor(m=> m.PostalCode)
<script type="text/javascript">
var countryDDL = $("#CountryId");
countryDDL.change(function () {
$.ajax({
type: 'POST',
url: '@Url.Action("LoadStateList")',
dataType: 'json',
data: { countryId: countryDDL.val() },
success: function myfunction(states) {
$("#StateId").empty();
$.each(states, function (i, state) {
$("#StateId").append('<option value="' + state.Value + '">' + state.Text + '</option>');
}); }
});
return false;
});
//Code for 2nd (state) dropdownlist.change() method.
//...
</script>
public ActionResult Index()
{
ViewBag.CountryList = LoadCountryList();
return View();
}
[HttpPost]
public ActionResult Index(CountryViewModel cvm)
{
if(ModelState.IsValid)
{
//Save or do whatever you want
}
ViewBag.CountryList = LoadCountryList();
return View();
}
视图模型
public class CountryViewModel
{
public int CountryId {get;set;}
public int StateId {get;set;}
public int CityId {get;set;}
[Required]
public string PostalCode {get;set;}
}
实际的选择选项没有发布(也不应该发布)。因此,当您执行post操作时,选择列表为空。解决方案?简单地重新填充它,就像在get操作中一样。当然,这里不是在get操作中填充这些,而是通过AJAX检索它们。如果你想的话,你也可以用同样的方法来处理post。您只需要在页面加载时运行AJAX调用来重新获取选择列表。但是,此时最好在post action中完成。