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

时间:2016-08-02 10:17:52

标签: c# asp.net view asp.net-mvc-5 partial-views

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

1 个答案:

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

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