try this example.. :)
Javascript
function BindTable() {
$.ajax({
type: "POST",
url: "newsCafe.aspx/GetData",
contentType: "application/json;charset=utf-8",
data: {},
dataType: "json",
success: function (data) {
$("#grdDemo").empty();
if (data.d.length > 0) {
$("#grdDemo").append("<tr><th>Username</th>
<th>Firstname</th> <th>Lastname</th>
<th>EmailID</th></tr>");
for (var i = 0; i < data.d.length; i++) {
$("#grdDemo").append("<tr><td>" +
data.d[i].Firstname + "</td> <td>" +
data.d[i].Lastname + "</td> <td>" +
data.d[i].Username + "</td> <td>" +
data.d[i].EmailID + "</td></tr>");
}
}
},
error: function (result) {
}
});
HTML
<div id="grdDemo"> </div>
C#
[WebMethod]
public static DetailsClass[] GetData()
{
List<detailsclass> Detail = new List<detailsclass>();
string SelectString = "Select Username,Firstname,Lastname,EmailID from DemoTable";
SqlConnection cn = new SqlConnection("Data Source=servername;
Initial Catalog=DemoDatabase;User ID=User;Password=*****");
SqlCommand cmd = new SqlCommand(SelectString,cn);
cn.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dtGetData = new DataTable();
da.Fill(dtGetData);
foreach(DataRow dtRow in dtGetData.Rows)
{
DetailsClass DataObj = new DetailsClass();
DataObj.Username = dtRow["Username"].ToString();
DataObj.Firstname = dtRow["Firstname"].ToString();
DataObj.Lastname = dtRow["Lastname"].ToString();
DataObj.EmailID = dtRow["EmailID"].ToString();
Detail.Add(DataObj);
}
return Detail.ToArray();
}
public class DetailsClass
{
public string Username { get; set; }
public string Firstname { get; set; }
public string Lastname { get; set; }
public string EmailID { get; set; }
}
COMPLETE REFERNCE.. :)
Bind Gridview using AJAX [
^]