如何在表单提交后保留级联下拉列表选定的项目？

当页面加载一切正常。 但是当我提交表单时，我的下拉列表在页面刷新后丢失了之前选择的项目。

如何修改我的函数以初始化下拉列表并保留以前选定的项目（两者都存在）。

这是我用javascript初始化我的下拉列表的视图：

@model Models.Book @{ ViewBag.Title = "Index"; } @section scripts {  $(function() { $.getJSON("/Home/Books/List", function(data) { var items = "--------------------"; $.each(data, function(i, book) { items += "" + book.Text + ""; }); $("#Books").html(items); }); $("#Books").change(function() { $.getJSON("/Home/Chapters/List/" + $("#Books> option:selected").attr("value"), function(data) { var items = "--------------------"; $.each(data, function(i, chapter) { items += "" + chapter.Text + ""; }); $("#Chapters").html(items); }); }); });  } @using (@Html.BeginForm("ListChapterContent", "Home")) { 
 Books  Chapters   

这是我的模型：

 public class Book { public string Translator{ get; set; } public string Edition{ get; set; } public List Books{ get; set; } public int SelectedBook { get; set; } public int SelectedChapter { get; set; } } 

Answer 1

使用HtmlHelpers生成控件而不是手动创建html，以便获得双向模型绑定。 如果您使用视图模型，您会发现这是最简单的

 public class BookVM { [Required] public int? SelectedBook { get; set; } [Required] public int? SelectedChapter { get; set; } public SelectList BookList { get; set; } public SelectList ChapterList { get; set; } } 

调节器

 public ActionResult Create() { BookVM model = new BookVM(); ConfigureViewModel(model); return View(model); } private void ConfigureViewModel(BookVM model) { IEnumerable books = db.Books; model.BookList = new SelectList(books, "ID", "Name"); if (model.SelectedBook.HasValue) { IEnumerable chapters= db.Books.Where(c => c.BookId == model.SelectedBook.Value); model.ChapterList = new SelectList(chapters, "ID", "Name"); } else { model.ChapterList = new SelectList(Enumerable.Empty()); } } 

并在视图中

 @model BookVM @using (@Html.BeginForm()) { @Html.LabelFor(m => m.SelectedBook) @Html.DropDownListFor(m => m.SelectedBook, Model.BookList, "-Please select-") @Html.ValidationMessageFor(m => m.SelectedBook) @Html.LabelFor(m => m.SelectedChapter) @Html.DropDownListFor(m => m.SelectedChapter, Model.ChapterList) @Html.ValidationMessageFor(m => m.SelectedChapter) } 

然后你的脚本变成（删除第一个）

 var url = '@Url.Action("FetchChapters")'; // don't hard code url's var chapters = $('#SelectedChapter'); $('#SelectedBook').change(function() { if (!$(this).val()) { return; } $.getJSON(url, { id: $(this).val() }, function(data) { chapters.empty().append($('').val('').text('-Please select-')); $.each(data, function(index, chapter) { subLocalities.append($('').val(item.Value).text(item.Text)); }); }); }); 

而你返回json的方法就是

 public JsonResult FetchSubLocalities(int ID) { var chapters= db.Books.Where(c => c.BookId == ID).Select(c => new { Value = c.ID, Name = c.Name }); return Json(chapters, JsonRequestBehavior.AllowGet); } 

最后在POST方法中，如果需要返回视图

 [HttpPost] public ActionResult Create(BookVM model) { if(!ModelState.IsValid) { ConfigureViewModel(model); return View(model); } .... 

有关类似示例，请参阅此DotNetFiddle