check
Bind data to GridView with jQuery or JSON in ASP.Net[
^]
sample code:
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
BindDummyItem();
}
private void BindDummyItem()
{
DataTable dtGetData = new DataTable();
dtGetData.Columns.Add("Family");
dtGetData.Columns.Add("Name");
dtGetData.Rows.Add();
grdDemo.DataSource = dtGetData;
grdDemo.DataBind();
}
[WebMethod]
public static List<GetName> LoadName()
{
return new List<GetName>(){new GetName(){ Family ="aaa", Name ="bbbb"},
new GetName(){ Family ="ccc", Name ="ddd"}};
}
}
public class GetName
{
public string Name { get; set; }
public string Family { get; set; }
}
ASPX
<head runat="server">
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
BindGridView();
});
function BindGridView() {
$.ajax({
type: "POST",
url: "WebForm1.aspx/LoadName",
contentType: "application/json;charset=utf-8",
data: {},
dataType: "json",
success: function (data) {
if (data.d.length > 0) {
var row = $("[id*=grdDemo] tr:last-child").clone(true);
$("[id*=grdDemo] tr").not($("[id*=grdDemo] tr:first-child")).remove();
for (var i = 0; i < data.d.length; i++) {
alert(data.d[i].Name);
$("td", row).eq(0).html(data.d[i].Name);
$("td", row).eq(1).html(data.d[i].Family);
$("#grdDemo").append(row);
row = $("[id*=grdDemo] tr:last-child").clone(true);
}
}
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdDemo" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Name" >
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%#Bind("Name") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Family">
<ItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%#Bind("Family") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>