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:
Post a Comment