Question

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

Index.cshtml

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

〜/查看/项目/ _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>
}

然后我的Controller在一些数据库工作后返回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局部视图加载到＃left-column元素中，并且Controller传入新的projectList，但是整个View被覆盖，所以新HTML源的整个主体看起来基本上都是像这样：

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

值得注意的是，在部分视图返回后，URL读取/ Project / Create，我不会期望。

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

知道发生了什么事吗？

Answer 1

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

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

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

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

如果您想通过nuget包管理器添加此文件，

Here是nuget页面的链接。

Answer 2

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

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

2 个答案: