Guruji Point - Code You Want To Write

  • Home
  • Asp.Net
  • WCF
  • SQL
  • Type Script
  • AngularJS
  • Tech News
  • Blog
  • Earn Online

Sunday, 17 April 2016

Bind GridView Using JQuery-Ajax JSON in Asp.Net

 gridview, javascript, jquery     No comments   

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
AS
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>
 

  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to TwitterShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Facebook Updates

Guruji Point

Categories

comma seperated string in sql Comman table Expression in SQL Dynamic Grid Row IQueryable in c# Learn AngularJS row_number() and dense_rank() salary table structure. Scope_Identity() Use of indexes while loop in sql why do we need cursor why tuple used

About Us

This blog is about the Programming ,Tech News and some intresting facts related Contents. Here you can find fundamental and expert level topic of programming languages very practically related to C# , Asp.Net ,Sql-Server, JavaScript, Jquery, WebServices And also Web-Api, WCF ,WPF, Angular Js.

Contact Us

Email Us - gurujipoints@gmail.com
Contact- 8077657477

Reach Us

Copyright © Guruji Point - Code You Want To Write