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

Question

我在视图中有三个下拉列表（级联）。第一个下拉元素来自ViewModel。第一个下拉列表更改时，我正在填充第二个下拉元素。同样的第3次下拉菜单。您可以在任何地方找到的经典级联下拉列表示例（例如：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

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