Url.Action在JavaScript中生成本地化路由链接问题求助

问题原因分析 #

1. 硬编码链接不符合本地化规则：直接拼接字符串的方式没有利用ASP.NET的本地化路由系统，生成的URL（如/en/photos/photogallery/details/?seoTitle=...）不会匹配你配置的本地化路由模板（比如土耳其语下的fotograf-galeri-detay/{seoTitle}）。
2. @Url.Action引用JS变量报错：@Url.Action是服务器端Razor代码，在页面渲染阶段执行，此时客户端的_seoObj变量还未生成，服务器无法识别这个客户端变量，因此编译报错。

解决方案 #

核心思路是：先由服务器生成符合本地化规则的URL模板，再在客户端JS中替换模板里的占位符为实际数据。

1. 在页面中生成本地化URL模板

在页面的服务器端脚本区域（或页面头部），生成一个包含占位符的URL模板，确保它遵循当前文化的路由规则：

<script>
    // 服务器端生成本地化URL模板，{seoTitle}作为占位符
    const detailUrlTemplate = '@Url.Action("Details", "PhotoGallery", new { area = "", seoTitle = "{seoTitle}" })';
</script>

这个模板会根据当前请求的文化自动生成对应格式的URL：

• 土耳其语（tr）环境下：/fotograf-galeri-detay/{seoTitle}
• 英语（en）环境下：/photo-gallery-detail/{seoTitle}

2. 在JS遍历中替换占位符生成实际链接

修改你的JavaScript代码，用实际的SeoBaslik值替换模板中的占位符，同时用encodeURIComponent处理特殊字符避免URL错误：

$.each(data, function(i, item) {
    console.log(item);
    // 直接使用item的SeoBaslik，无需额外封装对象
    const seoTitle = item.SeoBaslik;
    // 替换模板占位符，生成符合本地化的URL
    const urlLink = detailUrlTemplate.replace("{seoTitle}", encodeURIComponent(seoTitle));
    
    html += '<div class="col-lg-4 col-sm-6 mb-2">\
              <a href="'+urlLink+'" class="BackgroundS">\
              <div class="ImageWrapper br10"><img src="/images/empty_news.png" style="background: url(' + item.ImageUrl +') no-repeat center center; background-size: cover;" class="img-fluid br10"></div>\
              </a>\
              </div>';
});

额外注意事项 #

• 确保当前页面的请求文化配置正确（比如通过路由前缀、Cookie或请求头设置），这样Url.Action才能生成对应文化的URL。
• 你的Details Action上的[Route("photo-gallery-detail/{seoTitle}")]是默认路由，本地化路由配置会在对应文化下覆盖这个默认路由，无需修改。

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