Background
Many times there is a need to work with JSON (JavaScript object Notation) in ASP.NET MVC with the help of jQuery Ajax call. So let's start step by step, so it will be useful to understand from scratch.
Step 1 : Create MVC application
- "Start", then "All Programs" and select "Microsoft Visual Studio 2015".
- "File", then "New" and click "Project", then select "ASP.NET Web Application Template" and provide the Project a name as you wish and click on OK.
- Choose MVC empty application option and click 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 wish and click OK.
HomeController.cs- public class HomeController: Controller
- {
-
- public ActionResult Index()
- {
- return View();
- }
- [HttpGet]
- public JsonResult EmpDetails()
- {
-
- List < Employee > ObjEmp = new List < Employee > ()
- {
-
- new Employee
- {
- Id = 1, Name = "Vithal Wadje", City = "Latur", Address = "Kabansangvi"
- },
- new Employee
- {
- Id = 2, Name = "Sudhir Wadje", City = "Mumbai", Address = "Kurla"
- }
- };
-
- 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 the 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, click on Add button and write the following code.
- <script src="~/Scripts/jquery-1.10.2.min.js"></script>
- <script>
- $(document).ready(function () {
-
- $.getJSON("Home/EmpDetails",
- function (json) {
- var tr;
-
- 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 in the following code.
- @{
- ViewBag.Title = "www.compilemode.com";
- }
- <div style="margin-top:20px">
- @Html.Partial("EmpDetails");
- </div>
Step 6: Run the application
After running the application the output will be as in the following screenshot,
From the preceding examples we learned how to bind HTML table using JSON data in MVC.
Summary
I hope this tutorial is useful for all readers. If you have any suggestion then please comment below.