Wednesday, July 10, 2013

How to bind gridview with Jquery

ASPX Page


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default9.aspx.cs" Inherits="Default9" %>

<!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 src="myjavascript.js" type="text/javascript"></script>
    <script type="text/javascript">
       
        $(function () {
            $("div.test").toggle(15000)
            $.ajax({

            type: "POST",
            url: "Default9.aspx/GetCustomers",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    });

    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        var customers = xml.find("Table");
        var row = $("[id*=gvCustomers] tr:last-child").clone(true);
        $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
        $.each(customers, function () {
            var customer = $(this);
            $("td", row).eq(0).html($(this).find("RBDID").text());
            $("td", row).eq(1).html($(this).find("BATCHID").text());
            $("td", row).eq(2).html($(this).find("REQUESTID").text());
            $("[id*=gvCustomers]").append(row);
            row = $("[id*=gvCustomers] tr:last-child").clone(true);
        });
    }
</script>


</head>
<body>
    <form id="form1" runat="server">
    <div class="test">
    <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
    Font-Size="10pt" RowStyle-BackColor="#A1DCF2" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor = "White">
    <Columns>
        <asp:BoundField ItemStyle-Width="150px" DataField="RBDID" HeaderText="CustomerID" />
        <asp:BoundField ItemStyle-Width="150px" DataField="BATCHID" HeaderText="CustomerID" />
        <asp:BoundField ItemStyle-Width="150px" DataField="REQUESTID" HeaderText="City" />
    </Columns>
</asp:GridView>

<asp:Button runat="server" ID="b1" Text="click me" />
    </div>
    </form>
</body>
</html>


Code Behind Page

using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
using System;

public partial class Default9 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            this.BindDummyRow();
        }
    }

    private void BindDummyRow()
    {
        DataTable dummy = new DataTable();
        dummy.Columns.Add("RBDID");
        dummy.Columns.Add("BATCHID");
        dummy.Columns.Add("REQUESTID");
        dummy.Rows.Add();
        gvCustomers.DataSource = dummy;
        gvCustomers.DataBind();
    }



    [WebMethod]
    public static string GetCustomers()
    {
        string query = "select top 10 RBDID,BATCHID,REQUESTID From dbo.RG_ResponseBatchData";
        SqlCommand cmd = new SqlCommand(query);
        return GetData(cmd).GetXml();
    }
    private static DataSet GetData(SqlCommand cmd)
    {
        string strConnString = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(strConnString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataSet ds = new DataSet())
                {
                    sda.Fill(ds);
                    return ds;

                }
            }
        }
    }

}


No comments:

Post a Comment

Your comment is pending for approval

AngularJS Basics - Part 1

                                                                  AngularJS What is AngularJS ·          Framework by googl...