控制器返回 PartialView 覆盖整个视图答案

【问题标题】：Controller returning PartialView overwriting entire View控制器返回 PartialView 覆盖整个视图
【发布时间】：2016-08-02 02:16:06
【问题描述】：

我正在发布并尝试使用 Ajax 重新加载包含新数据的部分视图，如下所示：

Index.cshtml

<div id="left-column">
    @Html.Partial("~/Views/Project/_ProjectList.cshtml", Model.ProjectList)
</div>

~/Views/Project/_ProjectList.cshtml

@using (Ajax.BeginForm("Create", "Project", new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "left-column"
}))
{
    <h3>Create a new project</h3>
    <div class="form-group">
        <label for="new-project-name">Name</label>
        <input type="text" class="form-control" id="new-project-name" name="Name" placeholder="Example" />
    </div>

    <button type="submit" class="btn btn-primary">Create Project</button>
    <a href="#" id="create-project-cancel" rel="modal:close">Cancel</a>
}

然后我的控制器在一些数据库工作后返回 PartialView：

[HttpPost]
public PartialViewResult Create(Project newProject)
{
    db.Projects.Add(newProject);
    db.SaveChanges();

    var projectList = db.ProjectLists.SingleOrDefault(pl => pl.Id == 1);

    return PartialView("~/Views/Project/_ProjectList.cshtml", projectList);
}

我希望 _ProjectList 部分视图通过 Controller 传入的新 projectList 加载到 #left-column 元素中，但是相反，整个视图都被覆盖了，所以新 HTML 源代码的整个主体看起来基本上像这样：

<body>
    <!-- all the stuff from the _ProjectList partial -->
</body>

值得注意的是，局部视图返回后，URL 为 /Project/Create，这是我没想到的。

我已经包含了 jquery-validate 和 jquery-validate-unobtrusive，并且控制台没有显示任何错误，所以这应该不是问题。

知道发生了什么吗？

【问题讨论】：

stackoverflow.com/a/15282510/1907 - 不显眼的 jQuery 版本问题？
是的，我使用的是 jQuery 3.1.0，所以看起来不引人注目是行不通的。

标签： c# jquery ajax asp.net-mvc razor

【解决方案1】：

当使用Ajax.BeginForm helper 方法进行ajax 表单发布时，您还需要包含jquery.unobtrusive-ajax.js 文件。该文件包含处理提交按钮点击事件和异步发送表单的代码，而不是进行正常的表单提交。

如果不包含这个文件，表单提交是正常的。我的猜测是您错过了包含此文件，因此错过了 ajaxified 表单提交体验。

所以一定要在jQuery之后加载这个文件

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

Here 是 nuget 页面的链接，如果您想通过 nuget 包管理器添加此文件。

【讨论】：

【解决方案2】：

Benjy 在上面的评论中得到了它。这是一个 jQuery 版本问题。我正在运行 3.1.0，并且 jquery.unobtrusive-ajax 停止使用 jQuery 版本 1.9。

【讨论】：