Passing Javascript variable to route value in MVC3

Question

I would like to pass a javascript variable in a @Url.Action method as a route parameter.

I like to pass the screenmode javascript variable as a route parameter to my action method.

I have a view model with ScreenMode enum property and based on it i should call a action in Ajax. I also need to pass a javascript variable as a parameter for route.

This is what i tried and got compilation error.

The name 'screenMode' does not exist in the current context

  $("#role-detail-form").submit(function (e) {

    if ($(this).valid()) {
    var screenMode = 0;
    @{
     if (Model.ScreenMode == UI.ViewModel.ScreenMode.New)
     {
       <text> 
       screenMode =2; 
       </text>
     }
    }
    $.post('@Url.Action("SaveRoleDetail", new { mode=screenMode})', 
            $(this).serialize(), function (data) {
                $("#role-detail").html(data);
                $.validator.unobtrusive.parse($("#role-detail"));
            });
        }
        e.preventDefault();
    });

My Action is

 public ActionResult SaveRoleDetail(RoleModel viewModel, ScreenMode screenMode)
    {
    }

Mathew Thompson · Accepted Answer · 2013-01-09 11:13:59Z

7

You'd have to split that out and build the query string yourself, in order to incorporate the Javascript variable.

Something like this is what you need:

$.post('@(Url.Action("SaveRoleDetail"))?screenMode=' + screenMode)

EDIT: Although probably best practice, you should store the ScreenMode variable in your Model, then put a HiddenFor in your view for it. Then, whenever you change the value in Javascript, simply update the value of the hidden input, that way your action method only needs to take the view model as a parameter. If you are posting the form in JavaScript and you can call $("#form").serialize() to send all the data back within your post call.

edited Jan 9, 2013 at 11:13

answered Jan 9, 2013 at 10:48

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Murali Murugesan Over a year ago

Can i pass this query string in post ajax method? how the url will look like? screenMode will be part of post parameters or in query string?

Mathew Thompson Over a year ago

Better still, you could put the ScreenMode in your model, have a hiddenFor in the view, then if you want to change it's value in Javascript, you can simply update the value of the hidden input, then when all is done, just do $("#form").serialize();, that way your action method need only take the view model as a parameter :)

Murali Murugesan Over a year ago

Yes you are correct. I now use hidden field and update with Javascript. Can you please add this Hidden Field information as part of your answer. So it will be easily visible and helpful for others too :)

Darren Over a year ago

@mattytommo - back on the stack ;)

Mathew Thompson Over a year ago

@DarrenDavies Can't keep away ;). Looks like you never left? :D

VahidN · Accepted Answer · 2014-07-30 06:34:27Z

5

Also it's possible to create a place holder and then replace it:

var url = '@Url.Action("GetOrderDetails", "Home", new { id = "js-id" })'
          .replace("js-id", encodeURIComponent(rowId));

answered Jul 30, 2014 at 6:34

VahidN

19.4k8 gold badges80 silver badges124 bronze badges

1 Comment

Alireza Over a year ago

I prefer this approach

lopezbertoni · Accepted Answer · 2013-01-09 11:56:41Z

0

If you use T4MVC and jQuery, you can call the ActionResult doing the following:

In the controller:

public ActionResult SaveRoleDetail(RoleModel viewModel, ScreenMode screenMode)
{
}

In the view:

    $.post("@Url.Action(MVC.Home.SaveRoleDetail())", { viewModel: param1, screenMode: param2) }, function (data) {

        //Do Work

    });

answered Jan 9, 2013 at 11:56

lopezbertoni

3,6413 gold badges41 silver badges54 bronze badges

2 Comments

Murali Murugesan Over a year ago

It will be helpful if you add a link for T4MVC and jQuery. So people can easily navigate from here. Thanks

lopezbertoni Over a year ago

Sorry, I missed the links. Both are available as Nuget Packages. T4MVc can be found here (t4mvc.codeplex.com) and jQuery here (jquery.com) Hope this helps.

Shunya · Accepted Answer · 2021-12-11 14:47:36Z

0

Access your route values (perhaps in html.HiddenFor). Values from JavaScript and Build your URL without @Url.Action. Use the URL to post.

edited Dec 11, 2021 at 14:47

Shunya

2,4894 gold badges20 silver badges36 bronze badges

answered Dec 11, 2021 at 8:34

Peterson Kabugi

1

Collectives™ on Stack Overflow

Passing Javascript variable to route value in MVC3

4 Answers 4

5 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related