Question

I’m trying to pass a value to a Url.Action like so

     $('._select_change').change(function(n)
     {
         var param = n.target.value;

         $.get('@Url.Action("List", new { someid = param } )', function (data) {
             $('#changeArea').replaceWith(data);
         });

     });

if i set someid = ‘123’, then the value carries through fine. However when I replace with someid = param – i get a compiler error “CS0103: The name ‘param’ does not exist in the current context” …

how should i structure this method call?

thanks

Answer 1

how should i structure this method call?

Like this:

$('._select_change').change(function() {
    var param = $(this).val();
    $.get('@Url.Action("List")', { someid: param }, function (data) {
         $('#changeArea').replaceWith(data);
    });
});

Notice how I am using the second argument of the $.get() method to pass query string arguments to the AJAX call from the client.

This would pass the selected value of a dropdown to the List controller action taking a someid action argument:

public ActionResult List(string someid) 
{
    ...
}

So what you will see in the Net tab of your javascript debugging tool is the following AJAX request being sent to the server:

GET /somecontroller/List?someid=123

There’s one thing though that you should be careful with if you use this $.get() method. GET requests are usually cached by browsers. This means that if you send many requests to the same url like /list?someid=123 the browser could cache the result and only the first request will ever reach the server. But what if you want to server fresh data every time and you want to hit the server for each request. The recommended solution in this case is to use the $.ajax() method instead which allows you to disable the cache:

$('._select_change').change(function() {
    var param = $(this).val();
    $.ajax({
        url: '@Url.Action("List")',
        data: { someid: param },
        cache: false,
        success: function (data) { 
            $('#changeArea').replaceWith(data);
        }
    });
});

This will append a random query string parameter on each request to ensure that the result is not cached by the client browser.