Data Load into GridView and Page Navigation using jQuery in Asp.Net

I have try minimize server side work and task are accomplished in Client side.So, i share my part of little knowledge.

Aspx page

CSS :

<style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        .Pager span
        {
            text-align: center;
            color: #999;
            display: inline-block;
            width: 20px;
            background-color: #A1DCF2;
            margin-right: 3px;
            line-height: 150%;
            border: 1px solid #3AC0F2;
        }
        .Pager a
        {
            text-align: center;
            display: inline-block;
            width: 20px;
            background-color: #3AC0F2;
            color: #fff;
            border: 1px solid #3AC0F2;
            margin-right: 3px;
            line-height: 150%;
            text-decoration: none;
        }
    </style>

Script :
Link : http://code.jquery.com/jquery-1.8.3.min.js
ASPSnippets_Pager.min.js : bellow paragraph save as ASPSnippets_Pager.min.js

function ASPSnippetsPager(a, b) { var c = '<a style = "cursor:pointer" class="page" page = "{1}">{0}</a>'; var d = "<span>{0}</span>"; var e, f, g; var g = 5; var h = Math.ceil(b.RecordCount / b.PageSize); if (b.PageIndex > h) { b.PageIndex = h } var i = ""; if (h > 1) { f = h > g ? g : h; e = b.PageIndex > 1 && b.PageIndex + g - 1 < g ? b.PageIndex : 1; if (b.PageIndex > g % 2) { if (b.PageIndex == 2) f = 5; else f = b.PageIndex + 2 } else { f = g - b.PageIndex + 1 } if (f - (g - 1) > e) { e = f - (g - 1) } if (f > h) { f = h; e = f - g + 1 > 0 ? f - g + 1 : 1 } var j = (b.PageIndex - 1) * b.PageSize + 1; var k = j + b.PageSize - 1; if (k > b.RecordCount) { k = b.RecordCount } i = "<b>Records " + (j == 0 ? 1 : j) + " - " + k + " of " + b.RecordCount + "</b> "; if (b.PageIndex > 1) { i += c.replace("{0}", "<<").replace("{1}", "1"); i += c.replace("{0}", "<").replace("{1}", b.PageIndex - 1) } for (var l = e; l <= f; l++) { if (l == b.PageIndex) { i += d.replace("{0}", l) } else { i += c.replace("{0}", l).replace("{1}", l) } } if (b.PageIndex < h) { i += c.replace("{0}", ">").replace("{1}", b.PageIndex + 1); i += c.replace("{0}", ">>").replace("{1}", h) } } a.html(i); try { a[0].disabled = false } catch (m) { } } (function (a) { a.fn.ASPSnippets_Pager = function (b) { var c = {}; var b = a.extend(c, b); return this.each(function () { ASPSnippetsPager(a(this), b) }) } })(jQuery);



<script type="text/javascript" src="script/jquery-1.8.3.min.js"></script>
<script src="script/ASPSnippets_Pager.min.js" type="text/javascript"></script>

<script type="text/javascript">
        $(function () {
            GetCustomers(1);
        });
        $(".Pager .page").live("click", function () {
            GetCustomers(parseInt($(this).attr('page')));
        });
        function GetCustomers(pageIndex) {
            $.ajax({
                type: "POST",
                url: "CS.aspx/GetCustomers",
                data: '{pageIndex: ' + pageIndex + '}',
                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("Customers");
            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("ID").text());
                $("td", row).eq(1).html($(this).find("Name").text());
                $("td", row).eq(2).html($(this).find("MyLanguage").text());
                $("[id*=gvCustomers]").append(row);
                row = $("[id*=gvCustomers] tr:last-child").clone(true);
            });
            var pager = xml.find("Pager");
            $(".Pager").ASPSnippets_Pager({
                ActiveCssClass: "current",
                PagerCssClass: "pager",
                PageIndex: parseInt(pager.find("PageIndex").text()),
                PageSize: parseInt(pager.find("PageSize").text()),
                RecordCount: parseInt(pager.find("RecordCount").text())
            });
        };
    </script>

