Home / AJAX

HOW TO Call ASP NET MVC Controller Actions

RSS
Modified on 2009/12/04 17:59 by Stephen Walther Categorized as Uncategorized
ASP.NET MVC provides a framework for building applications that follow the popular Model-View-Controller (MVC) pattern. The Model represents the data used in the application, the Controller is responsible for actions that occur and the View represents the user interface that the end user interacts with in the application. The ASP.NET Ajax Library can play an important role in ASP.NET MVC applications when a page needs to be Ajax-enabled. This tutorial will discuss how to return JSON (JavaScript Object Notation) results from a Controller action and process them within a View page. Steps discussed include:

  1. Creating an ASP.NET MVC Project
  2. Creating a JsonResult Controller Action
  3. Calling a Controller Action and Binding Results

Step 1: Creating an ASP.NET MVC Project

The ASP.NET MVC framework is not included with Visual Studio 2008 by default but can be downloaded and installed from http://www.asp.net/mvc. Visual Studio 2010 comes with ASP.NET MVC out of the box. To create a new ASP.NET MVC project select File | New Project and select ASP.NET MVC Web Application from the templates. After creating the project you will see several folders in the project including a Controllers, Models and Views folder.

Step 2: Creating a JsonResult Controller Action

Expand the Models folder and add a new class into it named Customer that has the following properties:

public class Customer
{
    public int CustomerID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
}

Expand the Controllers folder and open the class named HomeController.cs in the code editor window. Notice that it has several actions defined by default. Import the namespace assigned to the Customer class with a using or Imports statement and then add the following action to return a List<Customer>.

public JsonResult GetCustomers()
{
    List&lt;Customer&gt; custs = new List&lt;Customer&gt;
    {
        new Customer
        {
            CustomerID = 1,
            FirstName = "John",
            LastName = "Doe",
            Age = 50
        },
        new Customer 
        {
            CustomerID = 2,
            FirstName = "Jane",
            LastName = "Doe",
            Age = 47                
        }
    };
    return Json(custs);
}


ASP.NET MVC Controller actions often return an ActionResult type. However, because this action returns JSON data a JsonResult return type is defined. Once the List<Customer> object is created it is converted into JSON data by using the built-in Json method.

Step 3: Calling a Controller Action and Binding Results

Expand the Views/Home folder and open the Index.aspx file in the code editor window. To use functionality in the ASP.NET Script Library the Script Loader can be used to load the DataView object script dependencies and the MicrosoftAjaxWebServices.js script. Add the following into the Content control that has a ContentPlaceHolderID value of "MainContent":

<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript"></script>
<script type="text/javascript">
    Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function() {
        var dataView = Sys.create.dataView('#CustomersTemplate',
            {
                dataProvider: "/Home/GetCustomers",
                autoFetch: true
            });
    });
</script>


It's important to note that scripts used multiple times in an ASP.NET MVC application can be loaded in the application's Master Page to simplify maintenance as opposed to loading them in a specific View.

Now that the DataView component is created the template that it binds to needs to be created. Add the following template code below the closing </script> element:

<div id="CustomersTemplate" class="sys-template">
    {{FirstName}} {{LastName}}
    <br />
</div>


When the ASP.NET MVC's application is run the two customer names will now appear on the homepage.