Passing dynamic javascript values using Url.action()

JavascriptC#asp.netasp.net Mvcasp.net Core

Javascript Problem Overview


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()?

Javascript Solutions


Solution 1 - Javascript

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:

var firstname = "abc";
var username = "abcd";
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.

Solution 2 - Javascript

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.

Solution 3 - Javascript

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!

Solution 4 - Javascript

The easiest way is:

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKokilaView Question on Stackoverflow
Solution 1 - JavascriptFelipe OrianiView Answer on Stackoverflow
Solution 2 - JavascriptDashView Answer on Stackoverflow
Solution 3 - JavascriptEVILView Answer on Stackoverflow
Solution 4 - JavascriptUmar Farooq AwanView Answer on Stackoverflow