ASP.NET Core MVC嵌套编辑器模板中Ajax调用失效问题求助

以下是几个关键排查方向，按优先级逐一验证：

• 检查Ajax请求URL的正确性
  避免硬编码路径，尽量用@Url.Action("AddNewAnswerToQuestion", "你的控制器名")生成绝对路径，确保和Controller的路由匹配。如果控制器加了[Route]自定义路由规则，要确认请求路径完全符合路由模板。

• 匹配请求方式与Controller方法特性
  确保Ajax的type属性和Controller方法上的[HttpPost]/[HttpGet]特性一致。比如方法标注了[HttpPost]，Ajax就不能用type: 'GET'，否则请求会被拦截。示例：

  [HttpPost]
  public IActionResult AddNewAnswerToQuestion(int questionId)
  {
      // 业务逻辑
  }
  

  对应的Ajax要设置type: 'POST'。

• 修复动态元素的事件绑定
  因为选项是动态生成的，普通的$('.delete-answer-btn').click()只会绑定页面初始加载时存在的元素，新添加的按钮不会触发事件。改用事件委托绑定：

  $(document).on('click', '.add-answer-btn', function() {
      // 你的Ajax请求逻辑
  });
  $(document).on('click', '.delete-answer-btn', function() {
      // 你的Ajax请求逻辑
  });
  

• 验证参数绑定的正确性
  确保Ajax发送的数据键名和Controller方法的参数名称完全一致。如果发送的是JSON格式数据，要设置contentType: 'application/json'，并在参数上添加[FromBody]特性：

  $.ajax({
      url: '@Url.Action("AddNewAnswerToQuestion", "Quiz")',
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({ questionId: $(this).data('qid') }),
      success: function(html) {
          // 将返回的选项HTML追加到对应题目下
      }
  });
  

  对应的Controller方法：

  [HttpPost]
  public IActionResult AddNewAnswerToQuestion([FromBody] int questionId)
  {
      // 创建新选项并返回EditorTemplate的HTML
      var answer = new Answer();
      return PartialView("_AnswerEditor", answer);
  }
  

  如果是表单编码格式（默认），则不需要[FromBody]，直接用参数接收即可。

• 处理防伪造令牌验证
  ASP.NET Core默认会拦截未携带防伪造令牌的POST请求，导致方法无法触发。解决方式：

  1. 在页面中添加@Html.AntiForgeryToken()
  2. 在Ajax请求中加入令牌头：

     headers: {
         RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
     }
     

• 通过浏览器控制台排查错误
  打开F12开发者工具，切换到Network标签，查看请求的状态码（比如404表示路径错误，400表示参数绑定失败，403表示令牌验证失败），查看Response内容获取具体错误信息，这是最直接的排查手段。

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