Calling ASP.NET MVC actions using JQuery AJAX

Waqas Anwar
04 June 2015
13214 Views

JQuery is one of the most common libraries used in web development today and it has been used very frequently by ASP.NET MVC developers for not only enhance the user experience but also to provide dynamic contents to their web application users using different type of AJAX calls supported by JQuery. JQuery provides several methods such as get, getJSON, load, post, ajax which can be used to call different types of ASP.NET MVC controller’s actions. In this tutorial, I will show you how you can use JQuery get method to call ASP.NET MVC actions.

Getting Started

Using jQuery with the ASP.NET MVC is very easy because its latest version ships with ASP.NET MVC. To use jQuery you just have to include the following script tag either in the <head> section of the Layout.master page or at the bottom before the closing </body> element for faster page loading.
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>" type="text/javascript"></script>
This will load the jQuery library from the content folder and make it available on the page.


Scenario 1: Calling an action method that returns string content

Let’s assume that you have an action that returns string content to views as follows:
public class HomeController : Controller
{
   public string GetDateTimeString()
   {
      return DateTime.Now.ToString();
   }
}

To call this action method using jQuery, you can use the jQuery ‘get’ function as shown below:
var url = "/Home/GetDateTimeString";
$.get(url, null, function(response) {
   $("#getDateTimeString").html(response);
});

Get Date using JQuery get method
The jQuery ‘get’ method is a helper method that generates an AJAX GET request. The first parameter is the URL of the action method, the second parameter can be used to pass additional parameters to the action method and the third is the callback function needed to be called when the response is received from the action method. The callback function takes one parameter ‘’response’ that holds the string content. The following is a screen shot of the resulting data:


Scenario 2: Calling an action method that takes parameters and returns string content

This is almost the same scenario as the previous one, except that this time the action method expects a parameter in request. To pass the action method parameters we can use the second parameter of the jQuery ‘get’ function.
public string LowerCaseString(string input)
{
   return input.ToLower();
}

You can use the following JavaScript code to call this action method from JQuery get method:
var url = "/Home/LowerCaseString";
$.get(url, { input: "MAKE THIS TEXT LOWERCASE" }, function(response) {
   $("#getLowerCaseString").html(response);
});

Get Lower case string
Scenario 3: Calling an action method that takes parameters and returns JSON

So far we are playing with simple strings, Now imagine you want to dynamically fetch more complex data from server and the data is formatted in JSON. For example, imagine we want to fetch student information from the server. More specifically let’s say you have the following StudentInfo class and GetStudentInfo action method:

public class StudentInfo
{
   public string FirstName { get; set; }
   public string LastName { get; set; }
   public int Age { get; set; }
   public int Fee { get; set; }
}

public JsonResult GetStudentInfo(int studentId)
{
   StudentInfo contactInfo = new StudentInfo
   {
      FirstName = "Bob",
      LastName = "Cravens",
      Fee = 2000,
      Age = 23
   };
   return Json(contactInfo, JsonRequestBehavior.AllowGet);
}

Notice the action method is now returning a ‘JsonResult’. This action method can be called using the following JavaScript:

var url = "/Home/GetStudentInfo";
var id = 123;
$.getJSON(url, { studentId: id }, function(data) {
   $("#name").html(data.FirstName + " " + data.LastName);
   $("#fee").html(data.Fee);
   $("#age").html(data.Age);
});

You can view the AJAX call response coming in JSON using the browser developer tools. For example, the Google Chrome browser is showing the following JSON coming from server.

JSON data from server
Notice the response data now formatted in JSON. The returned data can be placed inside any html element such as span as shown below:

<h3>Student Information</h3>
<table>
   <tr>
      <td>Name</td>
      <td><span id="name"></span></td>
   </tr>
   <tr>
      <td>Fee</td>
      <td><span id="fee"></span></td>
   </tr>
   <tr>
      <td>Age</td>
      <td><span id="age"></span></td>
   </tr>
</table>


The following will be the output:

JSON data from server