Passing dynamic javascript values using Url.action()

Question

Could anyone please tell how to pass dynamic values using Url.action().

Something Like,

var firstname="abc";
var username = "abcd";
location.href = '@Html.Raw(@Url.Action("Display", "Customer", new { uname = firstname ,name = username}))';

firstname, username is not getting reffered inside the Url.action() method.

How to pass these dynamic values using Url.action()?

Felipe Oriani · Accepted Answer · 2022-11-08T16:08:34.973

166

The @Url.Action() method is proccess on the server-side, so you cannot pass a client-side value to this function as a parameter. You can concat the client-side variables with the server-side url generated by this method, which is a string on the output. Try something like this:

let firstName = "John";
let userName = "Smith";
location.href = '@Url.Action("Display", "Customer")?uname=' + firstName + '&name=' + userName ;

The @Url.Action("Display", "Customer") is processed on the server-side and the rest of the string is processed on the client-side, concatenating the result of the server-side method with the client-side.

edited Nov 08 '22 at 16:08

answered Feb 27 '13 at 12:32

Felipe Oriani

37,948
19
131
194

I ended up adding an onclick event to a element which appended to the href attribute which was set using Url.Action – Matthew Lock Jul 14 '17 at 05:23
But what if without that parameter the path is different? – Andrew Sep 07 '17 at 20:45

score 11 · Answer 2 · answered Apr 24 '17 at 08:42

This answer might not be 100% relevant to the question. But it does address the problem. I found this simple way of achieving this requirement. Code goes below:

<a href="@Url.Action("Display", "Customer")?custId={{cust.Id}}"></a>

In the above example {{cust.Id}} is an AngularJS variable. However one can replace it with a JavaScript variable.

I haven't tried passing multiple variables using this method but I'm hopeful that also can be appended to the Url if required.

EVIL · Answer 3 · 2022-03-25T01:06:07.100

In my case it worked great just by doing the following:

The Controller:

[HttpPost]
public ActionResult DoSomething(int custNum)
{
    // Some magic code here...
}

Create the form with no action:

<form id="frmSomething" method="post">
    <div>
        <!-- Some magic html here... -->
    </div>
    <button id="btnSubmit" type="submit">Submit</button>
</form>

Set button click event to trigger submit after adding the action to the form:

var frmSomething= $("#frmSomething");
var btnSubmit= $("#btnSubmit");
var custNum = 100;

btnSubmit.click(function()
{
    frmSomething.attr("action", "/Home/DoSomething?custNum=" + custNum);

    btnSubmit.submit();
});

Hope this helps vatos!

Maybe it would be more future-proof if you could replace the string `/Home/DoSomething` with `@Url.Action("DoSomething", "TheController")`. That way if you rename your controller and/or action, your related url would still stay valid. — Mladen B., Jun 01 '21 at 16:25

score 1 · Answer 4 · answered Jun 14 '18 at 09:59

1

The easiest way is:

  onClick= 'location.href="/controller/action/"+paramterValue'

answered Jun 14 '18 at 09:59

Umar Farooq Awan

161
1
3
6

do you really need an onclick event? could you do the same thing with the form's `action` attribute... – Mladen B. Jun 01 '21 at 16:30

Passing dynamic javascript values using Url.action()

4 Answers4

The Controller:

Create the form with no action:

Set button click event to trigger submit after adding the action to the form:

Linked