Partager via

Paging in a FormView Web Server Control

  • Article

The ASP.NET FormView control has built-in support to allow users to page through records one at a time. The control also supports customizing the paging user interface (UI). In the FormView control, a page of data is a single bound record.

How Paging Works in the FormView Control

The FormView control supports paging over the items in its data source. To enable paging behavior, you can set the AllowPaging property to true. The page size for the FormView control is always one row per page.

If the FormView control is bound to a data source control, or to any data structure that implements the ICollection interface (including datasets), the control gets all the records from the data source, displays the record for the current page, and discards the rest. When the user moves to another page, the FormView control repeats the process, displaying a different record.

Note

If the data source does not implement the ICollection interface, the FormView control cannot page. For example, if you are using a SqlDataSource control and have set its DataSourceMode property to DataReader, the FormView control cannot implement paging.

Some data sources, such as the ObjectDataSource control, offer more advanced paging capabilities. In these cases the FormView control takes advantage of the data source's more advanced capabilities to gain better performance and flexibility while paging. The number of rows requested may vary depending on whether the data source supports retrieving the total row count.

Note

If you are creating a data source (such as implementing a SelectCountMethod method in the source object for the ObjectDataSource control), it is strongly recommended that your data source return the total row count when supplying pages of data. This minimizes the number of records that the FormView control must request in order to retrieve a page of data. If the total row count is supplied by the source data object, the FormView control will request only a single row at a time for each page. If the total row count is not supplied, the FormView control must request all rows from the data source (starting with the row that represents the requested page of data) and discard all rows except the row being displayed.

Customizing the Paging Settings and User Interface

You can customize the user interface (UI) of the FormView paging in a number of ways.

Paging Modes

The PagerSettings property allows you to customize the appearance of the paging user interface (UI) generated by the FormView control when you set the AllowPaging property to true. The FormView control can display direction controls that allow forward and backward navigation as well as numeric controls that allow a user to move to a specific page.

The PagerSettings property of the FormView control is set to a PagerSettings class. You can customize the paging mode by setting the Mode property of the FormView control to a PagerButtons value. For example, you can customize the paging UI mode by setting it as follows:

FormView1.PagerSettings.Mode = PagerButtons.NextPreviousFirstLast

The available modes are:

Pager Control Appearance

The FormView control has numerous properties that you can use to customize the text and images for different pager modes. For example, if you set the paging mode of a FormView control to NextPrevious and want to customize the text that is displayed, you can set the NextPageText and PreviousPageText properties to your own values. By default, the PreviousPageText and NextPageText properties are set to "<" and ">", respectively.

You can also use images to customize the appearance of your paging controls. The PagerSettings class includes image URL properties for the first, last, previous, and next page command buttons.

Finally, you can control the appearance of the paging commands by setting the PagerStyle property of the FormView control to a TableItemStyle.

Data Paging Template

If you set the AllowPaging property of the FormView control to true, the FormView control automatically adds user interface (UI) controls for paging. You can customize the UI for paging by adding a PagerTemplate template. To specify which paging operation to perform, add a Button control to the template, and then set its CommandName property to Page and its CommandArgument property to one of the following values:

  • First   To navigate to the first page.

  • Last   To navigate to the last page.

  • Prev   To navigate to the previous page.

  • Next   To navigate to the next page of data

  • A number   To indicate a specific page.

The following code example shows a FormView control configured to provide paging.

<%@ Page language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" >
  <head runat="server">
    <title>FormView Example</title>
</head>
<body>
    <form id="form1" runat="server">
      <h3>FormView Example</h3>
        <table cellspacing="10"> 
          <tr>               
            <td valign="top">

              <asp:FormView ID="ProductsFormView"
                DataSourceID="ProductsSqlDataSource"
                AllowPaging="true"
                runat="server">

                <HeaderStyle forecolor="white" backcolor="Blue" />                

                <ItemTemplate>
                  <table>
                    <tr>
                      <td align="right"><b>Product ID:</b></td>
                      <td><asp:Label id="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Product Name:</b></td>
                      <td><asp:Label id="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Category ID:</b></td>
                      <td><asp:Label id="CategoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Quantity Per Unit:</b></td>
                      <td><asp:Label id="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Unit Price:</b></td>
                      <td><asp:Label id="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>' /></td>
                    </tr>
                  </table>                 

                </ItemTemplate>

                <PagerTemplate>
                  <table>
                    <tr>
                      <td><asp:LinkButton ID="FirstButton" CommandName="Page" CommandArgument="First" Text="<<" RunAt="server"/></td>
                      <td><asp:LinkButton ID="PrevButton"  CommandName="Page" CommandArgument="Prev"  Text="<"  RunAt="server"/></td>
                      <td><asp:LinkButton ID="NextButton"  CommandName="Page" CommandArgument="Next"  Text=">"  RunAt="server"/></td>
                      <td><asp:LinkButton ID="LastButton"  CommandName="Page" CommandArgument="Last"  Text=">>" RunAt="server"/></td>
                    </tr>
                  </table>

                </PagerTemplate>

              </asp:FormView>

            </td>
          </tr>
        </table>


        <asp:SqlDataSource ID="ProductsSqlDataSource" 
          SelectCommand="SELECT * FROM [Products]" 
          connectionstring="<%$ ConnectionStrings:NorthwindConnection %>" 
          RunAt="server"/>

      </form>
  </body>
</html>

<%@ Page language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" >
  <head runat="server">
    <title>FormView Example</title>
</head>
<body>
    <form id="form1" runat="server">
      <h3>FormView Example</h3>
        <table cellspacing="10"> 
          <tr>               
            <td valign="top">

              <asp:FormView ID="ProductsFormView"
                DataSourceID="ProductsSqlDataSource"
                AllowPaging="true"
                runat="server">

                <HeaderStyle forecolor="white" backcolor="Blue" />                

                <ItemTemplate>
                  <table>
                    <tr>
                      <td align="right"><b>Product ID:</b></td>
                      <td><asp:Label id="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Product Name:</b></td>
                      <td><asp:Label id="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Category ID:</b></td>
                      <td><asp:Label id="CategoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Quantity Per Unit:</b></td>
                      <td><asp:Label id="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Unit Price:</b></td>
                      <td><asp:Label id="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>' /></td>
                    </tr>
                  </table>                 

                </ItemTemplate>

                <PagerTemplate>
                  <table>
                    <tr>
                      <td><asp:LinkButton ID="FirstButton" CommandName="Page" CommandArgument="First" Text="<<" RunAt="server"/></td>
                      <td><asp:LinkButton ID="PrevButton"  CommandName="Page" CommandArgument="Prev"  Text="<"  RunAt="server"/></td>
                      <td><asp:LinkButton ID="NextButton"  CommandName="Page" CommandArgument="Next"  Text=">"  RunAt="server"/></td>
                      <td><asp:LinkButton ID="LastButton"  CommandName="Page" CommandArgument="Last"  Text=">>" RunAt="server"/></td>
                    </tr>
                  </table>

                </PagerTemplate>

              </asp:FormView>

            </td>
          </tr>
        </table>


        <asp:SqlDataSource ID="ProductsSqlDataSource" 
          SelectCommand="SELECT ProductID, ProductName, CategoryID, QuantityPerUnit, UnitPrice FROM [Products]" 
          connectionstring="<%$ ConnectionStrings:NorthwindConnection %>" 
          RunAt="server"/>

      </form>
  </body>
</html>

See Also

Concepts

FormView Web Server Control Overview