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

Posted 2023-02-26

【中文标题】当我尝试加载部分视图时，为啥会加载新页面？

【英文标题】：Why is a new page loaded when I try to load a partial view?当我尝试加载部分视图时，为什么会加载新页面？

【发布时间】：2016-08-02 10:17:52

【问题描述】：

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

【问题讨论】：

您是否在jquery.unobtrusive-ajax.js 之前也包含了jquery（并且您不应该同时拥有未缩小版和缩小版）。如果你的重定向，这意味着jquery.unobtrusive-ajax.js没有被正确加载

@StephenMuecke 我也在“_Layout.cshtml”的头部包含了<script src="@Url.Content("~/Scripts/jquery-2.2.4.js")" type="text/javascript"></script>这一行。是的，它被放置在不显眼的 ajax 行之前。

那是jquery 的唯一副本吗？如果您在浏览器控制台中遇到任何错误怎么办？

我的解决方案中也有jquery-2.2.4.min.js，但我没有将它包含在头中。我在哪里可以找到浏览器控制台？通过查看网页的来源？因为如果这就是你的意思，我不会通过那个或通过正常的 Visual Studio 调试看到任何错误。

如果您不知道如何在浏览器中调试，您就不应该开发网站。按 F12 并查看控制台选项卡（然后阅读 this 或您使用的浏览器的类似文章。您只能拥有一份 jquery 的副本，因为第二个在 jquery.unobtrusive-ajax.js 之后，它会将其删除. 并停止添加同一文件的未缩小和缩小版本

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

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

【讨论】：

我是否也应该删除解决方案中的额外jquery.unobtrusive 脚​​本文件？

是的，我已经提到，在我的回答中，您的项目中应该只有一个 jquery.unobtrusive 脚本引用，并且在引用 jQuery 之后添加它非常重要

我照你说的做了，并将两个脚本引用添加到子视图的最顶部（即它们是文件中的第一行）。我还将布局设置为空。当我尝试测试下拉列表时，什么都没有发生。没有生成新页面，也没有出现下拉列表。那么这是否意味着除了我在原始问题中提到的代码区域之外，问题还发生在项目的其他地方？

控制台说什么？您在浏览器控制台中看到任何错误吗？

哦，等等。我的错。毕竟第二个下拉列表确实有效。不知道为什么我第一次尝试它时它没有出现。看起来我必须按照您在上面发布的这 4 个步骤进行排序。此外，控制台没有指定任何错误。