Блог

У меня есть список пользовательских объектов (Book), и я хочу, чтобы второе поле выбора заполнялось на основе плитки, выбранной в первом выпадающем списке. Я видел много ответов о том, как это сделать со статически типизированными списками, но не из asp.net объект.

 public class Book
{

    public string Title { get; set; }

    public List<string> Chapter { get; set; }

}
  

Model.books — это список объектов Book, приведенный выше.

В cshtml:

 <div class="form-group">
                        <label asp-for="Book.Title" class="control-label">Title</label>
                        <select id="title-select" asp-for="Book.Title" class="form-control">
                            @foreach (var item in Model.books)
                            {
                                <option value="@item">
                                    @Html.DisplayFor(modelItem => item.Title)
                                </option>
                            }
                        </select>
                    </div>

<div class="form-group">
                        <label asp-for="Book.Chapter" class="control-label">Chapter</label>
                        <select id="chapter-select" asp-for="Book.Chapter" class="form-control">
                            @foreach (var item in chapters?)
                            {
                                //Chapter select based on Title chosen above
                            }
                        </select>
                    </div>
  

jQuery:

     $('#title-select').on('change', function () {
        var value = this.value

//How to pass the book.chapter object into here to populate the dropdown list


    });
  

Книг или глав не так много, поэтому, возможно, стоит просто передать все книги, а не использовать Ajax? В основном я не уверен, как получить список моих книг в jQuery в первую очередь (я не привык к веб-разработке).

Вы можете сохранить название книги, связанное с главой, в качестве data-* атрибута для элемента option в раскрывающемся списке chapters.

 @foreach (var book in Model.books)
    @foreach (var item in book.Chapter)
      {
         <option data-book-title="@book.Title">@item</option>
      }
}
  

Затем используйте значение элемента selected book в раскрывающемся списке book, чтобы отфильтровать главы, соответствующие атрибуту data, чтобы включить их:

 $('#title-select').on('change', function () {
  var bookValue = this.value;
  $('#chapter-select option').hide().filter(function(){
    return $(this).data('book-title') == bookValue;
  }).show();
});