.NET Core 6中如何实现.NET Framework的Ajax.BeginForm相同功能？

原代码通过Ajax.BeginForm实现了以下核心逻辑：以GET方式AJAX提交表单，用返回的HTML替换指定DOM元素，同时触发成功/失败回调。由于.NET Core 6移除了Ajax.BeginForm，可以通过原生表单+JavaScript实现完全等价的功能，具体方案如下：

1. 重构表单为标准HTML标签 #

将原Ajax.BeginForm替换为普通<form>，利用ASP.NET Core的标签助手生成正确请求地址：

<form id="searchForm" asp-action="Search" asp-controller="MainLayout" method="GET">
    @if (Model.ShowMore)
    {
        @Html.RenderPartial("Partials/SiteLayout/_ShowMore")
    }
</form>

若不使用标签助手，可直接写action="/MainLayout/Search"指定请求URL。

2. 编写AJAX提交处理逻辑 #

通过JavaScript拦截表单提交事件，模拟原AjaxOptions的行为：

方案一：使用jQuery（简化操作） #

假设项目已引入jQuery，添加以下脚本：

$(function() {
    $("#searchForm").submit(function(e) {
        e.preventDefault();
        
        const $form = $(this);
        const targetSelector = "#searchResultsDivInPartialView";
        const requestUrl = $form.attr("action");
        const formData = $form.serialize();

        $.ajax({
            url: requestUrl,
            type: "GET",
            data: formData,
            success: function(response) {
                // 替换目标元素本身（对应InsertionMode.ReplaceWith）
                $(targetSelector).replaceWith(response);
                // 触发原成功回调
                typeof OnAjaxSuccess === "function" && OnAjaxSuccess();
            },
            error: function(xhr, status, err) {
                // 触发原失败回调
                typeof OnAjaxFailure === "function" && OnAjaxFailure(xhr, status, err);
            }
        });
    });
});

方案二：原生JavaScript（无依赖） #

如果不想引入jQuery，用原生fetch实现：

document.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById("searchForm");
    form.addEventListener("submit", function(e) {
        e.preventDefault();
        
        const targetId = "searchResultsDivInPartialView";
        const url = this.action;
        const formData = new URLSearchParams(new FormData(this));

        fetch(`${url}?${formData}`, { method: "GET" })
            .then(res => res.text())
            .then(html => {
                // 替换目标元素本身
                document.getElementById(targetId).outerHTML = html;
                typeof OnAjaxSuccess === "function" && OnAjaxSuccess();
            })
            .catch(err => {
                typeof OnAjaxFailure === "function" && OnAjaxFailure(err);
            });
    });
});

3. 控制器端确认 #

确保MainLayout控制器的Search方法返回局部视图，这样AJAX请求能获取到用于替换的HTML片段：

public IActionResult Search(YourSearchModel model)
{
    // 处理搜索逻辑，获取结果
    var results = GetSearchResults(model);
    
    return PartialView("YourSearchResultsPartial", results);
}

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