ASP.NET Core 6 MVC视图组件如何发送POST请求实现无刷新CRUD

核心是三个认知误区导致的：

• 混淆了Razor服务端渲染和客户端JS的执行边界：Component.InvokeAsync()是服务端运行的方法，所有带@前缀的Razor代码，都会在页面首次请求到达服务端、生成HTML的阶段全部执行完毕，最终输出到浏览器的是执行后的静态文本，根本不会在用户点击按钮的客户端环境运行。你写在onclick属性里的Razor异步委托，在页面渲染时就已经被求值成固定字符串写入HTML，点击时自然不会传递预期的点击时参数，只会拿到页面首次加载时固化的值。
• View Component不是可直接响应HTTP请求的端点：它本质是服务端渲染HTML片段的可复用组件，不支持路由直接访问，你给组件方法加的[HttpPost]、[ValidateAntiForgeryToken]是MVC控制器Action的特性，放在View Component方法上完全不会生效。
• 未指定type属性的button默认是submit类型，点击后会自动提交所在表单触发整页刷新，这就是点击按钮页面整体跳转的直接原因。

View Component只负责渲染HTML片段，无刷新交互必须搭配AJAX实现，完整流程为：前端发请求到后端接口→后端执行CRUD操作→后端重新渲染View Component生成最新HTML片段返回前端→前端用返回的片段替换页面对应区域，全程不需要整页重载。

第一步：拆分逻辑，将CRUD操作迁移到控制器Action #

不要把增删改逻辑写在View Component的InvokeAsync方法中，View Component仅保留查询数据、渲染视图的逻辑，数据变更操作全部放到可被路由访问的控制器Action中，操作完成后直接返回重新渲染的视图组件片段即可。
示例控制器代码：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> DeletePhone(int phoneSequence)
{
    var accountPhone = await _context.AccountPhones.FindAsync(phoneSequence);
    if (accountPhone != null)
    {
        _context.AccountPhones.Remove(accountPhone);
        await _context.SaveChangesAsync();
    }
    // 操作完成后返回最新渲染的列表组件片段
    return ViewComponent("AccountPhonesListEdit", new 
    { 
        accountNumber = accountPhone.AcctNbr, 
        typeOfCall = "Index", 
        phoneId = -1 
    });
}

调整后的View Component逻辑，仅负责渲染：

public async Task<IViewComponentResult> InvokeAsync(int accountNumber, string typeOfCall, int phoneId)
{
    // 仅查询数据返回视图，不要在此处写增删改等带数据副作用的操作
    var phoneList = await _context.AccountPhones
        .Where(p => p.AcctNbr == accountNumber)
        .ToListAsync();
    return View(phoneList);
}

第二步：改造页面结构，添加AJAX交互逻辑 #

首先给视图组件外层套一个固定ID的容器，用于局部刷新时替换内容：

<div id="phone-list-container">
    @await Component.InvokeAsync("AccountPhonesListEdit", new{accountNumber = Model.AcctNbr, typeOfCall = "Index", phoneId = -1})
</div>

修改删除按钮，添加type="button"阻断默认表单提交行为，将需要的参数存在data属性中：

<button type="button" 
        class="form-control bg-danger text-white delete-btn"
        data-phoneid="@ap.PhoneSequence">
    Delete
</button>

添加JS逻辑，通过事件委托监听删除按钮点击，发送AJAX请求完成局部刷新（事件委托无需在每次内容刷新后重新绑定事件）：

@section Scripts {
<script>
const listContainer = document.getElementById('phone-list-container');
listContainer.addEventListener('click', async function(e) {
    const target = e.target;
    // 处理删除按钮点击
    if (target.classList.contains('delete-btn')) {
        const phoneId = target.dataset.phoneid;
        // 取页面防伪令牌
        const token = document.querySelector('input[name="__RequestVerificationToken"]').value;

        const resp = await fetch('@Url.Action("DeletePhone", "你的控制器名称")', {
            method: 'POST',
            headers: {
                'RequestVerificationToken': token,
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({ phoneSequence: phoneId })
        });

        if (resp.ok) {
            // 用返回的最新HTML替换容器内容，完成局部刷新
            this.innerHTML = await resp.text();
        }
    }
})
</script>
}

第三步：扩展新增、编辑逻辑 #

新增、编辑的实现逻辑和删除完全一致：表单提交通过AJAX发送POST请求到对应控制器Action，后端完成数据操作后返回最新渲染的View Component片段，前端替换对应容器内容即可实现全流程无刷新CRUD。

内容的提问来源于stack exchange，提问作者Little Boy Blue