Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

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

Article:
Viewed:  1120 
Posted On:  3/30/2016 7:50:11 PM 
How we can Showi Data Using jQuery Ajax Call JSON in ASP.NET MVC ? 

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.

1.png

Image 1.

2.png

Image 2.

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

3.png

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:

4.png

Image 4.

Now Add a ADO.NET Entity Data Model. So Right click on Project Solution Explorer-> Add-> New Item

5.png

Image 5.

Select ADO.NET Entity Data Model

6.png

Image 6.

7.png

Image 7.

8.png

Image 8.

9.png

Image 9.

10.png

Image 10.

11.png

Image 11.

Now Right Click on Models Folder-> Add -> New Class. Like below:

12.png

Image 12.

Now add a new Controller -> Right Click on Controllers Folder -> Add New Controller

13.png

Image 13.

14.png

Image 14.

15.png

Image 15.

Here in this controller do the below code:

16.png

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:

17.png

Image 17.

18.png

Image 18.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us