如果表单具有无效的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无效,则第二个和第三个下拉框将丢失它们的项,而第一个下拉框将保留其状态。我理解为什么它们的行为是那样的,但不知道如何用用户选择的值再次填充它们。

场景
  1. 用户请求/Country/Index
  2. page loaded后,用户选择CountryId DropDownList
    • Country Id发送给方法,如果结果不为空,则加载StateId DropDownList
  3. 不填写PostalCode Textbox和提交表格。
  4. 检查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;}
}

如果表单具有无效的ModelState,如何在httppost之后保留级联下拉列表项

实际的选择选项没有发布(也不应该发布)。因此,当您执行post操作时,选择列表为空。解决方案?简单地重新填充它,就像在get操作中一样。当然,这里不是在get操作中填充这些,而是通过AJAX检索它们。如果你想的话,你也可以用同样的方法来处理post。您只需要在页面加载时运行AJAX调用来重新获取选择列表。但是,此时最好在post action中完成。