Bind Gridview using Jquery........................
DataStore.cs
using System;
using System.Data;
public class DataStore
{
public DataStore()
{
//
// TODO: Add constructor logic here
//
}
public static DataTable GetDataTable()
{
DataTable dt = new DataTable("Names");
DataColumn dc1 = new DataColumn("Name");
DataColumn dc2 = new DataColumn("Age");
dt.Columns.AddRange(new DataColumn[] { dc1, dc2 });
DataRow dr1 = dt.NewRow();
dr1[0] = "Ahmed";
dr1[1] = "27";
DataRow dr2 = dt.NewRow();
dr2[0] = "Peter";
dr2[1] = "30";
DataRow dr3 = dt.NewRow();
dr3[0] = "John";
dr3[1] = "20";
DataRow dr4 = dt.NewRow();
dr4[0] = "Ali";
dr4[1] = "30";
dt.Rows.Add(dr1);
dt.Rows.Add(dr2);
dt.Rows.Add(dr3);
dt.Rows.Add(dr4);
return dt;
}
}
Names.cs
//using System;
//using System.Collections.Generic;
//using System.Linq;
//using System.Web;
/// <summary>
/// Summary description for Names
/// </summary>
public class Names
{
public Names()
{
//
// TODO: Add constructor logic here
//
}
private string _firstName;
private string _age;
public string FirstName
{
set { _firstName = value; }
get { return _firstName; }
}
public string Age
{
set { _age = value; }
get { return _age; }
}
}
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="~/grid.ascx" TagName="grid" TagPrefix="grid" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function BindGridView() {
$.ajax({
type: "POST",
url: "Default.aspx/GetNames",
data: "{}",
contentType: "application/json",
dataType: "json",
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
$("#NamesGridView").append("<tr><td>" + data.d[i].FirstName + "</td><td>" + data.d[i].Age + "</td></tr>");
}
}
})
}
</script>
</head>
<body onload="BindGridView();">
<form id="form1" runat="server">
<div>
<center>
<br />
<asp:GridView ID="NamesGridView" runat="server" ShowHeaderWhenEmpty="True" >
</asp:GridView>
<br />
</center>
</div>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Services;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("Name"), new DataColumn("Age") });
NamesGridView.DataSource = dt;
NamesGridView.DataBind();
}
[WebMethod]
public static Names[] GetNames()
{
List<Names> list = new List<Names>();
DataTable dt = DataStore.GetDataTable();
foreach (DataRow row in dt.Rows)
{
Names _names = new Names();
_names.FirstName = row["Name"].ToString();
_names.Age = row["age"].ToString();
list.Add(_names);
}
return list.ToArray();
}
}
using System;
using System.Data;
public class DataStore
{
public DataStore()
{
//
// TODO: Add constructor logic here
//
}
public static DataTable GetDataTable()
{
DataTable dt = new DataTable("Names");
DataColumn dc1 = new DataColumn("Name");
DataColumn dc2 = new DataColumn("Age");
dt.Columns.AddRange(new DataColumn[] { dc1, dc2 });
DataRow dr1 = dt.NewRow();
dr1[0] = "Ahmed";
dr1[1] = "27";
DataRow dr2 = dt.NewRow();
dr2[0] = "Peter";
dr2[1] = "30";
DataRow dr3 = dt.NewRow();
dr3[0] = "John";
dr3[1] = "20";
DataRow dr4 = dt.NewRow();
dr4[0] = "Ali";
dr4[1] = "30";
dt.Rows.Add(dr1);
dt.Rows.Add(dr2);
dt.Rows.Add(dr3);
dt.Rows.Add(dr4);
return dt;
}
}
Names.cs
//using System;
//using System.Collections.Generic;
//using System.Linq;
//using System.Web;
/// <summary>
/// Summary description for Names
/// </summary>
public class Names
{
public Names()
{
//
// TODO: Add constructor logic here
//
}
private string _firstName;
private string _age;
public string FirstName
{
set { _firstName = value; }
get { return _firstName; }
}
public string Age
{
set { _age = value; }
get { return _age; }
}
}
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="~/grid.ascx" TagName="grid" TagPrefix="grid" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function BindGridView() {
$.ajax({
type: "POST",
url: "Default.aspx/GetNames",
data: "{}",
contentType: "application/json",
dataType: "json",
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
$("#NamesGridView").append("<tr><td>" + data.d[i].FirstName + "</td><td>" + data.d[i].Age + "</td></tr>");
}
}
})
}
</script>
</head>
<body onload="BindGridView();">
<form id="form1" runat="server">
<div>
<center>
<br />
<asp:GridView ID="NamesGridView" runat="server" ShowHeaderWhenEmpty="True" >
</asp:GridView>
<br />
</center>
</div>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Services;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("Name"), new DataColumn("Age") });
NamesGridView.DataSource = dt;
NamesGridView.DataBind();
}
[WebMethod]
public static Names[] GetNames()
{
List<Names> list = new List<Names>();
DataTable dt = DataStore.GetDataTable();
foreach (DataRow row in dt.Rows)
{
Names _names = new Names();
_names.FirstName = row["Name"].ToString();
_names.Age = row["age"].ToString();
list.Add(_names);
}
return list.ToArray();
}
}
Category:
