.NET 6中使用AJAX调用非控制器方法失败问题排查

问题背景 #

在.NET Core 6环境下，尝试通过AJAX调用非控制器类中的Index方法，但请求始终无法触发该方法——哪怕硬编码URL也无效。该方法带有[HttpPost]和[ValidateAntiForgeryToken]特性，返回IViewComponentResult类型。

相关代码 #

AJAX代码 #

$.ajax({
    type: 'POST',
    contentType: false,
    processData: false,
    url: form.action,
    data: formData,
    success: () => {
    },
    error: () => {   
    }});

HTML表单 #

<form method="POST" enctype="multipart/form-data">
    @Html.AntiForgeryToken()
    
    <div>
    --------
    ----
    --
    </div>

    <div class="btns">
        <button class="fill reset-button" type="button">@Html.PropertyFor(model => model.ResetButtonText)</button>
        <button class="fill send-button" type="button" this.disabled="true">@Html.PropertyFor(model => model.SendButtonText)</button>
    </div>
    <br />
    <div class="se">
        <div class="alert alert-info" style="display:none">Sending...</div>
        <div class="alert alert-danger" style="display:none">There was an issue with the submitted data. Please correct any errors and resubmit.</div>
        <div class="alert alert-success" style="display: none">Your message was sent successfully.</div>
    </div>
</form>

目标方法代码 #

[HttpPost]
[ValidateAntiForgeryToken]
public IViewComponentResult Index(Block currentContent, ViewModel viewModel)
{
    // 业务代码
}

问题根源与解决步骤 #

1. 非控制器类不支持直接接收HTTP请求
   ASP.NET Core的[HttpPost]特性仅对继承Controller/ControllerBase的控制器类生效，普通类或视图组件（ViewComponent）的方法不会被路由系统识别。视图组件的设计目的是渲染部分视图，本身不能作为HTTP请求的端点。

2. 新增控制器作为请求代理
   要让AJAX能调用到目标逻辑，需要添加一个控制器方法作为中间层，在其中调用原视图组件的逻辑：

   public class ProxyController : Controller
   {
       [HttpPost]
       [ValidateAntiForgeryToken]
       public IActionResult TriggerIndex(Block currentContent, ViewModel viewModel)
       {
           // 实例化你的视图组件并调用方法
           var viewComponent = new YourViewComponent();
           var result = viewComponent.Index(currentContent, viewModel);
           // 返回视图组件渲染后的HTML内容
           return ViewComponent("YourViewComponent", new { currentContent, viewModel });
       }
   }
   

3. 调整AJAX请求的URL
   将表单的action属性指向新增的控制器路由，或者直接在AJAX中硬编码URL：

   <form method="POST" enctype="multipart/form-data" action="/Proxy/TriggerIndex">
       <!-- 表单内容保持不变 -->
   </form>
   

4. 确保防伪令牌正确传递
   由于设置了contentType: false和processData: false（用于文件上传场景），需要确保防伪令牌被包含在formData中。如果是手动构建formData，要手动添加令牌：

   const form = document.querySelector('form');
   const formData = new FormData(form);
   // 若自动获取不到，手动添加
   formData.append('__RequestVerificationToken', document.querySelector('input[name="__RequestVerificationToken"]').value);
   

5. 修复表单按钮的语法错误
   提交按钮的this.disabled="true"是无效语法，应改为disabled="true"，或者在JS点击事件中动态设置禁用状态：

   <button class="fill send-button" type="button" disabled>@Html.PropertyFor(model => model.SendButtonText)</button>
   

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