In this article I am going to show how to display data using jQuery, AJAX Call, JSON in ASP.NET MVC Application.

Open Visual Studio, then Add New Project.

New

mvc

Below is my Data Table in design mode from which I will show data.

data

Script of my Data Table,
  1. CREATE TABLE [dbo].[Emp_Information](
  2. [EMP_ID] [int] IDENTITY(1,1)NOTNULL,
  3. [Name] [varchar](50)NULL,
  4. [ProjectName] [varchar](50)NULL,
  5. [ManagerName] [varchar](50)NULL,
  6. [City] [varchar](50)NULL,
  7. [Joining_Date] [datetime] NULL,
  8. CONSTRAINT [PK_Emp_Information] PRIMARYKEYCLUSTERED
  9. (
  10. [EMP_ID] ASC
  11. )WITH (PAD_INDEX=OFF,STATISTICS_NORECOMPUTE=OFF,
  12. IGNORE_DUP_KEY=OFF,ALLOW_ROW_LOCKS=ON,ALLOW_PAGE_LOCKS=ON)ON [PRIMARY]
  13. )ON [PRIMARY]
  14. GO
  15. SETANSI_PADDINGOFF
  16. GO
Data in my Data Table:

Table

Now add an ADO.NET Entity Data Model. So, right click on Project Solution Explorer, Add, then click New Item,

new

Select ADO.NET Entity Data Model,

ef

efd

efd

efd

efd

efd

Now Right Click on Models Folder, Add, then New Class. Here's the screenshot,

add

Now add a new Controller, Right Click on Controller Folder and then Add New Controller,

Controller

controller

controller

Here in this controller do the following code:

controller
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using ShowListData_jQuery_JSON_MVC.Models;
  8. namespace ShowListData_jQuery_JSON_MVC.Controllers
  9. {
  10. public class EmployeeController: Controller
  11. {
  12. // GET: Employee
  13. public ActionResult Index()
  14. {
  15. return View();
  16. }
  18. public JsonResultGetAllEmployee()
  19. {
  20. CompanyDBEntitiesobj = new CompanyDBEntities();
  21. var contacts = obj.Emp_Information.Select(x => new
  22. {
  23. Id = x.EMP_ID,
  24. Name = x.Name,
  25. ProjectName = x.ProjectName,
  26. ManagerName = x.ManagerName,
  27. city = x.City
  28. }).ToList();
  29. return Json(contacts, JsonRequestBehavior.AllowGet);
  30. }
  31. }
  32. }
  33. Now my View(Index.cshtml):
  34. @ {
  35. ViewBag.Title = " Showing Data Using jQuery Ajax Call JSON in ASP.NET MVC";
  36. } <
  37. h1 >
  38. Showing Data Using jQuery Ajax Call JSON in ASP.NET MVC <
  39. /h1> <
  40. div >
  41. <
  42. tableid = "tblEmployee"
  43. class = "tblEmployee" >
  44. <
  45. thead >
  46. <
  47. img src = "~/Loading.gif"
  48. alt = "Loading"
  49. id = "imgLoading"
  50. class = "Load" / >
  51. <
  52. /thead> <
  53. tbody > < /tbody> <
  54. /table> <
  55. /div> <
  56. script src = "~/Scripts/jquery-1.10.2.min.js" > < /script> <
  57. script type = "text/javascript" >
  58. $(document).ready(function()
  59. {
  60. $("#tblEmployeetbodytr").remove();
  61. $.ajax
  62. ({
  63. type: 'POST',
  64. url: '@Url.Action("GetAllEmployee")',
  65. dataType: 'json',
  66. data: {},
  67. success: function(data)
  68. {
  69. $("#imgLoading").hide();
  70. var items = '';
  71. var rows = "<tr>" +
  72. "<th align='left' class='EmployeeTableTH'>Employee ID</th><th align='left' class='EmployeeTableTH'>Name</th><th align='left' class='EmployeeTableTH'>Project Name</th><th align='left' class='EmployeeTableTH'>Manager Name</th><th align='left' class='EmployeeTableTH'>City</th>" +
  73. "</tr>";
  74. $('#tblEmployeetbody').append(rows);
  76. $.each(data, function(i, item)
  77. {
  78. var rows = "<tr>" +
  79. "<td class='EmployeeTableTD'>" + item.Id + "</td>" +
  80. "<td class='EmployeeTableTD'>" + item.Name + "</td>" +
  81. "<td class='EmployeeTableTD'>" + item.ProjectName + "</td>" +
  82. "<td class='EmployeeTableTD'>" + item.ManagerName + "</td>" +
  83. "<td class='EmployeeTableTD'>" + item.city + "</td>" +
  84. "</tr>";
  85. $('#tblEmployeetbody').append(rows);
  86. });
  87. },
  88. error: function(ex)
  89. {
  90. var r = jQuery.parseJSON(response.responseText);
  91. alert("Message: " + r.Message);
  92. }
  93. });
  94. return false;
  95. }); <
  96. /script> <
  97. styletype = "text/css" >
  98. .tblEmployee
  99. {
  100. font - family: verdana, arial, sans - serif;
  101. font - size: 11 px;
  102. color: #333333;
  103. border-width: 1px;
  104. border-color: # 666666;
  105. border - collapse: collapse;
  106. }
  108. .EmployeeTableTH
  109. {
  110. border - width: 1 px;
  111. padding: 8 px;
  112. border - style: solid;
  113. border - color: #666666;
  114. background-color: # dedede;
  115. }
  117. .EmployeeTableTD
  118. {
  119. border - width: 1 px;
  120. padding: 8 px;
  121. border - style: solid;
  122. border - color: #666666;
  123. background-color: # ffffff;
  124. } <
  125. /style>
Now Run Application:

Application

Application

Read more articles on ASP.NET: