当我尝试加载部分视图时，为什么会加载新页面？(Why is a new page loaded when I try to load a partial view?)

我在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> }

这是“_ChapterDropDown.cshtml”中第二个下拉列表的代码。

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

我无法理解为什么这段代码会生成一个全新的页面。为什么不将新的下拉列表添加到现有视图中？任何关于这个主题的帮助将不胜感激。顺便说一下，我在“Web.config”中将“UnobtrusiveJavaScriptEnabled”设置为true，并将以下代码行添加到“_Layout.cshtml”的头部。

I've written an application in ASP.NET MVC5. On one of the pages, I want the user to be able to select a book title from a drop-down list and then have another drop-down list generate when they have chosen one. The second list will contain chapters that correspond to the book that was selected. The problem is that, after the book has been selected, a new blank webpage is generated with just the new drop-down list in it.

Here is the CSHTML code that is intended to generate the two drop-down lists.

@{//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> }

And here is the code for the second drop-down list in "_ChapterDropDown.cshtml".

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

And finally, here is the C# code to open the second drop-down list.

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

I can't understand why this code would generate a brand new page. Why does it not add the new drop-down list to the existing view? Any help on this topic would be greatly appreciated. And by the way, I have set "UnobtrusiveJavaScriptEnabled" to true in "Web.config" and have added the following lines of code to the head of "_Layout.cshtml".

最满意答案

在所有情况下，我都曾经遇到过@Ajax功能在新页面上显示局部视图的问题，问题始终是jquery.unobtrusive库未被正确引用。

要确认这是问题很简单：

1）暂时删除布局页面：

@{ Layout = null; }

2）在子视图的顶部添加以下CDN引用：

如果在进行上述更改后确认它正在工作，则可以返回引用母版页的代码，删除两个js引用并修复母版页中的脚本引用。遵循以下规则：

首先，您应该在母版页的顶部添加对jQuery的引用。在jQuery 之后添加对jquery.unobtrusive库的引用。你应该只有一个jquery.unobtrusive引用。没有缩小和标准版本作为引用，你只需要一个。不要将javascript引用重新添加到子视图。您可以引用master \ layout页面或子视图中的脚本，而不是两者。

In all the cases I've encoutered where @Ajax functionality was displaying a partial view on a new page the problem was always that the jquery.unobtrusive library was not correctly referenced.

To confirm that this is the problem is very simple:

1)Temporarily remove the Layout page:

@{ Layout = null; }

2)At the top of your child view add these CDN references:

If you confirm that it's working after making the changes above you can bring back the code for referencing the master page, remove the two js references and fix your script references in the master page.Follow these rules:

Firstly you should add a reference to jQuery, right at the top of the master page. Add the reference to the jquery.unobtrusive library AFTER jQuery. You should only have one reference to the jquery.unobtrusive file.Don't have a minified and a standard version as references, you only need one. Do not re-add the javascript references to the child views.You either reference the scripts in the master\layout page or in the child views, not both.

更多推荐