MENU

Display JSON Data From Controller To View In ASP.NET MVC

Filed Under: , , , , , on
There are many ways to display data from controller to view and to  make easier to understand students as well as beginners I have decided to write series of articles on ways to display data from controller to view , hence in this first article of series we will learn how to display JSON (JavaScript Object Notation ) data from controller to view in ASP.NET MVC.
Let's start step by step by creating one simple ASP.NET MVC application.

Step 1 : Create MVC application
  1. "Start", then "All Programs" and select "Microsoft Visual Studio 2015".
  2. "File", then "New" and click "Project..." then select "ASP.NET Web Application Template", then provide the Project a name as you wish and click on OK. 
  3. Choose MVC empty application option and click on OK
Step 2 : Create Model Class
Right click on Model folder in the created MVC application ,give the class name Employee or as you wish and click on OK .
Employee.cs
public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string City { get; set; }
        public string  Address { get; set; }
    }
Step 3 : Add controller class
Right click on Controller folder in the created MVC application ,give the class name Home or as you 
and click on OK
HomeControlle.cs
public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
        return View();
        }
        [HttpGet]
        public JsonResult EmpDetails()
        {
        //Creating List
            List<Employee> ObjEmp = new List<Employee>()
            {
        //Adding records to list
        new Employee {Id=1,Name="Vithal Wadje",City="Latur",Address="Kabansangvi" },
        new Employee {Id=2,Name="Sudhir Wadje",City="Mumbai",Address="Kurla" }
            };
        //return list as Json
        return Json(ObjEmp, JsonRequestBehavior.AllowGet);
        }
    }
In the above controller class JsonResult method EmpDetails  we have added the records into the Generic list. and returning it as JSON  to avoid database query for same result.
To work with JQuery we need a following JQuery library
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
The preceding JQuery library file version may be different that is lower or higher
Step 4 : Add Partial view
Right click on Home folder inside the View folder in the created MVC application as

Give the name EmpDetails and click on Add button and write the following code.
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function () {
        //Call EmpDetails jsonResult Method
        $.getJSON("Home/EmpDetails",
        function (json) {
        var tr;
        //Append each row to html table
        for (var i = 0; i < json.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + json[i].Id + "</td>");
                tr.append("<td>" + json[i].Name + "</td>");
                tr.append("<td>" + json[i].City + "</td>");
                tr.append("<td>" + json[i].Address + "</td>");
                $('table').append(tr);
            }
        });
    });
</script>
<table class="table table-bordered table-condensed table-hover table-striped">
        <thead>
        <tr>
        <th>Id</th>
        <th>Name</th>
        <th>City</th>
        <th>Address</th>
        </tr>
        </thead>
        <tbody></tbody>
</table>

Step 5 : Call partial view EmpDetails in Main Index view
Now call the partial view EmpDetails in Main Index view as using following code
@{
    ViewBag.Title = "www.compilemode.com";
}
<div style="margin-top:20px">
@Html.Partial("EmpDetails");
</div>
Step 6 : Run the application


I hope from preceding examples , You have learned how to display JSON data from controller to view in ASP.NET MVC.
Summary
I hope this tutorial is useful for all readers. If you have any suggestion then please comment below to the article.

Post a Comment

www.CodeNirvana.in

Protected by Copyscape
Copyright © Compilemode