ASP.NET Core 5 MVC提交表单后如何停留指定锚点且不刷新页面

要实现表单提交后不刷新页面，核心是把传统的同步表单提交+服务端重定向的逻辑，改成AJAX异步提交+前端本地处理结果，具体实现步骤如下：

实现原理 #

你当前的代码走的是HTTP标准同步表单提交流程：用户点击提交后浏览器发送同步POST请求，服务端返回重定向响应，浏览器收到后自动加载目标地址，所以必然会触发页面重载。改用AJAX异步提交后，请求由JS发起，全程不触发页面跳转，服务端直接返回操作结果，前端拿到结果后本地更新提示即可。

1 调整前端代码 #

1.1 表单结构调整 #

给contact区块的表单加唯一ID，新增结果提示容器：

<section id="contact">
    <!-- 原有区块内容 -->
    <form id="contactForm" asp-action="Create" asp-controller="Comp" method="post">
        <!-- 原有表单输入字段：姓名、邮箱、留言等 -->
        <div asp-validation-summary="All"></div>
        <button type="submit" id="submitBtn">发送留言</button>
        <!-- 结果提示容器，默认隐藏 -->
        <div id="resultTip" style="display: none; margin-top: 1rem;"></div>
    </form>
</section>

1.2 新增异步提交脚本 #

ASP.NET Core 5默认项目已内置jQuery，直接添加如下脚本即可：

$(function () {
    // 监听表单提交事件
    $("#contactForm").submit(function (e) {
        // 阻止默认同步提交行为
        e.preventDefault();
        const $form = $(this);
        const $submitBtn = $("#submitBtn");
        const $tip = $("#resultTip");

        // 禁用按钮防止重复提交
        $submitBtn.prop("disabled", true).text("提交中...");
        // 收集表单数据（自动包含防伪标记）
        const formData = $form.serialize();

        // 发起异步POST请求
        $.post($form.attr("action"), formData, function (res) {
            // 根据返回结果更新提示
            if (res.code === 1) {
                $tip.removeClass("text-danger").addClass("text-success")
                    .text("感谢您的留言，我们会尽快与您联系！");
                // 提交成功清空表单
                $form[0].reset();
            } else if (res.code === 0) {
                $tip.removeClass("text-success").addClass("text-danger")
                    .text("提交失败，请检查输入内容是否符合要求");
            } else {
                $tip.removeClass("text-success").addClass("text-danger")
                    .text("服务器异常，请稍后重试");
            }
            $tip.show();
            // 恢复按钮状态
            $submitBtn.prop("disabled", false).text("发送留言");
            // 可选：3秒后自动隐藏提示
            setTimeout(() => $tip.fadeOut(), 3000);
        }).fail(function () {
            // 网络异常处理
            $tip.removeClass("text-success").addClass("text-danger")
                .text("网络异常，请检查网络后重试").show();
            $submitBtn.prop("disabled", false).text("发送留言");
        });
    });
});

2 修改后端Action代码 #

把原有重定向逻辑全部替换为返回JSON格式的操作结果：

// POST: CompController/Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(MInbox newRecord)
{
    try
    {
        if (ModelState.IsValid)
        {
            int OperSucceeded = repo_Inbox.Add(newRecord);
            if (OperSucceeded == 1)
            {
                // 提交成功
                return Json(new { code = 1 });
            }
        }
        // 模型验证失败
        return Json(new { code = 0 });
    }
    catch (Exception ex)
    {
        // 服务端异常
        return Json(new { code = 2 });
    }
}

可选优化 #

如果需要把模型验证的具体错误信息返回给前端显示，可以在code=0的返回结果中加入错误列表：

var errors = ModelState.Values.SelectMany(v => v.Errors.Select(e => e.ErrorMessage)).ToList();
return Json(new { code = 0, msg = errors });

前端拿到后遍历渲染到提示容器即可。

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