ASP.NET MVC如何实现Ajax表单提交内容插入指定div

你的配置不生效主要有两个核心问题：

1. UpdateTargetId 属性匹配的是DOM元素的id属性，你当前的评论容器只设置了class="comments"，没有对应id，脚本无法定位到目标插入节点。
2. Ajax.BeginForm 依赖无侵入式Ajax脚本运行，未正确加载相关脚本时表单会退化为普通整页提交，不会执行无刷新内容插入逻辑。

• 修正目标容器属性：给评论容器添加和UpdateTargetId值匹配的id，如果你需要新提交的评论显示在评论区最顶部，原有InsertionMode.InsertBefore配置无需修改，容器代码调整为：

<div id="comments" class="comments"></div>

不同InsertionMode枚举的效果说明：

• Replace：直接覆盖目标容器内的所有原有内容
• InsertBefore：将返回的新内容插入到目标容器内部的最前端（适合评论区新内容置顶场景）
• InsertAfter：将返回的新内容插入到目标容器内部的最末尾

• 确认依赖脚本加载：Ajax.BeginForm的无刷新提交能力依赖jquery.unobtrusive-ajax.min.js，需要在页面中按顺序引入脚本（必须先加载jQuery，再加载该脚本，建议放在全局布局页的脚本渲染节点）：

@* 脚本加载顺序不能颠倒 *@
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
@* 如果你用了客户端验证，同时保留下面两个脚本 *@
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

• 修正后端返回值：提交表单对应的Create Action不要返回带布局页的完整视图，否则会把整页HTML插入到评论区，正确做法是返回单条评论的分部视图，示例代码：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Comment model)
{
    if (!ModelState.IsValid)
    {
        return new HttpStatusCodeResult(400, "提交信息校验不通过");
    }
    // 此处编写评论入库的业务逻辑
    // 保存成功后返回单条评论的分部视图
    return PartialView("_SingleComment", model);
}

如果完成以上配置后功能仍异常，可按两个点排查：

• 打开浏览器开发者工具的Console面板，检查是否存在JS报错：如果出现$ is not defined类错误，是脚本加载顺序错误或jQuery未正确加载导致；如果出现和unobtrusive相关的报错，检查脚本文件路径是否正确。
• 检查项目Web.config配置，确认无侵入式脚本开关已开启：

<appSettings>
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

该配置在默认新建的ASP.NET MVC项目中为开启状态，若被手动修改为false会导致Ajax表单完全失效。

内容的提问来源于stack exchange，提问作者ELOL