Как сохранить список каскадов выбранных элементов после отправки формы?

Question

Когда страница загружается, все работает нормально. Но когда я отправляю форму, мои dropdownlists теряют предыдущие выбранные элементы после обновления страницы.

Как изменить мою функцию для инициализации списков dropdownlists и сохранить предыдущие выбранные элементы (на обоих), если они существуют.

Вот мое мнение с JavaScript, который инициализирует мои 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> 

Вот моя модель:

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 О вернуть 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 для подобного примера