使用 ASP.NET MVC Url.Action 在 JQuery 中生成链接

Question

我正在生成这样的链接列表：

$('#latestNews').append('<li><a href="<%= Url.Action("Details", "Article") %>/' + key + '">' + val + '</a></li>');

在索引页面上的链接看起来像：

<a href="/En/Article/Details/6">Title</a>

但是，在 /En/Article/Details/6 页面上 - 生成的链接看起来像：

<a href="/En/Article/Details/6/6">Title</a>

我试过$('#latestNews').append('<li><a href="<%= Url.Action("Details", "Article") %>?id=' + key + '">' + val + '</a></li>');它工作正常，但缓存不起作用。

我的控制器代码：

[OutputCache(Duration = Int32.MaxValue, VaryByParam = "id,language", SqlDependency = "database:Articles")] //Articles will be added rarely so i think it'll be nice to cache them
public ActionResult Details(string id, string language)
{..}

我的路线：

routes.MapRoute(
                "Default", 
                "{language}/{controller}/{action}/{id}",
                new { language = "En", controller = "Home", action = "Index", id = UrlParameter.Optional } 
            );

那么如何更好的生成Url呢？

更新：

 $.post('<%= Url.Action("GetLatest", "News") %>', function (data) {               
                $.each(data, function (key, val) {
                    $('#latestNews').append('<li><%= Url.ActionLink(val, "Details", "Article", new { id = key }, null) %></li>');                    
                });
                $('#news').show();
            }, "json");

Answer 1

您的 key 和 val 变量在 JavaScript 中，因此无法与 Url Helper 一起使用。您可以将脚本更改为如下所示：

编辑：修复错误 - 将 {id = null} 更改为 { id = String.Empty }

 $.post('<%= Url.Action("GetLatest", "News") %>', function (data) {               
                $.each(data, function (key, val) {
                    $('#latestNews').append('<li><a href="<%= Url.Action("Details", "Article", new { id = String.Empty}) %>/' + key +'">' + val + '</a></li>');                    
                });
                $('#news').show();
            }, "json");

因此，MVC Url.Action() 方法只是为您提供了 url 的第一部分。然后jQuery会将key添加到url的末尾，并在运行时添加val作为锚点的文本。

我认为这是无需过多重构代码的最简单方法。

Answer 2

生成链接的更好方法是将 id 直接传递给 Action 方法（而不是手动附加）。更好的是使用 ActionLink 而不是 Action 方法：

$('#latestNews').append('<li><%= Url.ActionLink(val, "Details", "Article", new { Id = key }, null) %></li>');