How to pass multiple arguments using JQuery.Ajax in ASP.NET MVC

Question

Hi guys i'm new to JSon and not too sure how do i pass the data around. I am using ASP.NET MVC as my development platform.

In The View:

 $(document).ready(function() {
    $("select#Colors").change(function() {
       var photoCategory = $("#Colors > option:selected").attr("value"); // 1st parameter
       var userID = $(".userID").attr("value"); // 2nd parameter         
       $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: "/FindPhotos/" + photoCategory ,
            data: "{}",
            dataType: "json",

            success: function(data) {
            $('#ProductsDiv > div').remove(); 
                if (data.length > 0) {
                    var options = ''; 
                } .......
       });
    });
});

In Global.asax:

routes.MapRoute(
       "FindPhotos",
       "FindPhotos/{category}",
        new { controller = "Clinical", action = "FindPhotosByCategory", category = "" }
       );

So everything works fine this way since i'm only passing one parameter, 'photoCategory', in the $.ajax url. My goal here now is to pass a 2nd parameter, which is the userID, so i can use them both in the controller method below.

In The Controller:

 public JsonResult FindPhotosByCategory(string category, string userID) {

        List<PhotoSet> photoset = Repository.GetPhotoSetByUserID(userID);

        return new JsonResult
        {
             Data = (from p in photoset 
                     where p.PhotoCategory == category
                     select p).ToArray<PhotoSet>()
        };
    }

Does anyone know how to write the $.ajax() method so i can pass in the 2 parameters to the controller? thanks!

Answer 1

Depends on how you want to pass it. You're doing a GET but your route won't support a userId as a route parameter so you could pass it on the query string. The URL would be /FindPhotos/lolcats?UserId=123.

That said, are you wanting to let the person pick the user or are you going to use the user id of the currently logged in user. If it's the latter I'd argue that you just grab that from the controller and keep the route clean.

In the spirit of keeping the route clean, I'd actually change the route to be something like the following:

routes.MapRoute( 
       "FindPhotos", 
       "FindPhotos/{category}/{userId}", 
        new { controller = "Clinical", action = "FindPhotosByCategory", category = "", userId=UrlParameter.Optional } 
       ); 

This would give you the option of making userId optional and then filtering based on whether or not it's supplied. Your ajax call then becomes:

   $.ajax({ 
        type: "GET", 
        contentType: "application/json; charset=utf-8", 
        url: "/FindPhotos/" + photoCategory + "/" + userId , 
        data: "{}", 
        dataType: "json", 

In the end, it has nothing to do with JSON and everything to do with how you invoke the URL. Again, this is GET so you can just pass it on the URL and be fine.

On a side note -- and as I'm sure you are aware -- I'd try to avoid putting actual user ids into the markup or anywhere else for that matter for security purposes. If you have to do that, make sure you secure access somehow within the business logic/data access portions of your code.

Answer 2

I think the problem is you are trying to pass 2 args in you control method (category, UserId), but in your routing you are only accepting 1, which is category.

either change your routing to

routes.MapRoute(
       "FindPhotos",
       "FindPhotos/{category}/{userId}",
        new { controller = "Clinical", action = "FindPhotosByCategory", category = "", userId="" }
       );

or change your control method to

public JsonResult FindPhotosByCategory(string category) {
//pass your userid from code behinde
....
}

Answer 3

you can send as much data as u want in data parameter of $.ajax like

$.ajax({
type: "GET", 
        contentType: "application/json; charset=utf-8", 
        url: "/FindPhotos/" + photoCategory, 
        data: {UserID = "34", UserName = "George", Key = "Value"}, 
        dataType: "json"

});

all these values will be appended to the query string not as route value. if u want route values then yes u have to write a matching route for that.