[英]How to keep cascade dropdownlist selected items after form submit?
頁面加載后,一切正常。 但是,當我提交表單時,我的下拉列表在頁面刷新后失去了先前選擇的項目。
如何修改我的函數以初始化下拉列表,並保留先前選擇的項目(同時存在)(如果同時存在)。
這是使用初始化我的下拉列表的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; }
}
使用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));
});
});
});
而您返回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以獲取類似示例
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.