Wednesday, 12 June 2013

AJAX calls to ASP.NET MVC action methods using jQuery



It is best practice to use JQuery (or similar JavaScript library) for your web development. These libraries provide a powerful JavaScript API that allows you to interact with the DOM. There are many differences between browsers and even between versions of the same browser. A well designed library, such as JQuery, will take care of these differences for you. You are then allowed to focus on coding your features and not on making sure your code is going to work in IE, Chrome, Safari, and Firefox.

Call an Action Method That Returns String Content:
Imagine you have the following action method on a Test controller.
public string GetDateTimeString()
{
return DateTime.Now.ToString();
}

Note that the above method returns a string. To call this action method using jQuery, you can use the jQuery ‘get’ function as shown below:
var url = "/Monitor/Test/GetDateTimeString";
$.get(url, null, function(data) {
    $("#getDateTimeString").html(data);
});

The jQuery ‘get’ method is a helper method that generates an AJAX GET request. The first parameter is the URL and the third is the callback function when the response is received. The callback function takes one parameter ‘data’ that holds the string content.

Call an Action Method That Returns a String but Takes Parameters:
To set the action method parameter we will use the second parameter of the jQuery ‘get’ function. Imagine we have this action method on a Test controller:
public string ReverseTheString(string input)
{
char[] arr = input.ToCharArray();
       Array.Reverse(arr);
       return new string(arr);
}
Use the following JavaScript to call this method using AJAX:
var url = "/Monitor/Test/ReverseTheString";
var stringToReverse = "Ravi Kumar Gupta";
$.get(url, { input: stringToReverse }, function(data) {
    $("#reverseTheString").html(data);
});
Notice that the second parameter to the ‘get’ function now contains a list of key / value pairs. This example supplies one parameter, but can be extended to provide multiple parameters.

Call an Action Method that Returns JSON and Takes Parameters:
The action methods above returned simple strings. Now imagine you want to dynamically fetch more complex data. This is typically formatted in JSON. For example, imagine we want to fetch contact information from the server. More specifically let’s say you have the following ContactInfo class and GetContactInfo action method:
public class ContactInfo
{
       public string FirstName { get; set; }
       public string LastName { get; set; }
       public string State { get; set; }
       public int Age { get; set; }
}

public JsonResult GetContactInfo(int personId)
{
// Use personId to fetch info from repository.
       //
       // Fake it here.
       ContactInfo contactInfo = new ContactInfo
              {
                     FirstName = "Bob",
                     LastName = "Cravens",
                     State = "Wisconsin",
                     Age = new 43
              };
       return Json(contactInfo);
}

Notice the action method is now returning a ‘JsonResult’. This action method can be called using the following JavaScript:
var url = "/Monitor/Test/GetContactInfo";
var id = 123;
$.getJSON(url, { personId: id }, function(data) {
    $("#name").html(data.FirstName + " " + data.LastName);
       $("#state").html(data.State);
       $("#age").html(data.Age);
});


Post Data to An Action Method:
Imagine you have a situation where you want to HTTP POST instead of GET data. For example, suppose you have data that you want to submit via AJAX. Assume for instance you have the following action method:
[AcceptVerbs(HttpVerbs.Post)]
public string RegisterUser(string firstName, string lastName)
{
// Use the parameters provided to register a new user.
       return firstName + " " + lastName + " was successfully registered.";
}

This action method has attributes that only accept HTTP POST requests. To call this method using AJAX we can use the jQuery ‘post’ function as follows:
var Url = "/Monitor/Test/RegisterUser";
var First = "Ravi";
var Last = "Gupta";
$.post(Url, { firstName: First, lastName: Last }, function(data) {
    $("#registerUser").html(data);
});
Notice the ‘post’ function and the ‘get’ function take the same parameters. This is an example of an action method that requires two parameters and returns a string result.

Post Form Data:
Let’s say you have the following form for submitting new contact information:
<form id="myForm" action="/Monitor/Test/FormPost" method="post">
    <div>First Name: <input name="FirstName" type="text" value="Bob" /></div>
    <div>Last Name: <input name="LastName" type="text" value="Cravens" /></div>
    <div>Age: <input name="Age" type="text" value="43" /></div>
    <input type="submit" value="Save Contact" />
    <div id="postResult">?</div>
</form>

This form calls the ‘FormPost’ action method on the ‘Test’ controller for the ‘Monitor’ application. The following is the action method called when the form is submitted:
[AcceptVerbs(HttpVerbs.Post)]
public string FormPost(ContactInfo contactInfo)
{
return contactInfo.FirstName + " " + contactInfo.LastName + " (" + contactInfo.Age + ") has been saved.";
}

Notice the action method returns a string result. Now assume you want to submit this from using AJAX.  This is easily done using the following JavaScript:

var f = $("#myForm");
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function(data) {
    $("#postResult").html(data);
});

This JavaScript shows the power of jQuery. With one ‘serialize’ call all the form’s input data is collected and ready to be sent.
Notice the above action method takes a ‘ContactInfo’ (same as the one introduced earlier) object. Now here in this code are we creating this type of object. So who is creating this object? This is the power of the ASP.NET MVC model binder in action. As long as the names (‘FirstName’, ‘LastName’, ‘Age’ in this example) of the input elements match the corresponding property names of the object the model binder will have no problem.



Load an MVC Partial View:
The server is often times the best place to generate your HTML content. Adding dynamically generated content based upon the current application state is often necessary. Suppose you have the following action method on your MVC Test controller:
public ActionResult MyPartialView(string info)
{
ViewData["info"] = info;
       return View();
}

This action method is simplistic. It stored some ‘info’ data into the ViewData dictionary and then returns the following partial view.
<span>
    Your Info: @Html.Encode(ViewData["info"])
</span>

Again, this is a simple partial view that is dynamically generated to display your input info. This partial view can be loaded into the DOM using the jQuery ‘load’ function as follows:
var url = "/Monitor/Test/MyPartialView";
var info = "This is my information."
$("#partialView").load(url, { info: info });

Notice the ‘load’ method is a function attached to every jQuery element that is generated with a selector. The above method replaces the HTML of the element with ID of ‘partialView’ with the dynamically generated HTML from the MVC partial view.

1 comment: