ASP.NET Core中如何向jQuery load方法传递参数

你当前的代码问题在于，load方法里的URL是硬编码的/employees/buildingdetail/id——这里的id是字符串字面量，不是实际要传递的数值，所以控制器根本接收不到正确的参数。别担心，这是jQuery新手常遇到的小问题，咱们一步步来解决：

第一步：确定ID的来源并存储 #

首先你得把要传递的id值存到页面的某个地方，最常用的两种方式：

方式1：给点击按钮加自定义data-*属性

把你的按钮改成这样（如果id来自模型，就用@Model.YourIdField替换数值）：

<button id="LoadBuildingDetail" data-id="@Model.BuildingId">加载楼宇详情</button>

方式2：用隐藏域存储ID

如果ID需要从页面其他元素获取，比如表单或者模型，也可以用隐藏域：

<input type="hidden" id="TargetBuildingId" value="@Model.BuildingId" />

第二步：修改jQuery代码动态传递ID #

接下来修改你的脚本，获取存储的ID并拼接成正确的URL：

对应方式1（从按钮的data属性取ID）

$(document).ready(function () {
    $("#LoadBuildingDetail").click(function () {
        // 从点击的按钮上获取data-id的值
        const buildingId = $(this).data("id");
        // 拼接正确的请求URL，把ID传进去
        $("#BuildingDetail").load(`/employees/buildingdetail/${buildingId}`);
    });
});

对应方式2（从隐藏域取ID）

$(document).ready(function () {
    $("#LoadBuildingDetail").click(function () {
        // 从隐藏域获取ID值
        const buildingId = $("#TargetBuildingId").val();
        $("#BuildingDetail").load(`/employees/buildingdetail/${buildingId}`);
    });
});

进阶：用ASP.NET的Url.Action生成URL（推荐） #

为了避免硬编码URL路径（比如后续路由配置变化时不用改JS），可以用Url.Action在视图里生成正确的路由地址：

$(document).ready(function () {
    $("#LoadBuildingDetail").click(function () {
        const buildingId = $(this).data("id");
        // 用Url.Action生成控制器方法的URL，再拼接ID
        const requestUrl = '@Url.Action("BuildingDetail", "Employees")' + '/' + buildingId;
        $("#BuildingDetail").load(requestUrl);
    });
});

如果你的控制器方法是用查询字符串接收参数（比如默认路由），也可以这么写：

const requestUrl = '@Url.Action("BuildingDetail", "Employees")?id=' + buildingId;

最后检查控制器路由 #

确保你的控制器和方法的路由配置是正确的，比如：

[Route("employees")]
public class EmployeesController : Controller
{
    [Route("buildingdetail/{id}")]
    public IActionResult BuildingDetail(int id)
    {
        return PartialView("_BuildingDetailsPartial", _buildingRepository.GetById(id));
    }
}

如果是用默认路由（没有加[Route]特性），那URL格式/employees/buildingdetail?id=xxx也是可以正常工作的。

这样修改后，点击按钮时就会把动态的ID传递给控制器，正确加载对应的分部视图啦！

内容的提问来源于stack exchange，提问作者Nashmár