Ajax请求未触发后端控制器，求问题原因及解决办法

alert('test')可以正常触发，但$.ajax请求却没有执行，既没有任何错误提示，也没有数据传递到控制器。所有变量都有有效值，此前已经这样实现过一百次，从未遇到过这个问题。尝试过将url改为'@Url.Action("Add_ICLog_LogEntryRecommendation_Submit", "References")'，问题依旧。

相关代码 #

<div class="card-block" id="RecommendationTypeAddModal">    
        @*@using (Ajax.BeginForm("Log/Investment/Committee/Recommendation/Add/Submit", "References", new AjaxOptions
            {
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "ICLogRecommendationTypeAddForm",
                HttpMethod = "POST"
            },
                new { @id = "ICLogRecommendationTypeAddForm" }
            ))
            {*@

        @Html.HiddenFor(model => model.ICLogID);

        @Html.HiddenFor(model => model.SelectedIDs);
        <div class="row form-group">
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                @Html.LabelFor(model => model.RecommendationTypes)
            </div>
            <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
                @Html.DropDownListFor(model => model.RecommendationTypeID, new SelectList(Model.RecommendationTypes, "Value", "Text"), htmlAttributes: new { @class = "form-control", @id="selectedRecommendationType" })
            </div>
        </div>
        <div class="row form-group">
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                @Html.LabelFor(model => model.Portfolios)
            </div>
            <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
                @Html.DropDownListFor(model => model.PortfolioID, new SelectList(Model.Portfolios, "Value", "Text"), htmlAttributes: new { @class = "form-control", @id="selectedPortfolio" })
            </div>
        </div>
        @using (Ajax.BeginForm("Log/Investment/Committee/Recommendation/Search", "References", new AjaxOptions
        {
            UpdateTargetId = "InvestmentSearchResults",
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "POST"
        }, new { @id = "InvestmentSearchForm", @style = "flex-grow:1" }))
        {

            <div class="row form-group">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    @Html.LabelFor(model => model.Investments, "Investment Name", htmlAttributes: new { @class = "m-b-5" })
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 d-flex">
                    @Html.TextBoxFor(model => model.InvestmentSearchText, new { @class = "form-control m-r-10" })
                    <button id="InvestorSearchSubmit" data-submitform="true" data-formid="@@{ WriteLiteral("InvestmentSearchForm"); } " class="btn btn-info m-r-10">Search</button>

                </div>

            </div>
        }
        <div id="InvestmentSearchResults" />
        @*}*@
        

</div>
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <button class="btn btn-info pull-right" id="addRecommendationType">Add Recommendation Type</button>
    </div>
</div>
<script>
    $(document).ready(function () {
        $("#addRecommendationType").click(function () {

            var recTypeID = $('#selectedRecommendationType').val();
            var portID = $('#selectedPortfolio').val();
            var icLogID = $('#ICLogID').val();
            var investmentID = $('input[type="checkbox"]:checked').val();
            alert('test');
            $.ajax({
                type: "POST",
                url: "@Url.Action("Log/Investment/Committee/RecommendationType/Create/Submit", "References")",
                data: { 'icLogID': icLogID, 'recommendationTypeID': recTypeID, 'portfolioID': portID, 'investmentID': investmentID },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {                   
                },
                error: function () {
                    return "error";
                }
            });
        });
    });

</script>

排查方向及解决方法 #

• 阻止按钮默认提交行为：<button>标签默认类型是submit，点击会触发页面刷新（即使没有显式包裹在表单中），导致AJAX请求被中断。两种解决方式：

  1. 在点击事件中阻止默认行为：

     $("#addRecommendationType").click(function (e) {
         e.preventDefault(); // 阻止默认刷新行为
         // 后续AJAX代码不变
     });
     

  2. 给按钮添加type="button"属性：

     <button type="button" class="btn btn-info pull-right" id="addRecommendationType">Add Recommendation Type</button>
     

• 修正JSON数据格式：设置了contentType: "application/json"，但data是普通JS对象，未序列化为JSON字符串，后端无法解析。修改为：

  data: JSON.stringify({ 'icLogID': icLogID, 'recommendationTypeID': recTypeID, 'portfolioID': portID, 'investmentID': investmentID }),
  

• 检查URL生成是否正确：@Url.Action的第一个参数应为Action名称，而非完整路径。如果你的Action是CreateSubmit，控制器是References，且存在区域路由，正确写法示例：

  @Url.Action("CreateSubmit", "References", new { area = "Log/Investment/Committee/RecommendationType" })
  

  也可以直接查看浏览器渲染后的HTML，确认url属性值是否为有效后端接口地址（在浏览器控制台Network标签可查看请求是否发出、地址是否正确）。

• 完善错误回调排查问题：当前错误回调仅返回字符串，无法查看具体错误信息，修改为：

  error: function (xhr, status, error) {
      console.log("请求错误状态:", status);
      console.log("错误详情:", error);
      console.log("后端响应内容:", xhr.responseText);
  }
  

  这样可在控制台获取详细错误，快速定位问题。

• 处理investmentID为空的情况：若未勾选复选框，$('input[type="checkbox"]:checked').val()会返回undefined，可能导致JSON序列化或后端参数校验失败，可添加默认值：

  var investmentID = $('input[type="checkbox"]:checked').val() || null;
  

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