Introduction:-
In this article , I have explained how to bind GridView
using Jquery in asp.net. For this I have used jquery with ajax, because we
cannot call method without using Ajax .
First Create a table:-
Create table login(userid varchar(50),password varchar(50),
type varchar(50), status varchar(50));
Insert some dummy data in the table.
Drag and drop GridView Control on design page.
JQuery
Code:-
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "GVBindUsingJQuery.aspx/BindGridView",
data: "{}",
dataType: "json",
success: function(data) {
for (var i = 0; i < data.d.length; i++) {
$("#GridView1").append("<tr><td>" +
data.d[i].userid + "</td><td>"
+ data.d[i].password + "</td><td>"
+ data.d[i].type + "</td><td>"
+ data.d[i].status + "</td></tr>");
}
},
error: function(result) {
alert("Error");
}
});
});
</script>
<style type="text/css">
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
</style>
Full Code:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled
Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "GVBindUsingJQuery.aspx/BindGridView",
data: "{}",
dataType: "json",
success: function(data) {
for (var i = 0; i < data.d.length; i++) {
$("#GridView1").append("<tr><td>" +
data.d[i].userid + "</td><td>"
+ data.d[i].password + "</td><td>"
+ data.d[i].type + "</td><td>"
+ data.d[i].status + "</td></tr>");
}
},
error: function(result) {
alert("Error");
}
});
});
</script>
<style type="text/css">
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server">
<HeaderStyle BackColor="#DC5807" Font-Bold="true" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
Code behind Page:-
using System;
using
System.Collections;
using
System.Configuration;
using
System.Data;
using
System.Linq;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.HtmlControls;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Xml.Linq;
using
System.Web.Services;
using
System.Text;
using
System.Collections.Generic;
public partial class GVBindUsingJQuery : System.Web.UI.Page
{
string
constr = ConfigurationManager.ConnectionStrings["khamaconn"].ConnectionString;
//MySqlConnection
con;
protected void Page_Load(object
sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable
dt = new DataTable();
dt.Columns.Add("userid");
dt.Columns.Add("password");
dt.Columns.Add("type");
dt.Columns.Add("status");
dt.Rows.Add();
GridView1.DataSource = dt;
GridView1.DataBind();
GridView1.Rows[0].Visible = false;
}
}
[WebMethod]
public static LoginDetails[]
BindGridView()
{
DataTable
dt = new DataTable();
List<LoginDetails> details = new List<LoginDetails>();
using (SqlConnection con = new
SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString))
{
using
(SqlCommand cmd = new
SqlCommand("Select
* from login",con))
{
con.Open();
SqlDataAdapter
da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach(DataRow dtrow in
dt.Rows)
{
LoginDetails
login = new LoginDetails();
login.userid=dtrow["userid"].ToString();
login.password = dtrow["password"].ToString();
login.type = dtrow["type"].ToString();
login.status = dtrow["status"].ToString();
details.Add(login);
}
}
}
return
details.ToArray();
}
public class LoginDetails
{
public string userid {get;set;}
public string password { get;
set; }
public string type { get; set; }
public string status { get; set; }
}
}
Run the code and test.