Gridview Code :
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" RowStyle-BackColor="#A1DCF2"
        HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White">
        <Columns>
            <asp:BoundField ItemStyle-Width="150px" DataField="ID" HeaderText="CustomerID" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Name" HeaderText="Name" />
            <asp:BoundField ItemStyle-Width="150px" DataField="MyLanguage" HeaderText="My Language" />
        </Columns>
    </asp:GridView>


Aspx.cs :

private static int PageSize = 3;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDummyRow();
        }
    }

    private void BindDummyRow()
    {
        DataTable dummy = new DataTable();
        dummy.Columns.Add("ID");
        dummy.Columns.Add("Name");
        dummy.Columns.Add("MyLanguage");
       
        dummy.Rows.Add();
        gvCustomers.DataSource = dummy;
        gvCustomers.DataBind();
    }

    [WebMethod]
    public static string GetCustomers(int pageIndex)
    {
        string query = "[GetCustomers_Pager]";
        SqlCommand cmd = new SqlCommand(query);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
        cmd.Parameters.AddWithValue("@PageSize", PageSize);
        cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
        return GetData(cmd, pageIndex).GetXml();
    }
 
    private static DataSet GetData(SqlCommand cmd, int pageIndex)
    {
        string strConnString = ConfigurationManager.ConnectionStrings["conString"].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, "Customers");
                    DataTable dt = new DataTable("Pager");
                    dt.Columns.Add("PageIndex");
                    dt.Columns.Add("PageSize");
                    dt.Columns.Add("RecordCount");
                    dt.Rows.Add();
                    dt.Rows[0]["PageIndex"] = pageIndex;
                    dt.Rows[0]["PageSize"] = PageSize;
                    dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value;
                    ds.Tables.Add(dt);
                    return ds;
                }
            }
        }
    }

Sql Database :

Table Name : tblTableTable Structure :
Column_name    Type
ID                         int
Name                   varchar(50)
MyLanguage       nvarchar(100)

Stored Procedure :

CREATE PROCEDURE [dbo].[GetCustomers_Pager]
      @PageIndex INT = 1
      ,@PageSize INT = 10
      ,@RecordCount INT OUTPUT
AS
BEGIN
      SET NOCOUNT ON;
      SELECT ROW_NUMBER() OVER
      (
            ORDER BY [ID] ASC
      )AS RowNumber
      ,ID
      ,Name
      ,MyLanguage
      INTO #Results
      FROM [tblTable]
    
      SELECT @RecordCount = COUNT(*)
      FROM #Results
          
      SELECT * FROM #Results
      WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1
    
      DROP TABLE #Results
END


I hope above code is help to data load into gridview using jQuery.

Data Load into DropDownList using JQuery

Normally, We have doing data load into DropDownList using server side code C# in Asp.net.But, step to improve performance on data load using jQuery.


Bellow jQuery code using in aspx page 

 $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "Default.aspx/LoadDropDownValues",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    $.each(msg.d, function (index, item) {
                        $("#ddlRecords").get(0).options[$("#ddlRecords").get(0).options.length] = new Option(item.dropDownValue, item.dropDownIndex);
                    });
                },
                error: function () {
                    alert("Failed to load names"); 
                }
            });
        }); 

And With in Body

<form id="form1" runat="server">
    <div>
        <input id="btnLoadDropDown" type="button" value="Load DropDown"/>
        <asp:DropDownList runat="server" ID="ddlRecords" Width="125px" Height="25px">
        </asp:DropDownList>
    </div>
    </form>

Server side to fetch database table values or static values like.

[WebMethod]
    public static List<DropdownValues> LoadDropDownValues()
    {
        List<DropdownValues> lstDD = new List<DropdownValues>();
        string[] alpha = new string[5] { "ONE", "TWO", "THREE", "FOUR", "FIVE" };
        for (int i = 0; i < 5; i++)
        {
            DropdownValues dd = new DropdownValues();
            dd.dropDownIndex = i;
            dd.dropDownValue = alpha[i];
            lstDD.Add(dd);
        }
        return lstDD;
    }

We should use [WebMethod] above used method and this method should be in static.

public class DropdownValues
    {
        public int dropDownIndex;
        public string dropDownValue;
    }


Finally, data load into DropDownList on client side.We have to achieve step to improve performance.