在ASP.Net Web表单中使用jQuery将数据绑定到GridView？ [英] Bind data to GridView with jQuery in ASP.Net web forms?

问题描述

<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: "Bind/BindDatatable",---->check here plz 
            data: "{}",
            dataType: "json",
            success: function (data) {
                for (var i = 0; i < data.d.length; i++) {
                    $("#gvDetails").append("<tr><td>" + data.d[i].UserId + "</td><td>" + data.d[i].UserName + "</td><td>" + data.d[i].Location + "</td></tr>");
                }
            },
            error: function (result) {
                alert("Error");
            }
        });
    });
</script>
<asp:GridView ID="gvDetails" runat="server">
<HeaderStyle BackColor="#DC5807" Font-Bold="true" ForeColor="White" />

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindColumnToGridview();
            }
        }
        private void BindColumnToGridview()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("UserId");
            dt.Columns.Add("UserName");
            dt.Columns.Add("Location");
            dt.Rows.Add();
            gvDetails.DataSource = dt;
            gvDetails.DataBind();
            gvDetails.Rows[0].Visible = false;
        }

        [WebMethod]
        public static UserDetails[] BindDatatable()
        {
            DataTable dt = new DataTable();
            List<UserDetails> details = new List<UserDetails>();

            using (SqlConnection con = new SqlConnection("Data Source=184.168.47.17;Initial Catalog=Question_Papers;User ID=Shravan;Password=Shravan@34; Trusted_Connection=False"))
            {
                using (SqlCommand cmd = new SqlCommand("select TOP 10 UserId,UserName,Location from Test_1", con))
                {
                    con.Open();
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);
                    foreach (DataRow dtrow in dt.Rows)
                    {
                        UserDetails user = new UserDetails();
                        user.UserId = dtrow["UserId"].ToString();
                        user.UserName = dtrow["UserName"].ToString();
                        user.Location = dtrow["Location"].ToString();
                        details.Add(user);
                    }
                }
            }
            return details.ToArray();
        }
        public class UserDetails
        {
            public string UserId { get; set; }
            public string UserName { get; set; }
            public string Location { get; set; }
        }
    }

推荐答案

（文件）.ready（function（）{

(document).ready(function () {

.ajax（{
type：POST，
contentType：application / json; charset = utf-8，
url：Bind / BindDatatable， ---->检查这里plz
数据：{}，
dataType：json，
成功：函数（数据）{
for（var i = 0; i< data.d.length; i ++）{

.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "Bind/BindDatatable",---->check here plz data: "{}", dataType: "json", success: function (data) { for (var i = 0; i < data.d.length; i++) {

（＃gvDetails）。append（< tr>< td>+ data.d [i ] .UserId +< / td>< td>+ data.d [i] .UserName +< / td>< td>+ data.d [i] .Location +< / td>< / tr>）;
}
}，
错误：函数（结果）{
alert（错误）;
}
}）;
}）;
< / script>
< asp：GridView ID =gvDetailsrunat =server>
< HeaderStyle BackColor =＃DC5807Font-Bold =trueForeColor =White/>

protected void Page_Load（object sender，EventArgs e）
{
if（！IsPostBack）
{
BindColumnToGridview（）;
}
}
private void BindColumnToGridview（）
{
DataTable dt = new DataTable（）;
dt.Columns.Add（UserId）;
dt.Columns.Add（UserName）;
dt.Columns.Add（位置）;
dt.Rows.Add（）;
gvDetails.DataSource = dt;
gvDetails.DataBind（）;
gvDetails.Rows [0] .Visible = false;
}

[WebMethod]
public static UserDetails [] BindDatatable（）
{
DataTable dt = new DataTable（）;
列表< UserDetails> details = new List< UserDetails>（）;

使用（SqlConnection con = new SqlConnection（Data Source = 184.168.47.17; Initial Catalog = Question_Papers; User ID = Shravan; Password = Shravan @ 34; Trusted_Connection = False））
{
使用（SqlCommand cmd = new SqlCommand（选择TOP 10 UserId，UserName，来自Test_1的位置，con））
{
con.Open（）;
SqlDataAdapter da = new SqlDataAdapter（cmd）;
da.Fill（dt）;
foreach（dt.Rows中的DataRow dtrow）
{
UserDetails user = new UserDetails（）;
user.UserId = dtrow [UserId]。ToString（）;
user.UserName = dtrow [UserName]。ToString（）;
user.Location = dtrow [Location]。ToString（）;
details.Add（user）;
}
}
}
返回details.ToArray（）;
}
公共类UserDetails
{
public string UserId {get;组; }
公共字符串UserName {get;组; }
public string Location {get;组; }
}
}

("#gvDetails").append("<tr><td>" + data.d[i].UserId + "</td><td>" + data.d[i].UserName + "</td><td>" + data.d[i].Location + "</td></tr>"); } }, error: function (result) { alert("Error"); } }); }); </script> <asp:GridView ID="gvDetails" runat="server"> <HeaderStyle BackColor="#DC5807" Font-Bold="true" ForeColor="White" /> protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindColumnToGridview(); } } private void BindColumnToGridview() { DataTable dt = new DataTable(); dt.Columns.Add("UserId"); dt.Columns.Add("UserName"); dt.Columns.Add("Location"); dt.Rows.Add(); gvDetails.DataSource = dt; gvDetails.DataBind(); gvDetails.Rows[0].Visible = false; } [WebMethod] public static UserDetails[] BindDatatable() { DataTable dt = new DataTable(); List<UserDetails> details = new List<UserDetails>(); using (SqlConnection con = new SqlConnection("Data Source=184.168.47.17;Initial Catalog=Question_Papers;User ID=Shravan;Password=Shravan@34; Trusted_Connection=False")) { using (SqlCommand cmd = new SqlCommand("select TOP 10 UserId,UserName,Location from Test_1", con)) { con.Open(); SqlDataAdapter da = new SqlDataAdapter(cmd); da.Fill(dt); foreach (DataRow dtrow in dt.Rows) { UserDetails user = new UserDetails(); user.UserId = dtrow["UserId"].ToString(); user.UserName = dtrow["UserName"].ToString(); user.Location = dtrow["Location"].ToString(); details.Add(user); } } } return details.ToArray(); } public class UserDetails { public string UserId { get; set; } public string UserName { get; set; } public string Location { get; set; } } }

这篇关于在ASP.Net Web表单中使用jQuery将数据绑定到GridView？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！