Clever Geek Handbook

How to increase actionlink with route values ​​at runtime with JavaScript in ASP.NET MVC 5?

I have ActionLink.

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

I need to set routeValues ​​to null

because I don't know the value in compiletime. They are obtained from the selected value of some dropdown lists at runtime.

Hence, I am trying to increment route values ​​at runtime using JavaScript. I don't see any other choice I have.

I am using the CSS class menuLink

in ActionLink to catch the event.

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

     // ???
});

How do I add route values ​​to make the href correct?

I want the url to be something like this:

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

My focus is on the part /2/2

.

I tried this

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

But then I get a URL like this:

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

And it doesn't work with my routes. MapeRoute

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

I don't know if the problem is Foo = "0", Bar = "0"

.

Solution added. Thanks @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);
+3


source to share


2 answers


I'm not sure if this is the best way to do it, but I will provide you with my solution for this problem. The main idea is to create a link with all the required parameters and format href

with javascript, like string.Format

in C #.

  • Create a link:
@Html.ActionLink("Link", "action", "controller",
    new { Foo = "{0}", Bar = "{1}"}, htmlAttributes: new { @class = "menuLink" })

The helper will generate the correct URL, which, according to your route configuration, will look like this:

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


  1. Write a function format

    .

You can check how to implement it here . If you are using jQuery validation plugin you can use the built-in function.

  1. Format href

    in your javascript:
$(".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);
});

Not concatenating route parameters in href like this href +'/'+ routeValue1 +'/'+routeValue2

one will result in a 404 when changing the route configuration url. You should always generate urls using url helpers and avoid javascript encoding them.

+2


source


You can change the href attribute of the anchor tag dynamically as shown below.



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

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


source






More articles:


All Articles