Fork me on GitHub

AspNetPager demo - Ajax paging with UpdatePanel

This sample demonstrates how to use AspNetPager control within UpdatePanel to implement Ajax paging.

Order IDOrder DateCompany NameCustomer IDEmployee Name
11074 5/6/1998 Simons bistro SIMOB Robert King
11075 5/6/1998 Richter Supermarkt RICSU Laura Callahan
11076 5/6/1998 Bon app' BONAP Margaret Peacock
11077 5/6/1998 Rattlesnake Canyon Grocery RATTC Nancy Davolio
11070 5/5/1998 Lehmanns Marktstand LEHMS Andrew Fuller
11071 5/5/1998 LILA-Supermercado LILAS Nancy Davolio
11072 5/5/1998 Ernst Handel ERNSH Margaret Peacock
11073 5/5/1998 Pericles Comidas clásicas PERIC Andrew Fuller
11067 5/4/1998 Drachenblut Delikatessen DRACD Nancy Davolio
11068 5/4/1998 Queen Cozinha QUEEN Laura Callahan
<<<12345678910...>>>  

UpdatePanel.aspx:


 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate> <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <HeaderTemplate>
        <table width="100%" class="table table-bordered">
        <tr style="backGround-color:#CCCCFF"><th style="width:15%">Order ID</th><th style="width:15%">Order Date</th><th style="width:30%">Company Name</th><th style="width:20%">Customer ID</th><th style="width:20%">Employee Name</th></tr>
        </HeaderTemplate>
        <ItemTemplate>
        <tr>
        <td><%#DataBinder.Eval(Container.DataItem,"orderid")%></td>
        <td><%#DataBinder.Eval(Container.DataItem,"orderdate","{0:d}")%></td>
        <td><%#DataBinder.Eval(Container.DataItem, "companyname")%></td>
        <td><%#DataBinder.Eval(Container.DataItem,"customerid")%></td>
        <td><%#DataBinder.Eval(Container.DataItem,"employeename")%></td>
        </tr>
        </ItemTemplate>
        <FooterTemplate>
        </table>
        </FooterTemplate>
    </asp:Repeater>
        <webdiyer:AspNetPager id="AspNetPager1" runat="server" HorizontalAlign="Center" Width="100%" PageIndexBoxType="DropDownList"></webdiyer:AspNetPager>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SqlConnection %>"
        SelectCommand="<%$ AppSettings:pagedSPName %>" SelectCommandType="StoredProcedure">
        <SelectParameters>
            <asp:ControlParameter ControlID="AspNetPager1" DefaultValue="10" Name="endIndex"
                PropertyName="EndRecordIndex" Type="Int32" />
            <asp:ControlParameter ControlID="AspNetPager1" DefaultValue="1" Name="startIndex"
                PropertyName="StartRecordIndex" Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>      
        </ContentTemplate>
        </asp:UpdatePanel>

UpdatePanel.aspx.cs:

using System;
using System.Data;

public partial class Ajax_default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            int totalOrders = (int)SqlHelper.ExecuteScalar(CommandType.StoredProcedure, "P_GetOrderNumber");
            AspNetPager1.RecordCount = totalOrders;
        }
    }
}