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

本文关键字：视图 覆盖 返回 PartialView 控制器 | 更新日期: 2023-09-27 17:59:53

我正在张贴并尝试使用Ajax重新加载带有新数据的部分视图，如下所示：

Index.cshtml

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

~/Views/Project/ProjectList.cs.html

@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列元素中，但相反，整个视图被覆盖，因此新HTML源的整个主体基本上看起来是这样的：

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

值得注意的是，在部分视图返回后，URL读取/Project/Create，这是我所没有想到的。

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

知道发生了什么事吗？

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

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

如果您不包括此文件，则表单提交将是正常的。我的猜测是，您错过了包含此文件，因此错过了一次价值化的表单提交体验。

因此，请确保在jQuery 之后加载此文件

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

如果你想通过nuget包管理器添加这个文件，这里有nuget页面的链接。

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

相关文章：