How to keep cascade dropdownlist selected items after form submit?

问题

When the page loads everything works fine. But when I submit the form my dropdownlists are loosing the previous selected items after page refresh.

How can I modify my function to initialize the dropdownlists and keep the previous selected items (on both) if they exist.

Here is my view with the javascript that initializes my dropdownlists:

@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>

Here is my model:

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

回答1:

Use the HtmlHelpers to generate your controls rather than manually creating your html so you get 2 way model binding. You will find this easiest if you use a view model

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

Controller

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>());
  }
}

and in the view

@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)
}

Then you script becomes (delete the first one)

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

and you method to return the json would be

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

and finally in the POST method, if you need to return the view

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

Refer also this DotNetFiddle for a similar example

来源：https://stackoverflow.com/questions/33247717/how-to-keep-cascade-dropdownlist-selected-items-after-form-submit