我在ASP.NET MVC5中编写了一个应用程序。在其中一个页面上,我希望用户能够从下拉列表中选择书名,然后在选择了一个下拉列表时生成另一个下拉列表。第二个列表将包含与所选书籍相对应的章节。问题在于,在选择了图书后,会生成一个新的空白网页,其中只包含新的下拉列表。
以下是用于生成两个下拉列表的CSHTML代码。
@{//Loop through the authors and find the selected one to show the details of
}
@foreach (Author nextAuthor in Model)
{
//Ignore this author if it is not the selected one
if (nextAuthor.Selected == false)
{
continue;
}
<fieldset class="EditAuthor">
<div class="EditAuthorLeft">
@{//Ajax form to select book by the selected author
}
@using (Ajax.BeginForm("SelectBook", "Library", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "chapters" }))
{
@Html.ValidationSummary(true)
<div class="editor-label">
@Html.LabelFor(model => nextAuthor.BookID)
</div>
<div class="editor-field">
@Html.DropDownList("BookID", nextAuthor.BookList, "< Please select a book >", new { onchange = "$(this.form).submit();" })
@Html.ValidationMessageFor(model => nextAuthor.BookID)
</div>
}
@{//Ajax form to submit and save changes to the author
}
@using (Ajax.BeginForm("UpdateAuthor", "Library", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "authors" }))
{
@Html.ValidationSummary(true)
@Html.HiddenFor(model => nextAuthor.ID)
@Html.HiddenFor(model => nextAuthor.LibraryID)
//Chapter selection if there is a selected book
<div id="chapters">
@if (nextAuthor.BookID > 0)
{
@Html.Partial("_ChapterDropDown", nextAuthor)
}
</div>
@:</div>
<p>
<input type="submit" value="Update Author" />
</p>
}
</fieldset>
}
以下是&#34; _ChapterDropDown.cshtml&#34;中第二个下拉列表的代码。
@Html.HiddenFor(model => model.BookID)
<div class="editor-label">
@Html.LabelFor(model => model.ChapterID)
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.ChapterID, Model.ChapterList, "< Please select a chapter >")
@Html.ValidationMessageFor(model => model.ChapterID)
</div>
最后,这是打开第二个下拉列表的C#代码。
[HttpPost]
public ActionResult SelectBook(int bookId)
{
Author author;
//Create the author VM with just the info needed for the chapter partial view
//Select the list of chapters from the database that we are connected to
author = new Author();
author.BookID = bookId;
author.ChapterList = new SelectList(db.Chapters.Where(c => c.BookID == bookId).OrderBy(c => c.Name).ToList(), "ID", "Name");
author.Selected = true;
return PartialView("_ChapterDropDown", author);
}
我无法理解为什么这段代码会生成一个全新的页面。为什么不将新的下拉列表添加到现有视图中?任何有关此主题的帮助将不胜感激。顺便说一句,我已经设置了#34; UnobtrusiveJavaScriptEnabled&#34;在&#34; Web.config&#34;并将以下代码行添加到&#34; _Layout.cshtml&#34;的头部。
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
答案 0 :(得分:1)
在所有情况下,我都遇到@Ajax
功能在新页面上显示部分视图的问题,问题始终是jquery.unobtrusive
库未被正确引用。
确认这个问题非常简单:
1)暂时删除布局页面:
@{
Layout = null;
}
2)在子视图的顶部添加以下CDN引用:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
如果在进行上述更改后确认它正在工作,则可以返回引用母版页的代码,删除两个js引用并修复母版页中的脚本引用。遵循以下规则:
jquery.unobtrusive
库 AFTER jQuery的引用。jquery.unobtrusive
文件有一个引用。没有缩小版和标准版作为参考,您只需要一个。