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

Question

我在一个视图中有三个下拉菜单（级联）。第一个下拉元素来自 ViewModel。当第一个下拉列表更改时，我正在填充第二个下拉元素。和第三个下拉菜单一样。您可以在任何地方找到经典的级联下拉列表示例（例如：http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/）

用户提交表单时出现问题。如果 ModelState 无效，则第 2 和第 3 个下拉菜单会丢失其项目，第 1 个下拉菜单会保留其状态。我理解他们为什么会这样，但不知道如何用用户选择的值再次填充它们。

场景

1. 用户请求/Country/Index
2. 在page loaded之后，用户选择CountryId DropDownList
   • 将Country Id 发送到方法，如果结果不为空，则加载StateId DropDownList。
3. 请勿填写PostalCode Textbox 并提交表单。
4. 检查 CountryId DropDownlist 是否已填充并选中，但 StateId ropdownlist 为空。
5. 哭泣

查看

//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;}
}

Answer 1

实际选择选项未发布（也不应该发布）。因此，当您执行 post 操作时，您的选择列表为空。解决方案？只需像在 get 操作中一样重新填充它。当然，在这里，您不是在 get 操作中填充它们，而是通过 AJAX 检索它们。如果您愿意，您可以在技术上以同样的方式在帖子中执行此操作。您只需在页面加载时运行 AJAX 调用即可重新获取选择列表。但是，此时最好在您的发布操作中执行此操作。