AJAX, JSON, C#, and jQuery

So this is going to be a meaty post about the jQuery Ajax POST call with JSON objects and a C# method. As a .NET developer, this was key in developing web applications that were dynamic without page navigation. Many of these concepts can be translated into PHP development rather than C# but I haven't dealt with it much, though it will be something I'm looking into.

To start we need a situation... I want something that sends objects, manipulates objects, and returns objects, just so that we get the whole picture and you can see WHY we might want to do this. 

SITUATION: We have are retrieving a list of statuses per what database type a user selects. 

To start we have a DatabaseType enum in C# that will be loaded via the Ajax call. Here's that class:

 public enum DatabaseType
 {
      DBZero = 0,
      DBOne = 1,
      DBTwo = 2
 }

The nice thing about JSON objects is that they fit like a hand in a glove to many C# types as well as custom objects. So, lets create the Ajax call that will fit out "Database Type" selection into the enum, so we know which database we are pulling from.

Next let's take a look at the C# code. I use a repository to retrieve the statuses, but since that's not the focus of this blog, it's more like sudocode:

[HttpPost] // <-- Designates it's called via a POST method 
 public ActionResult GetStatuses(int databaseType)  
 {  
      SetDatabaseType(databaseType);  
      return Json(new { statuses = repo.GetStatuses().ToArray() });  
 }  

To start we use a function call that sets the database type (as unfortunately the variables do not stay even though the page hasn't changed), we then retrieve the statuses from the Repository, make it an array, and pass it back the page as a JSON.

In this example, I used an int in the parameters for this method, but a enum or special class could be used as well.

We then want to call this method from the page, when desired, so a function would be best:

 function GetStatuses()  
     {  
       $.ajax({  
         type: "POST",  
         url: "@Url.Action("GetStatuses")",  
         dataType: "json",  
         contentType: "application/json; charset=utf-8",  
         data: JSON.stringify( { databaseType: databaseType }),  
         success: function (result){   
           statuses = result.statuses;  
           $('#Statuses').empty();  
           for(var x = 0; x < statuses.length; x++)  
           {  
             $('#Statuses').append($('<option>').text(statuses[x].Name).val(statuses[x].Id));  
           }        
         },  
         error: function (error){  
           alert(error.responseText);  
         }  
       });  
     }  

Here we use jQuery's built in Ajax functionality to "POST" to the C# code. As you can see we specify the type as POST, the url as the Url to our method "GetStatuses", the datatype is JSON, and the data we send needs to be stringified into a JSON object. 

The second part is "success: " or what happens if it succeeds. In this example I empty a multiselect box, append the new options. As you can see, what you return is in the "result" object and that holds whatever you put into it. In this case, we put "statuses" into it, so to get them out we need to do "result.statuses".

The last piece is the error function, or what happens if it fails. For me, I just like a simple alert box, but the response text does contain HTML so some people like to replace the HTML of the body of the page with the information, but I think that's overkill.

Once again, if you have any questions, comments, or concerns, please post here or follow me on twitter @WebDevProblems.