如何使用 ASP.NET MVC 5 中的 JavaScript 在运行时使用路由值增加 actionlink？

Posted 2023-03-27

【中文标题】如何使用 ASP.NET MVC 5 中的 JavaScript 在运行时使用路由值增加 actionlink？

【英文标题】：How to augment actionlink with route values at runtime with JavaScript in ASP.NET MVC 5?

【发布时间】：2015-09-02 16:11:58

【问题描述】：

我有这个 ActionLink。

@html.ActionLink("Link", "action", "controller", null, htmlAttributes: new @class = "menuLink")

我必须将 routeValues 设置为 null，因为我不知道编译时的值。它们是在运行时从某些下拉列表的选定值中收到的。

因此，我试图在运行时使用 javascript 增加路由值。我看不出我还有什么其他选择。

我在 ActionLink 上使用 CSS 类 menuLink 来捕捉事件。

$(".menuLink").click(function () 
    var $self = $(this),
        routeValue1 = getFromDropdown1(),
        routeValue2 = getFromDropdown2(),
        href = $self.attr("href");

     // ???
);

如何添加路由值以使 href 正确？

我希望 URL 是这样的：

http://localhost/mySite/controller/action/2/2

我的重点是/2/2 部分..

我试过了

$self.attr("foo", routeValue1);
$self.attr("bar", routeValue2);

然后我得到一个这样的 URL：

http://localhost/mySite/controller/action?foo=2&bar=2

它不适用于我的 routes.MapeRoute

routes.MapRoute(
    name: "Authenticated",
    url: "controller/action/foo/bar",
    defaults: new  controller = "Home", action = "WelcomePage", Foo = "0", Bar = "0" 
);

我不知道Foo = "0", Bar = "0" 是不是问题所在。

已添加解决方案。感谢@Zabavsky

if (!String.format) 
    String.format = function (format) 
        var args = Array.prototype.slice.call(arguments, 1);
        return format.replace(/(\d+)/g, function (match, number) 
            return typeof args[number] != 'undefined'
                ? args[number]
                : match
            ;
        );
    ;


var href = $self.attr("href");
var hrefDecoded = decodeURIComponent(href);
var hrefFormatted = String.format(hrefDecoded, 2, 1); // 2 and 1 test only..
$self.attr('href', hrefFormatted);

【参考方案1】：

我不确定这是不是最好的方法，但我会为您提供解决此问题的方法。主要思想是生成包含所有必需参数的链接，并使用javascript格式化href，如c#中的string.Format。

生成链接：

@Html.ActionLink("Link", "action", "controller",
    new  Foo = "0", Bar = "1", htmlAttributes: new  @class = "menuLink" )

helper 将生成正确的 url，根据您的路由配置，它将如下所示：

<a href="http://website.com/controller/action/0/1" class="menuLink">Link</a>

编写format函数。

您可以查看如何实现一个here。如果您使用 jQuery 验证插件，您可以使用内置的 format function。

在您的 javascript 中格式化 href 属性：

$(".menuLink").click(function () 
    var routeValue1 = getFromDropdown1(),
        routeValue2 = getFromDropdown2(),
        url = decodeURIComponent(this.href);

    // 0 and 1 will be replaced with routeValue1 and routeValue1
    this.href = url.format(routeValue1, routeValue2);
);

不要像href +'/'+ routeValue1 +'/'+routeValue2这样将路由参数连接到href，如果您更改路由配置，该url将导致404。您应该始终使用 Url 助手生成 url，并避免在 javascript 代码中对它们进行编码。

【讨论】：

这就是我想要完成的。以正确的方式使用帮助程序，并尽可能少使用 javascript。我喜欢您真正利用格式方法的解决方案。

我是否需要首先使用方法格式来扩充 String.prototype 才能使其正常工作，像这样？你已经有了吗？ ***.com/questions/610406/…

你可以用任何你想要的方式实现它，我只是给你的想法。

我只是想了解我是否已经拥有format 或需要对此做些什么。

@radbyx，是的，我忘了你必须先解码href，然后才能使用decodeURIComponent 函数对其进行格式化。检查我的编辑。

【参考方案2】：

您可以像下面这样动态更改锚标签的 href 属性。

$(".menuLink").click(function () 
    var $self = $(this),
        routeValue1 = getFromDropdown1(),
        routeValue2 = getFromDropdown2(),
        href = $self.attr("href"),
        editedHref = href.split('?')[0];

    $self.attr('href', editedHref+'/'+ routeValue1  +'/'+routeValue2 );
);

【讨论】：

似乎不起作用我得到localhost/mysite/controller/action?foo=2&bar=2/2/2