MVC中使用分部视图插入数据无响应及跳转需求排查

我看了你的代码，发现几个关键问题导致提交表单后没反应，咱们一步步来修复：

问题1：表单默认提交行为与AJAX冲突 #

你用了Html.BeginForm()生成表单，同时给提交按钮绑定了AJAX点击事件。点击按钮时，浏览器会优先触发表单的默认同步提交行为，直接刷新页面或者跳转，打断了AJAX请求，所以你看不到AJAX的success回调执行。

修复方法：阻止默认提交行为 #

修改你的JS代码，在点击事件里添加e.preventDefault()，同时明确指定请求方法为POST：

$(document).on('click', '.btnSubmit', function (e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    $.ajax({
        url: '@Url.Action("Comments", "Home")',
        type: 'POST', // 明确指定POST方法，匹配Action的[HttpPost]特性
        cache: false,
        async: true,
        // 加入AntiForgeryToken，匹配Action的[ValidateAntiForgeryToken]验证
        data: {
            __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val(),
            UserId: $('#userId').val(),
            UserComments: $('#content').val()
        },
        success: function (_result) {
            // 重定向到指定页面
            window.location.href = '@Url.Action("Index", "Home")';
        },
        error: function(xhr) {
            // 可选：处理请求失败的情况，比如打印错误信息
            console.log('提交失败：', xhr.responseText);
        }
    });
});

问题2：缺少AntiForgeryToken导致验证失败 #

你的Action加了[ValidateAntiForgeryToken]，但AJAX请求里没有传递这个令牌，导致ModelState验证失败，Action返回空JSON，success回调自然无法正常触发。上面的JS代码已经补充了令牌传递，解决这个问题。

问题3：TextAreaFor的属性写法错误 #

你在TextAreaFor里嵌套了htmlAttributes，这会导致属性无法正确渲染到DOM元素上：

// 错误写法
@Html.TextAreaFor(model => model.UserComments, new { htmlAttributes = new { @class = "form-control", @id = "content"} })

// 正确写法，直接传递属性集合
@Html.TextAreaFor(model => model.UserComments, new { @class = "form-control", @id = "content" })

优化Action方法（可选） #

当前Action在ModelState无效时返回空JSON，不利于前端处理错误，建议返回明确的状态和错误信息：

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult Comments([Bind(Include = "CommentId,UserComments,UserId")] Comment comment)
{
    if (ModelState.IsValid)
    {
        db.Comments.Add(comment);
        db.SaveChanges();
        return Json(new { success = true, data = comment }, JsonRequestBehavior.AllowGet);
    }
    // 收集所有验证错误信息返回给前端
    var errors = ModelState.Values.SelectMany(v => v.Errors.Select(e => e.ErrorMessage));
    return Json(new { success = false, errors = errors }, JsonRequestBehavior.AllowGet);
}

对应的，前端可以在success回调里判断请求状态，做更友好的处理：

success: function (_result) {
    if (_result.success) {
        window.location.href = '@Url.Action("Index", "Home")';
    } else {
        // 弹出错误提示
        alert('提交失败：\n' + _result.errors.join('\n'));
    }
}

做完这些修改后，提交评论应该就能正常触发AJAX请求，验证通过后自动重定向到Home/Index页面了。

内容的提问来源于stack exchange，提问作者Farman Ud Din