ASP.NET MVC单页应用：联系表单POST后重定向至带#的URL

方案一：服务器端重定向（传统表单提交） #

锚点（#contact）属于客户端浏览器处理的内容，ASP.NET Core路由系统不会识别锚点部分，所以直接用[Route]属性无效。你需要手动构造带锚点的URL，用Redirect方法跳转，同时借助TempData传递提示信息（重定向是新的GET请求，ViewBag无法跨请求保留数据）。

修改POST动作代码 #

[HttpPost]
public IActionResult Index(Contact model)
{
    if (!ModelState.IsValid)
    {
        TempData["error"] = "An error occurred! Please try again.";
        // 构造带锚点的Index页面URL
        var targetUrl = Url.Action("Index") + "#contact";
        return Redirect(targetUrl);
    }

    TempData["success"] = "Your message was sent :D";
    var targetUrl = Url.Action("Index") + "#contact";
    return Redirect(targetUrl);
}

补充GET动作代码 #

在GET的Index方法中读取TempData的信息，传递给视图展示：

[HttpGet]
public IActionResult Index()
{
    if (TempData.ContainsKey("error"))
    {
        ViewBag.error = TempData["error"];
    }
    if (TempData.ContainsKey("success"))
    {
        ViewBag.success = TempData["success"];
    }
    return View();
}

表单提交后，会自动重定向到localhost:5001/#contact，同时视图能读取ViewBag中的提示信息并展示。

方案二：AJAX异步提交（更适配SPA） #

单页应用通常推荐用AJAX提交表单，避免页面刷新，直接在前端处理结果并滚动到目标区域：

前端JavaScript代码（以jQuery为例） #

<form id="contactForm" asp-action="Index" asp-controller="Home" method="post">
    <!-- 你的表单字段 -->
    <div id="successMessage" style="display:none;color:green;"></div>
    <div id="errorMessage" style="display:none;color:red;"></div>
    <button type="submit">提交</button>
</form>

<script>
    $('#contactForm').on('submit', function(e) {
        e.preventDefault(); // 阻止默认表单提交行为
        
        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: $(this).serialize(),
            success: function() {
                $('#successMessage').text('Your message was sent :D').show();
                $('#errorMessage').hide();
                // 平滑滚动到contact区域
                $('html, body').animate({
                    scrollTop: $('#contact').offset().top
                }, 500);
            },
            error: function() {
                $('#errorMessage').text('An error occurred! Please try again.').show();
                $('#successMessage').hide();
                // 平滑滚动到contact区域
                $('html, body').animate({
                    scrollTop: $('#contact').offset().top
                }, 500);
            }
        });
    });
</script>

修改后端POST动作代码 #

返回JSON格式响应，供前端判断结果：

[HttpPost]
public IActionResult Index(Contact model)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(); // 返回400错误，触发前端error回调
    }

    // 这里添加发送消息的业务逻辑

    return Ok(); // 返回200成功，触发前端success回调
}

这种方案符合SPA无刷新的特性，用户体验更流畅。

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