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.
![mvc]()
Below is my Data Table in design mode from which I will show data.
![data]()
Script of my Data Table,
- CREATE TABLE [dbo].[Emp_Information](
- [EMP_ID] [int] IDENTITY(1,1)NOTNULL,
- [Name] [varchar](50)NULL,
- [ProjectName] [varchar](50)NULL,
- [ManagerName] [varchar](50)NULL,
- [City] [varchar](50)NULL,
- [Joining_Date] [datetime] NULL,
- CONSTRAINT [PK_Emp_Information] PRIMARYKEYCLUSTERED
- (
- [EMP_ID] ASC
- )WITH (PAD_INDEX=OFF,STATISTICS_NORECOMPUTE=OFF,
- IGNORE_DUP_KEY=OFF,ALLOW_ROW_LOCKS=ON,ALLOW_PAGE_LOCKS=ON)ON [PRIMARY]
- )ON [PRIMARY]
- GO
- SETANSI_PADDINGOFF
- 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]()
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]()
Here in this controller do the following code:
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.Mvc;
- using ShowListData_jQuery_JSON_MVC.Models;
-
- namespace ShowListData_jQuery_JSON_MVC.Controllers
- {
- public class EmployeeController: Controller
- {
-
- public ActionResult Index()
- {
- return View();
- }
-
- public JsonResultGetAllEmployee()
- {
- CompanyDBEntitiesobj = new CompanyDBEntities();
- var contacts = obj.Emp_Information.Select(x => new
- {
- Id = x.EMP_ID,
- Name = x.Name,
- ProjectName = x.ProjectName,
- ManagerName = x.ManagerName,
- city = x.City
- }).ToList();
- return Json(contacts, JsonRequestBehavior.AllowGet);
- }
- }
- }
- Now my View(Index.cshtml):
- @ {
- ViewBag.Title = " Showing Data Using jQuery Ajax Call JSON in ASP.NET MVC";
- } <
- h1 >
- Showing Data Using jQuery Ajax Call JSON in ASP.NET MVC <
- /h1> <
- div >
- <
- tableid = "tblEmployee"
- class = "tblEmployee" >
- <
- thead >
- <
- img src = "~/Loading.gif"
- alt = "Loading"
- id = "imgLoading"
- class = "Load" / >
- <
- /thead> <
- tbody > < /tbody> <
- /table> <
- /div> <
- script src = "~/Scripts/jquery-1.10.2.min.js" > < /script> <
- script type = "text/javascript" >
- $(document).ready(function()
- {
- $("#tblEmployeetbodytr").remove();
- $.ajax
- ({
- type: 'POST',
- url: '@Url.Action("GetAllEmployee")',
- dataType: 'json',
- data: {},
- success: function(data)
- {
- $("#imgLoading").hide();
- var items = '';
- var rows = "<tr>" +
- "<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>" +
- "</tr>";
- $('#tblEmployeetbody').append(rows);
-
- $.each(data, function(i, item)
- {
- var rows = "<tr>" +
- "<td class='EmployeeTableTD'>" + item.Id + "</td>" +
- "<td class='EmployeeTableTD'>" + item.Name + "</td>" +
- "<td class='EmployeeTableTD'>" + item.ProjectName + "</td>" +
- "<td class='EmployeeTableTD'>" + item.ManagerName + "</td>" +
- "<td class='EmployeeTableTD'>" + item.city + "</td>" +
- "</tr>";
- $('#tblEmployeetbody').append(rows);
- });
- },
- error: function(ex)
- {
- var r = jQuery.parseJSON(response.responseText);
- alert("Message: " + r.Message);
- }
- });
- return false;
- }); <
- /script> <
- styletype = "text/css" >
- .tblEmployee
- {
- font - family: verdana, arial, sans - serif;
- font - size: 11 px;
- color: #333333;
- border-width: 1px;
- border-color: # 666666;
- border - collapse: collapse;
- }
-
- .EmployeeTableTH
- {
- border - width: 1 px;
- padding: 8 px;
- border - style: solid;
- border - color: #666666;
- background-color: # dedede;
- }
-
- .EmployeeTableTD
- {
- border - width: 1 px;
- padding: 8 px;
- border - style: solid;
- border - color: #666666;
- background-color: # ffffff;
- } <
- /style>
Now Run Application:
Read more articles on ASP.NET: