Simple jQuery getJSON Example in ASP.NET MVC

In this post, I will create a very basic and simple example demonstrating jQuery's getJSON method using ASP.NET MVC.

First up, I create an empty MVC project with one Controller. The code for this controller is shown below. For simplicity, the data model is also stored here and we create the data on fly. In a production application, this will be separated using multiple layers and the data, of course, would come from the database.

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetJsonData()
        {
            var persons = new List<Person>
                              {
                                  new Person{Id = 1, FirstName = "F1", 
                                      LastName = "L1", 
                                      Addresses = new List<Address>
                                                      {
                                                          new Address{Line1 = "LaneA"},
                                                          new Address{Line1 = "LaneB"}
                                                      }},
                                                                                                        
                                  new Person{Id = 2, FirstName = "F2", 
                                      LastName = "L2", 
                                      Addresses = new List<Address>
                                                      {
                                                          new Address{Line1 = "LaneC"},
                                                          new Address{Line1 = "LaneD"}
                                                      }}};

            return Json(persons, JsonRequestBehavior.AllowGet);
        }
    }

    public class Person
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }

        public List<Address> Addresses { get; set; }
    }

    public class Address
    {
        public string Line1 { get; set; }
        public string Line2 { get; set; }
        public string ZipCode { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Country { get; set; }
    }

This controller has just 2 actions. The Index action has a view associated with it and that view contains a button which will fire a JSON request. That request would be handled by the GetJsonData action method. As you can see, our data model is pretty simple and it contains a list of persons and each person can have multiple addresses.
The Index view contains just a button and an empty div tag in the beginning. The javascript code block contains the click handler for this button. When this button is clicked, we use the getJSON method to call the GetJsonData action. Once this data is returned we use the .each() jQuery method to loop through each person and then through each address and append some of their properties to the div tag. Code for Index view and the output when we click on the button is shown below.

<input id="btnGetPersons" type="button" value="Get Persons" />
<div>
    <div id="ajaxDiv">
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#btnGetPersons').click(function () {
            $.getJSON("/Home/GetJsonData", null, function (data) {
                var div = $('#ajaxDiv');
                div.html("<br/> " + "Persons received from server: " + "<br/>");
                $.each(data, function (i, item) {
                    printPerson(div, item);
                });
            });
        });
    });

    function printPerson(div, item) {
        div.append("<br/>" + "FName: " + item.FirstName + ", LName: " + item.LastName);
        $.each(item.Addresses, function (i, addr) {
            printAddress(div, addr);
        });
    }

    function printAddress(div, item) {
        div.append("<br/>" + "   " + "Line1: " + item.Line1);
    }
</script>

The output looks like:

In the getJSON method we can pass parameters as well. For ex, if we had to pass the number of persons to retrieve, we could have passed something like {count:"5"} instead of null and then in the action method we could have changed the GetJsonData() method to GetJsonData(int count).