JS通过@Url.Action传参到控制器报错、参数为null问题

两个异常的核心原因是混淆了服务端Razor渲染和客户端JS的执行顺序，且参数格式不符合MVC模型绑定规则：

• 第一种写法报不存在data：@Url.Action是服务端执行的C#代码，在页面返回到浏览器之前就已经渲染完成，此时客户端定义的JS变量data还未生成，服务端C#上下文找不到该变量，直接抛出错误。
• 第二种写法参数为null：直接将JS对象拼接在URL后时，JS会默认把普通对象转为字符串[object Object]，并不是你需要传递的Id值；同时参数名、路由格式没有匹配MVC绑定规则，控制器无法识别传入值，就会得到null。

根据实际传参需求选择对应写法即可：

方案1：仅传递Id值（推荐，适配GET请求传简单参数场景） #

如果Show方法只需要获取目标记录的Id，直接拼接查询字符串，保证参数名和控制器入参名一致即可：

const targetId = e.row.key.Id;
// 服务端先渲染出/Calculations/Show基础地址，客户端再拼接编码后的参数
window.location.href = '@Url.Action("Show", "Calculations")' + `?data=${encodeURIComponent(targetId)}`;

如果你使用MVC默认路由规则{controller}/{action}/{id}，也可以直接把参数放在路由段中，需要同步修改控制器参数名为id：
控制器代码调整：

[HttpGet]
public async Task<ActionResult> Show(string id)

对应JS代码调整：

const targetId = e.row.key.Id;
window.location.href = '@Url.Action("Show", "Calculations")' + `/${encodeURIComponent(targetId)}`;

方案2：需要传递多字段复杂对象 #

GET请求本身不适合传递复杂结构数据，如果确实要传多个字段，可以将对象序列化为JSON字符串传递，控制器端接收后反序列化即可：
JS端代码：

const sendData = {
  Id: e.row.key.Id
  // 后续新增字段直接在对象中补充即可
};
window.location.href = '@Url.Action("Show", "Calculations")' + `?data=${encodeURIComponent(JSON.stringify(sendData))}`;

控制器端接收逻辑：

[HttpGet]
public async Task<ActionResult> Show(string data)
{
  // 用System.Text.Json或Newtonsoft.Json反序列化即可
  var param = JsonSerializer.Deserialize<YourDataModel>(data);
  // 执行业务逻辑
}

• 所有拼接在URL中的参数必须用encodeURIComponent转义，避免特殊字符（空格、&、?等）破坏URL结构导致传参失败。
• 不要在@开头的Razor服务端代码块中直接引用客户端JS变量，两者运行环境完全隔离：Razor代码在服务端生成HTML阶段就执行完毕，JS是HTML加载到用户浏览器后才运行，两个阶段差了一次完整网络请求，无法直接互相访问变量。

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