在MVC视图中向Url.Action追加JavaScript变量/参数的最佳方法

你的当前实现其实是很合理的，而且在大多数业务场景下都能稳定运行！不过咱们可以拆解下它的优缺点，再看看有没有更贴合不同需求的优化方向：

你的现有方案的优势 #

• 借助ASP.NET的@Url.Action()帮你处理路由规则、虚拟路径映射，避免了手动拼接URL时容易犯的拼写错误，尤其是当项目路由配置比较复杂的时候，这个方法能保证URL的正确性
• 把URL生成逻辑封装到独立的JS函数showDetails里，让Grid的列模板代码更简洁，而且这个函数还能在其他地方复用，比如其他Grid或者页面元素里

可优化的方向（根据场景选择） #

1. 直接在ClientTemplate内嵌URL生成逻辑（适合简单跳转场景） #

如果你的需求只是生成一个跳转链接，没有额外的JS逻辑要处理，可以省去单独的JS函数，直接在ClientTemplate里拼接URL：

columns.Bound(c => c.ItemId)
       .Title("Item #")
       .Width("150px")
       .Locked(true)
       .Lockable(false)
       .ClientTemplate("<a href='" + @Url.Action("Details", "Items") + "/#=ItemId#'>查看详情</a>");

或者更规范的路由参数传递方式（如果你的Action是通过路由参数接收itemId的）：

.ClientTemplate("<a href='" + @Url.Action("Details", "Items", new { itemId = "#=ItemId#" }) + "'>查看详情</a>");

这种方式的好处是代码更紧凑，减少了额外的JS函数定义，适合简单的单一场景。

2. 封装通用的URL管理（适合多场景复用） #

如果你的项目里有很多地方需要生成类似的业务URL，可以把所有路由基地址集中管理，避免重复写@Url.Action：
首先在页面头部定义全局的URL配置：

<script>
    // 集中管理所有业务页面的路由地址
    var AppRoutes = {
        ItemDetails: '@Url.Action("Details", "Items")'
    };
</script>

然后你的JS函数可以简化成：

function showDetails(itemId) {
    return `<a href='${AppRoutes.ItemDetails}/${itemId}'>查看详情</a>`;
}

这种方式的优势是后续如果路由规则变更（比如控制器名称修改），只需要修改全局的AppRoutes配置，不用到处找分散在JS函数里的URL生成代码，维护性更好。

3. 结合权限判断等复杂逻辑（你的原始方案更适合） #

如果你的showDetails函数里需要做额外的逻辑，比如根据用户权限决定是否显示链接、或者动态修改链接文本，那你的原始方案就是最优的——把复杂逻辑封装在JS函数里，模板只负责调用函数，代码结构更清晰。

总结 #

你的原始实现完全没问题，属于灵活且易维护的方案，尤其是在需要处理复杂逻辑的时候。如果是简单的跳转场景，内嵌URL的方式会更简洁。选择哪种方案，核心取决于你的业务场景复杂度和代码复用的需求。

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