为什么在我尝试加载局部视图时加载了新页面？

Question

我用 ASP.NET MVC5 编写了一个应用程序。在其中一个页面上，我希望用户能够从下拉列表中 select 书名，然后在他们选择一本书时生成另一个下拉列表。第二个列表将包含与 selected 的书相对应的章节。问题是，在本书被 select 编辑后，会生成一个新的空白网页，其中只有新的下拉列表。

这是用于生成两个下拉列表的 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 引用并修复母版中的脚本引用 page.Follow 这些规则：

首先，您应该在母版页的顶部添加对 jQuery 的引用。
添加对 jquery.unobtrusive 库的引用 AFTER jQuery.
你应该只有一个参考 jquery.unobtrusive file.Don没有缩小版和标准版作为参考，你只需要一个。
不要重新添加 javascript 对子 views.You 的引用，或者在 master\layout 页面或子视图中引用脚本，但不能同时引用两者。

为什么在我尝试加载局部视图时加载了新页面？

Why is a new page loaded when I try to load a partial view?

c#

asp.net

partial-views

view

asp.net-mvc-5