ASP.NET Core MVC中如何通过jQuery隐藏链接中的Id参数？

嘿，我来帮你搞定这个问题～你现在用的是GET请求跳转页面，所以Id参数会直接暴露在URL里。要完全隐藏它，或者优化URL显示，这里有几个实用的方案：

方案1：用表单POST提交（完全隐藏参数） #

POST请求的参数不会出现在URL里，我们可以通过动态创建表单的方式实现跳转：

前端脚本修改 #

<script>
$(document).on('click', '.btndetail', function () {
    var id = $(this).data("id");
    
    // 动态创建一个POST表单
    const form = $('<form>', {
        method: 'POST',
        action: '/Schools/SchoolDetails'
    });
    
    // 添加隐藏的Id字段
    form.append($('<input>', {
        type: 'hidden',
        name: 'Id',
        value: id
    }));
    
    // 必须添加ASP.NET Core的防伪造令牌，避免跨站请求伪造错误
    form.append($('<input>', {
        type: 'hidden',
        name: '__RequestVerificationToken',
        value: $('input[name="__RequestVerificationToken"]').val()
    }));
    
    // 提交表单实现跳转
    form.appendTo('body').submit();
});
</script>

控制器代码修改 #

把原来的[HttpGet]改成[HttpPost]，如果需要后续在视图或其他逻辑中使用Id，可以存入TempData：

[HttpPost]
public IActionResult SchoolDetails(string Id)
{
    // 把Id存入TempData，方便后续页面使用（可选，根据你的业务需求）
    TempData["SchoolId"] = Id;
    
    return View();
}

方案2：用TempData/Session预存Id（适合需要GET跳转的场景） #

如果必须用GET跳转页面，可以先通过AJAX把Id存入服务器的TempData，再跳转：

前端脚本 #

<script>
$(document).on('click', '.btndetail', function () {
    var id = $(this).data("id");
    
    // 先POST请求把Id存入服务器
    $.post('/Schools/StoreSchoolId', { 
        Id: id, 
        __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val() 
    }, function() {
        // 存储成功后跳转到详情页
        window.location.href = "/Schools/SchoolDetails";
    });
});
</script>

控制器新增存储方法 #

[HttpPost]
public IActionResult StoreSchoolId(string Id)
{
    TempData["SchoolId"] = Id;
    return Ok();
}

修改原详情页方法 #

改回[HttpGet]，从TempData中取出Id：

[HttpGet]
public IActionResult SchoolDetails()
{
    var schoolId = TempData["SchoolId"] as string;
    // 这里处理你的业务逻辑
    return View();
}

注意：TempData的数据只在下次请求有效，刷新页面后会丢失；如果需要持久化，可以改用Session（需要提前配置Session）。

方案3：优化路由参数（美化URL，仍可见Id但无参数名） #

如果只是不想看到Id=1234这种参数形式，可以配置路由让URL变成/Schools/SchoolDetails/1234：

配置路由 #

在你的Program.cs（或Startup.cs）中添加自定义路由：

app.MapControllerRoute(
    name: "schoolDetails",
    pattern: "Schools/SchoolDetails/{Id}",
    defaults: new { controller = "Schools", action = "SchoolDetails" }
);

修改前端脚本 #

<script>
$(document).on('click', '.btndetail', function () {
    var id = $(this).data("id");
    var url = "/Schools/SchoolDetails/" + id;
    window.location.href = url;
});
</script>

控制器代码保持不变 #

[HttpGet]
public IActionResult SchoolDetails(string Id)
{
    return View();
}

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