如何在表單提交後保留級聯下拉菜單選項？

Question

當頁面加載時，一切正常。但是當我提交表單時，我的下拉列表在頁面刷新後丟失了先前選擇的項目。

如何修改我的函數以初始化下拉列表並保留之前選定的項目（如果存在）。

這是我與初始化我dropdownlists javascript的觀點：

@model Models.Book 

@{ 
    ViewBag.Title = "Index"; 
} 

@section scripts { 
<script type="text/javascript"> 
    $(function() { 
     $.getJSON("/Home/Books/List", function(data) { 
      var items = "<option>--------------------</option>"; 
      $.each(data, function(i, book) { 
       items += "<option value='" + book.Value + "'>" + book.Text + "</option>"; 
      }); 
      $("#Books").html(items); 
     }); 

     $("#Books").change(function() { 
      $.getJSON("/Home/Chapters/List/" + $("#Books> option:selected").attr("value"), function(data) { 
       var items = "<option>--------------------</option>"; 
       $.each(data, function(i, chapter) { 
        items += "<option value='" + chapter.Value + "'>" + chapter.Text + "</option>"; 
       }); 
       $("#Chapters").html(items);       
      }); 
     });    
    });    
</script> 
} 

@using (@Html.BeginForm("ListChapterContent", "Home")) 
{ 
<div id="header"> 
    <label for="Books">Books</label> 
    <select id="Books" name="Books"></select> 

    <label for="Chapters">Chapters</label> 
    <select id="Chapters" name="Chapters" onchange="this.form.submit();"></select>   
</div> 

這裏是我的模型：

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

Answer 1

使用HtmlHelpers生成您的控件，而不是手動創建你的HTML，所以你獲得2路模型綁定。如果你使用一個視圖模型，你會發現這個最簡單的

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<Book> books = db.Books; 
    model.BookList = new SelectList(books, "ID", "Name"); 
    if (model.SelectedBook.HasValue) 
    { 
    IEnumerable<Chapter> chapters= db.Books.Where(c => c.BookId == model.SelectedBook.Value); 
    model.ChapterList = new SelectList(chapters, "ID", "Name"); 
    } 
    else 
    { 
    model.ChapterList = new SelectList(Enumerable.Empty<SelectListItem>()); 
    } 
} 

，並在視圖

@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($('<option></option>').val('').text('-Please select-')); 
    $.each(data, function(index, chapter) { 
     subLocalities.append($('<option></option>').val(item.Value).text(item.Text));    
    }); 
    }); 
}); 

和你方法t O返回的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一個類似的例子