🪴 Shoyeb's Dev Diary

12. Custom pagination in an ASP.NET Web Form

Thursday Mar 13, 2025

Here is a step-by-step guide on how to implement custom pagination in an ASP.NET Web Form. The code provided includes a stored procedure, GridView, and code-behind functionality for paging.

1. Stored Procedure (SQL)

This is the stored procedure that fetches paginated data based on search parameters.

USE [SCBABP_NEW]
GO
 
ALTER PROCEDURE SP_GetPagedMCCTInwardData
    @SearchTerm NVARCHAR(100) = NULL,
    @Offset INT,
    @PageSize INT
AS
BEGIN
    SET NOCOUNT ON;
 
    SELECT [Id],
           [SettlementDate],
           [BankName],
           [CustomerName],
           [NidNumber],
           [AccountNumber],
           [CardNumber],
           [CardType],
           [TransactionType],
           [MerchantCategoryCode],
           [IssuingCountryCode],
           [IssuingCountry],
           [AmountBDT],
           [PassportNumber],
           [BirthRegistrationNumber],
           [CreatedDateTime],
           [CreatedBy],
           [LastModifiedDateTime],
           [LastModifiedBy]
    FROM [SCBABP_NEW].[dbo].[t_MCCTInward]
    WHERE (@SearchTerm IS NULL OR CustomerName LIKE '%' + @SearchTerm + '%')
    ORDER BY [Id]
    OFFSET @Offset ROWS FETCH NEXT @PageSize ROWS ONLY;
END;

2. Web Form (ASPX)

This ASPX page contains the search box, GridView, and pagination buttons. Make sure to properly link this page with the code-behind (TempDesign.aspx.cs).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TempDesign.aspx.cs" Inherits="YourNamespace.TempDesign" %>
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paginated Grid</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <!-- Search Box -->
    <asp:TextBox ID="txtSearch" runat="server" placeholder="Search by Customer Name..." CssClass="search-box" />
    <asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="search-button" OnClick="btnSearch_Click" />
    
    <br /><br />
 
    <!-- GridView for displaying data -->
    <asp:GridView ID="gvData" runat="server" AutoGenerateColumns="False" AllowPaging="False" CssClass="data-table">
        <Columns>
            <asp:BoundField DataField="Id" HeaderText="Id" />
            <asp:BoundField DataField="SettlementDate" HeaderText="Settlement Date" />
            <asp:BoundField DataField="BankName" HeaderText="Bank Name" />
            <asp:BoundField DataField="CustomerName" HeaderText="Customer Name" />
            <asp:BoundField DataField="NidNumber" HeaderText="NID Number" />
            <asp:BoundField DataField="AccountNumber" HeaderText="Account Number" />
            <asp:BoundField DataField="CardNumber" HeaderText="Card Number" />
            <asp:BoundField DataField="CardType" HeaderText="Card Type" />
            <asp:BoundField DataField="TransactionType" HeaderText="Transaction Type" />
            <asp:BoundField DataField="MerchantCategoryCode" HeaderText="Merchant Category Code" />
            <asp:BoundField DataField="IssuingCountryCode" HeaderText="Issuing Country Code" />
            <asp:BoundField DataField="IssuingCountry" HeaderText="Issuing Country" />
            <asp:BoundField DataField="AmountBDT" HeaderText="Amount (BDT)" />
            <asp:BoundField DataField="PassportNumber" HeaderText="Passport Number" />
            <asp:BoundField DataField="BirthRegistrationNumber" HeaderText="Birth Registration Number" />
        </Columns>
    </asp:GridView>
 
    <br />
 
    <!-- Pagination Buttons -->
    <asp:Button ID="btnPrev" runat="server" Text="Previous" CssClass="pagination-button" OnClick="btnPrev_Click" />
    <asp:Label ID="lblPageNumber" runat="server" Text="Page 1" CssClass="page-number-label"></asp:Label>
    <asp:Button ID="btnNext" runat="server" Text="Next" CssClass="pagination-button" OnClick="btnNext_Click" />
</body>
</html>

3. CSS (styles.css)

Here’s the complete CSS for the search box, GridView, pagination buttons, and styling.

/* Search Box */
.search-box {
    padding: 10px;
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}
 
/* Search Button */
.search-button {
    padding: 10px 15px;
    background-color: #007bff;
    border: none;
    color: white;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}
 
.search-button:hover {
    background-color: #0056b3;
}
 
/* GridView Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
 
.data-table th,
.data-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}
 
.data-table th {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
}
 
.data-table tr:nth-child(even) {
    background-color: #f2f2f2;
}
 
.data-table tr:hover {
    background-color: #e9ecef;
}
 
/* Pagination Buttons */
.pagination-button {
    padding: 10px 15px;
    margin: 0 5px;
    background-color: #007bff;
    border: none;
    color: white;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}
 
.pagination-button:hover {
    background-color: #0056b3;
}
 
.page-number-label {
    font-size: 14px;
    margin: 0 10px;
    color: #555;
}

4. Code-Behind (TempDesign.aspx.cs)

Here is the complete code-behind file, which manages pagination and binds data to the GridView.

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI;
 
public partial class TempDesign : System.Web.UI.Page
{
    private int PageSize = 10;
 
    private int CurrentPage
    {
        get { return ViewState["CurrentPage"] == null ? 1 : (int)ViewState["CurrentPage"]; }
        set { ViewState["CurrentPage"] = value; }
    }
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindData();
        }
    }
 
    protected void btnSearch_Click(object sender, EventArgs e)
    {
        CurrentPage = 1; // Reset to first page when searching
        BindData();
    }
 
    protected void btnPrev_Click(object sender, EventArgs e)
    {
        if (CurrentPage > 1)
        {
            CurrentPage--;
            BindData();
        }
    }
 
    protected void btnNext_Click(object sender, EventArgs e)
    {
        CurrentPage++;
        BindData();
    }
 
    private void BindData()
    {
        string searchQuery = txtSearch.Text.Trim();
        int offset = (CurrentPage - 1) * PageSize;
 
        using (SqlConnection conn = new SqlConnection(ConfigurationReader.CONNECTION_STRING))
        {
            using (SqlCommand cmd = new SqlCommand("SP_GetPagedMCCTInwardData", conn))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@SearchTerm", string.IsNullOrEmpty(searchQuery) ? DBNull.Value : (object)searchQuery);
                cmd.Parameters.AddWithValue("@Offset", offset);
                cmd.Parameters.AddWithValue("@PageSize", PageSize);
 
                DataTable dt = new DataTable();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
 
                gvData.DataSource = dt;
                gvData.DataBind();
 
                lblPageNumber.Text = "Page " + CurrentPage;
            }
        }
    }
}