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.





Below is my Data Table in design mode from which I will show 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:



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



Select ADO.NET Entity Data Model,













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



Now add a new Controller, Right Click on Controller Folder and then Add New 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
    {
        // GET: Employee
        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:

• MVC Dynamic Pie Chart Using Web API, AngularJS And JQuery
• Route Attribute In ASP.NET MVC