Bind GridView Using JQuery-Ajax JSON in Asp.Net ~ Guruji Point

In this article I will explain how to bind GridView using JQuery-Ajax JSON . In my previous article I explained about how to work with controls on GridView Footer to perform CRUD .

Description

Database Design

Create Database Employee

Use Employee

Create table EmpDetail( Id int Identity(1,1), Name varchar(50)

,Designation varchar(50))

Simple Stored Procedure Code to select all data from table.

CREATE PROCEDURE Sp_BindGrid

BEGIN

SELECT Id,Name,Designation FROM EmpDetail

END

Aspx Code

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>Bind GridView using Jquery-Ajax Json</title>

<style type="text/css">

.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode',

                Verdana, Arial, Helevetica, sans-serif; color: #303933;}

.headerstyle

color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;

background-color: #df5015;padding:0.5em 0.5em 0.5em 0.5em;text-align:center;

</style>

</head>

<body>

<form id="form1" runat="server">

<div class="GridviewDiv">

<asp:GridView runat="server" ID="gvDetails">

<HeaderStyle CssClass="headerstyle" />

</asp:GridView>

</div>

</form>

</body>

</html>

you don't need to design BoundFields on GridView. Here I am populating the GridView with dummy data so that we can use its HTML Table structure to populate data using jQuery.In Page Load event of the page I am populating the GridView with dummy data.

protected void Page_Load(object sender, EventArgs e)

   {  if (!IsPostBack)

           BindColumnToGridview();

   private void BindColumnToGridview()

       DataTable dt = new DataTable();

       dt.Columns.Add("Id");

       dt.Columns.Add("Name");

       dt.Columns.Add("Designation");

       dt.Rows.Add();

       gvDetails.DataSource = dt;

       gvDetails.DataBind();

       gvDetails.Rows[0].Visible = false;

BindColumnToGridview function Bind the columns in GridView Dynamically. After doing this we need to a WebMethod threw which we can bind data in Grid using Jquery- Ajax Json.

[WebMethod]

   public static EmpDetails[] BindGridview()

       DataTable dt = new DataTable();

       List<EmpDetails> details = new List<EmpDetails>();

       using (SqlConnection con = new

      SqlConnection("Data Source=JP;Initial Catalog=Employee;Integrated Security=True"))

           con.Open();

           SqlCommand cmd = new SqlCommand("Sp_BindGrid", con);

           cmd.CommandType = CommandType.StoredProcedure;

           SqlDataAdapter da = new SqlDataAdapter(cmd);

           da.Fill(dt);

           con.Close();

           foreach (DataRow dtrow in dt.Rows)

               EmpDetails emp = new EmpDetails();

               emp.Id = dtrow["Id"].ToString();

               emp.Name = dtrow["Name"].ToString();

               emp.Designation = dtrow["Designation"].ToString();

               details.Add(emp);

       return details.ToArray();

   public class EmpDetails

       public string Id { get; set; }

       public string Name { get; set; }

       public string Designation { get; set; }

EmpDetails class is same as table in database. Here WebMethod returns EmpDetail type of data. details is EmpDetail list type of object contains all EmpDetail tables data and now the main concept is the Calling of this WebMethod. Jquery Ajax is a usefull to calling a WebMethod from client Side.

on aspx page write the following Script to call a WebMethod

<script type="text/javascript">

$(function () {

    BindGridview();

});

function BindGridview() {

$.ajax({

type: 'POST',

contentType: 'application/json; charset=utf-8',

url: 'Default.aspx/BindGridview',

data: "{}",

dataType: 'JSON',

success: function (data) {

    var result = data.d;

for (var i = 0; i < result.length; i++) {

    $("#gvDetails").append('<tr><td>' + result[i].Id + '</td><td>' +

        result[i].Name + '</td><td>' + result[i].Designation + '</td></tr>');

},

error: function (data) {

var r = data.responseText;

var errorMessage = r.Message;

alert(errorMessage);

});

</script>

these simple steps make your grid to bind fast. Now I am providing the all code of my aspx page. After done the all code your aspx page look like this

Aspx Page Final Look

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>Bind GridView using Jquery-Ajax Json</title>

  <script src="Scipts/jquery-1.10.2.js"></script>      <%-- Jquery library file --%>

<script type="text/javascript">

$(function () {

    BindGridview();

});

function BindGridview() {

$.ajax({

type: 'POST',

contentType: 'application/json; charset=utf-8',

url: 'Default.aspx/BindGridview',

data: "{}",

dataType: 'JSON',

success: function (data) {

    var result = data.d;

for (var i = 0; i < result.length; i++) {

    $("#gvDetails").append('<tr><td>' + result[i].Id + '</td><td>' + result[i].Name

        + '</td><td>' + result[i].Designation + '</td></tr>');

},

error: function (data) {

var r = data.responseText;

var errorMessage = r.Message;

alert(errorMessage);

});

</script>

<style type="text/css">

.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode',

                   Verdana, Arial, Helevetica, sans-serif; color: #303933;}

.headerstyle

color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;

background-color: #df5015;padding:0.5em 0.5em 0.5em 0.5em;text-align:center;

</style>

</head>

<body>

<form id="form1" runat="server">

<div class="GridviewDiv">

<asp:GridView runat="server" ID="gvDetails">

<HeaderStyle CssClass="headerstyle" />

</asp:GridView>

</div>

</form>

</body>

</html>

Guruji Point - Code You Want To Write

Sunday, 17 April 2016

Bind GridView Using JQuery-Ajax JSON in Asp.Net

In this article I will explain how to bind GridView using JQuery-Ajax JSON . In my previous article I explained about how to work with controls on GridView Footer to perform CRUD .

Description

0 comments:

Post a Comment

Facebook Updates

Categories

About Us

Contact Us

Reach Us