.NET Core 6.0中已弃用Microsoft.jQuery.Unobtrusive.Ajax，如何替代Ajax.BeginForm助手？

官方推荐方向 #

ASP.NET Core 中微软不再提供类似Ajax.BeginForm()的原生服务器端助手，推荐采用后端接口配合前端脚本的方式实现局部刷新，也可根据项目场景选择 Blazor 这类现代框架。

自定义 jQuery 实现局部刷新示例 #

1. 后端逻辑（Razor Pages 为例） #

先准备处理表单提交的 PageModel，返回局部视图来更新页面指定区域：

public class FormPageModel : PageModel
{
    [BindProperty]
    public FormData Input { get; set; }

    public IActionResult OnPost()
    {
        if (!ModelState.IsValid)
        {
            // 验证失败时返回带错误信息的表单局部视图
            return Partial("_FormPartial", Input);
        }

        // 执行业务逻辑，比如数据存储

        // 操作成功返回结果局部视图
        return Partial("_ResultPartial", "提交成功");
    }

    public class FormData
    {
        public string Name { get; set; }
        public string Email { get; set; }
    }
}

2. 前端 Razor 页面代码 #

<!-- 表单渲染容器 -->
<div id="formWrapper">
    <partial name="_FormPartial" model="Model.Input" />
</div>

<!-- 结果展示容器 -->
<div id="resultWrapper"></div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(document).on('submit', '#ajaxForm', function(e) {
        e.preventDefault(); // 阻止默认整页提交

        const $form = $(this);
        const submitUrl = $form.attr('action');
        const formData = $form.serialize();

        $.ajax({
            type: $form.attr('method'),
            url: submitUrl,
            data: formData,
            success: function(res) {
                // 根据返回内容判断更新区域
                if ($form.find('.validation-summary-errors').length) {
                    // 验证失败，更新表单区域
                    $('#formWrapper').html(res);
                } else {
                    // 提交成功，更新结果区域
                    $('#resultWrapper').html(res);
                    $form[0].reset(); // 可选：重置表单
                }
            },
            error: function() {
                $('#resultWrapper').html('<p class="text-danger">提交失败，请稍后重试</p>');
            }
        });
    });
</script>

3. 表单局部视图（_FormPartial.cshtml） #

<form id="ajaxForm" method="post" asp-page="./FormPage">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    
    <div class="mb-3">
        <label asp-for="Name" class="form-label"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    
    <div class="mb-3">
        <label asp-for="Email" class="form-label"></label>
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    
    <button type="submit" class="btn btn-primary">提交</button>
</form>

4. 结果局部视图（_ResultPartial.cshtml） #

<div class="alert alert-success">
    @Model
</div>

其他可选方案 #

• Blazor：若项目适合迁移到 Blazor（Server 或 WebAssembly），可通过组件绑定和事件处理实现无 Ajax 代码的局部更新，更贴合现代前端开发模式。
• HTMX：轻量级第三方库，通过自定义 HTML 属性实现局部刷新，无需编写大量 JS 代码，适合追求简洁的场景。

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