Wednesday, May 15, 2013

How to bind data to gridview with jquery in asp.net

In previous articles i have given Cascading dropdownlist using jquery .In this post i would like to explain how to bind data to gridview using Jquery. Here we can observe the page method calling using jquery post method
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Bind data to grid using jquery in asp.net</title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "JqueryBindGrid.aspx/BindOrderDataToGrid",
data: "{}",
dataType: "json",
success: function (resData) {
    for (var i = 0; i < resData.d.length; i++) {
        $("#GvOrderDetails").append("<tr><td>" + resData.d[i].OrderId + "</td><td>" + resData.d[i].OrderName + "</td><td>" + resData.d[i].Phone + "</td><td>" + data.d[i].Address + "</td><td>" + resData.d[i].Amount + "</td></tr>");
}
},
error: function (result) {
alert("Exception");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GvOrderDetails" runat="server">
</asp:GridView>
</form>
</body>
</html>
Code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Web.Services;

public partial class JqueryBindGrid : System.Web.UI.Page
{
  
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable GVHeaderdt = new DataTable();
GVHeaderdt.Columns.Add("OrderId");
GVHeaderdt.Columns.Add("OrderName");
GVHeaderdt.Columns.Add("Phone");
GVHeaderdt.Columns.Add("Address");
GVHeaderdt.Columns.Add("Amount");
GVHeaderdt.Rows.Add();
GvOrderDetails.DataSource = GVHeaderdt;
GvOrderDetails.DataBind();
      
}
}
public class OrderReportDetails
{
public int OrderId { get; set; }
public string OderName { get; set; }
public string Phone { get; set; }
public string Address { get; set; }
public string Amount { get; set; }
}
[WebMethod]
public static OrderReportDetails[] BindOrderDataToGrid()
{
DataTable resDt = new DataTable();
List ORdetails = new List();
SqlConnection Dbcon = new SqlConnection(ConfigurationManager.AppSettings["DbOrdrCon"].ToString());
SqlCommand cmd = new SqlCommand("select * from Orders", Dbcon);
Dbcon.Open();
SqlDataAdapter Orda = new SqlDataAdapter(cmd);
Orda.Fill(resDt);
foreach (DataRow Ordt in resDt.Rows)
{
    OrderReportDetails OrderDetails = new OrderReportDetails();
    OrderDetails.OrderId = int.Parse(Ordt["OrderId"].ToString());
    OrderDetails.OderName = Ordt["OrderName"].ToString();
    OrderDetails.Phone = Ordt["Phone"].ToString();
    OrderDetails.Address = Ordt["Address"].ToString();
    OrderDetails.Amount = Ordt["Amount"].ToString();
    ORdetails.Add(OrderDetails);
}
Dbcon.Close();
return ORdetails.ToArray();
}
  
}

No comments:

Bel