当我尝试加载部分视图时，为什么会加载新页面？

Question

我在 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”的头部。

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

Answer 1

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

要确认这是问题很简单：

1)暂时移除Layout页面：

@{
    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 引用并修复母版页中的脚本引用。遵循以下规则：

1. 首先，您应该在母版页的顶部添加对 jQuery 的引用。
2. 添加对jquery.unobtrusive库的引用AFTER jQuery。
3. 您应该只有一个对jquery.unobtrusive 文件的引用。不要有缩小版和标准版本作为参考，您只需要一个。
4. 不要将 javascript 引用重新添加到子视图。您可以在主\布局页面或子视图中引用脚本，而不是同时引用。