Showing Data Using jQuery Ajax Call JSON In ASP.NET MVC

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;  
  7.   
  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.         }  
  17.   
  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);  
  75.   
  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.     }  
  107.   
  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. }  
  116.   
  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: