ASP.NET MVC模态弹窗无法向控制器传递参数求助

我尝试在Bootstrap模态框的局部视图中展示组织详情，折腾了一天还是没解决。组织数据加载在id为OrganizationGrid的表格里，每行都有个View按钮，点击后会触发页面底部的JavaScript函数，通过AJAX向/Organizations/Details接口发POST请求。但控制器的Details方法接收不到organizationId参数——哪怕在JS里硬编码参数，控制器拿到的还是null；要是在控制器里硬编码参数，弹窗就能正常加载对应内容，求指点解决方向。

表格代码 #

<table class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0" id="OrganizationGrid">
  <thead>
    <tr style="color:#126E75; background-color:lightcyan">
      <th style=" width:5%">
        @Html.ActionLink("ID", "Index", new { sortOrder = ViewBag.IDSortParm, currentFilter=ViewBag.CurrentFilter })
      </th>
      <th style=" width:25%">
        @Html.ActionLink("Name", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter=ViewBag.CurrentFilter })
      </th>
      <th style=" width:25%">
        Parent Org
      </th>
      <th style=" width:10%; text-align:center">
        Website
      </th>
      <th style="width:25%">
        Comment
      </th>
      <th scope="col" colspan="3" style=" width:10%; text-align:center">Action</th>

    </tr>
  </thead>
  <tbody>
    @foreach (var item in Model) {
    <tr class=" table-light">
      <td style="text-align:left">
        @Html.DisplayFor(modelItem => item.Id)
      </td>
      <td style="text-align:left">
        @Html.DisplayFor(modelItem => item.Name)
      </td>
      <td style="text-align:left">
        @Html.DisplayFor(modelItem => item.ParentOrg.Name)
      </td>
      <td style="text-align: center">
        <a href=@Html.DisplayFor(modelItem=> item.Website) target="_blank">
                                    <i class="fa-solid fa-globe" target="_blank" rel="noopener noreferrer"></i>
                                    </a>
      </td>
      <td style="text-align:left">
        @Html.DisplayFor(modelItem => item.Comment)
      </td>
      <td style="text-align: center">
        <a asp-action="Edit" asp-route-id="@item.Id">
          <i class="fas fa-edit"></i>
        </a>
      </td>
      <td>
        <a class="details" href="javascript:;">View</a>
      </td>
      <td style="text-align: center">
        <a asp-action="Delete" asp-route-id="@item.Id">
          <i class="fas fa-trash" style="color:red"></i>
        </a>
      </td>
    </tr>
    }
  </tbody>
</table>

JavaScript代码 #

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("#OrganizationGrid .details").click(function() {
      var organizationId = $(this).closest("tr").find("td").eq(0).html();
      $.ajax({
        type: "POST",
        url: "/Organizations/Details",
        data: '{organizationId: "' + organizationId + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        success: function(response) {
          $("#partialModal").find(".modal-body").html(response);
          $("#partialModal").modal('show');
        },
        failure: function(response) {
          alert(response.responseText);
        },
        error: function(response) {
          alert(response.responseText);
        }
      });
    });
  });
</script>

控制器代码 #

[HttpPost]
public ActionResult Details(int organizationId)
{
    var organization = _context.Organizations
        .Include(o => o.ParentOrg).Where(p=>p.Id == organizationId);

    if (organization == null)
    {
        return NotFound();
    }
    return PartialView("_Details", organization);
}

解决方向 #

1. 修正AJAX数据格式与参数类型 #

当前手动拼接JSON字符串容易出现语法错误，且传递的是字符串类型，而控制器参数是int，导致绑定失败。修改AJAX代码：

$(function() {
  $("#OrganizationGrid .details").click(function() {
    // 用text()获取纯文本ID，避免HTML标签，trim去除多余空格
    var organizationId = $(this).closest("tr").find("td").eq(0).text().trim();
    $.ajax({
      type: "POST",
      url: "/Organizations/Details",
      // 转成数字并通过JSON.stringify正确序列化
      data: JSON.stringify({ organizationId: parseInt(organizationId) }),
      contentType: "application/json; charset=utf-8",
      dataType: "html",
      success: function(response) {
        $("#partialModal").find(".modal-body").html(response);
        $("#partialModal").modal('show');
      },
      failure: function(response) {
        alert(response.responseText);
      },
      error: function(response) {
        alert(response.responseText);
      }
    });
  });
});

2. 显式指定控制器参数绑定来源 #

ASP.NET Core默认不会从JSON请求体绑定简单类型（如int），需要给控制器参数添加[FromBody]特性：

[HttpPost]
public ActionResult Details([FromBody] int organizationId)
{
    // ... 后续代码不变
}

3. 可选：改用表单格式发送数据 #

如果不想使用JSON格式，可以直接传递表单数据，无需[FromBody]：

$(function() {
  $("#OrganizationGrid .details").click(function() {
    var organizationId = $(this).closest("tr").find("td").eq(0).text().trim();
    $.ajax({
      type: "POST",
      url: "/Organizations/Details",
      // 直接传递对象，jQuery自动转为表单格式
      data: { organizationId: organizationId },
      // 移除contentType，或设置为"application/x-www-form-urlencoded"
      dataType: "html",
      success: function(response) {
        $("#partialModal").find(".modal-body").html(response);
        $("#partialModal").modal('show');
      },
      failure: function(response) {
        alert(response.responseText);
      },
      error: function(response) {
        alert(response.responseText);
      }
    });
  });
});

这种情况下控制器保持原代码即可。

4. 修复数据查询逻辑 #

控制器中Where方法返回的是IQueryable，永远不会为null，导致NotFound判断失效，应改用FirstOrDefault()：

var organization = _context.Organizations
    .Include(o => o.ParentOrg)
    .FirstOrDefault(p => p.Id == organizationId);

if (organization == null)
{
    return NotFound();
}

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