Asp.Net Gridview Paging with Ajax

The default behavior of the GridView control is to post back to the server every time we navigate to a new page of records; however, there is an alternative. we can take advantage of AJAX when paging through records with the GridView control.

Code: Ex03AjaxPaging.aspx.cs

<%@ Page Language="C#" AutoEventWireup="true" 
CodeBehind="Ex03AjaxPaging.aspx.cs"
    Inherits="LearnAsp.Net.ControlDemo.GridView.Ex03AjaxPaging" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>
            GridView Control Paging with Ajax</h3>
        <asp:ScriptManager ID="sm1" runat="server" />
        <%= DateTime.Now.ToString("T") %>
        <asp:UpdatePanel ID="up1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="grdDetails2" PageSize="#121212" BackColor="#d4d8ea" ForeColor="#f526b5"
                    runat="server" AutoGenerateColumns="false" OnPageIndexChanging="grdDetails2_PageIndexChanging"
                    EnableSortingAndPagingCallbacks="true" AllowPaging="true" PageSize="5">
                    <Columns>
                        <asp:BoundField DataField="empno" HeaderText="Emp No" />
                        <asp:BoundField DataField="ename" HeaderText="Employee Name" />
                        <asp:BoundField DataField="dname" HeaderText="Department" />
                    </Columns>
                    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                    <EditRowStyle BackColor="#999999" />
                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    <PagerStyle BackColor="#969ba2" ForeColor="White" Font-Bold="true" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Code: Ex03AjaxPaging.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
using LearnAspClassLib.Method;
using System.Configuration;
using System.Data.OracleClient;

namespace LearnAsp.Net.ControlDemo.GridView
{
    public partial class Ex03AjaxPaging : System.Web.UI.Page
    {
        static string strConn = ConfigurationManager.ConnectionStrings["LearnAsp"].ToString();
        private OracleConnection objConn = new OracleConnection(strConn);
        protected void Page_Load(object sender, 
            EventArgs e)
        {
            String query = " SELECT empno, ename, d.deptno, d.dname FROM emp e " ;
            query += " INNER JOIN dept d ON e.deptno = d.deptno ";
            OracleCommand objCmd = new OracleCommand(query, objConn);
            DataTable dt = new DataTable();
            objConn.Open();
            OracleDataAdapter oda = new OracleDataAdapter(objCmd);
            oda.Fill(dt);
            objConn.Close();

            ViewState["dt"] = dt;
            grdDetails2.DataSource = dt;
            grdDetails2.DataBind();
        }

        protected void grdDetails2_PageIndexChanging(object sender, 
            GridViewPageEventArgs e)
        {
            grdDetails2.PageIndex = e.NewPageIndex;
            DataTable tb = (DataTable)ViewState["dt"];

            if (tb.Rows.Count > 0)
            {
                grdDetails2.DataSource = tb;
                grdDetails2.DataBind();
            }
            else
            {
                grdDetails2.DataSource = null;
                grdDetails2.DataBind();
                return;
            }
        }
    }
}

Output:

07 February 2020

Asp.Net Gridview Paging with Ajax

No comments:

Post a Comment