In this article I am going to show how we can show data
using jQuery, AJAX Call, JSON in ASP.NET MVC Application.
Open Visual Studio -> Add New Project.
Image 1.
Image 2.
Below is my Data Table in design mode from which I will
show data.
Image 3.
Script
of my Data table
CREATE TABLE [dbo].[Emp_Information](
[EMP_ID] [int]
IDENTITY(1,1) NOT NULL,
[Name]
[varchar](50) NULL,
[ProjectName]
[varchar](50) NULL,
[ManagerName]
[varchar](50) NULL,
[City]
[varchar](50) NULL,
[Joining_Date]
[datetime] NULL,
CONSTRAINT [PK_Emp_Information] PRIMARY KEY CLUSTERED
(
[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
SET ANSI_PADDING OFF
GO
Data in my Data Table:
Image 4.
Now Add a ADO.NET Entity Data Model. So Right click on
Project Solution Explorer-> Add-> New Item
Image 5.
Select ADO.NET Entity Data Model
Image 6.
Image 7.
Image 8.
Image 9.
Image 10.
Image 11.
Now Right Click on Models Folder-> Add -> New
Class. Like below:
Image 12.
Now add a new Controller -> Right Click on
Controllers Folder -> Add New Controller
Image 13.
Image 14.
Image 15.
Here in this controller do the below code:
Image 16.
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
{
// GET: Employee
public ActionResult Index()
{
return View();
}
public JsonResult GetAllEmployee()
{
CompanyDBEntities obj = 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>
<table id="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 () {
$("#tblEmployee tbody tr").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>";
$('#tblEmployee
tbody').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>";
$('#tblEmployee
tbody').append(rows);
});
},
error: function (ex) {
var r =
jQuery.parseJSON(response.responseText);
alert("Message:
"
+ r.Message);
}
});
return false;
});
</script>
<style type="text/css">
.tblEmployee {
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
.EmployeeTableTH {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
.EmployeeTableTD {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
Now
Run Application:
Image 17.
Image 18.