SEO friendly pagination using asp:DataPager control

DataPager is a newly added control in ASP.NET 3.5 that provides paging functionality for data-bound controls that implement the IPageableItemContainer interface, such as the System.Web.UI.WebControls.ListView control.

In general, we need to enable ViewState for the ListView in order to paginate the ListView control, however there is an attribute in DataPager control called QueryStringField that let us specify the name of the querystring we want to use to paginate the ListView. Lets say your pagename is DataPager.aspx and we have written DataPager control for your ListView like this

<asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="5"
QueryStringField="pageid">
<Fields>
<asp:NumericPagerField ButtonCount="5" />
</Fields>
</asp:DataPager>

Notice QueryStringField attribute here. Once we specified the QueryStringField attribute, ListView pagination will be done through querystring. Doing pagination through querystring has many benefits like avoiding postback, decreasing the pagesize by disabling ViewState, Search Engine friendly urls of the paginated records etc. In this way once search engines robots come to our page, it crawls through all pages of the list (Notice the pageid querystring in the address bar and status bar of below image).

Now lets see the complete code to paginate. Complete code is available for download from the top-right of the page.

DataPager.aspx page

<asp:ListView ID="ListView1" runat="server" ItemPlaceholderID="PlaceHolder1" DataKeyNames="AutoId"
OnPagePropertiesChanging="PagePropertiesChanging">
<LayoutTemplate>
<table width="100%" cellpadding="4" cellspacing="0">
<tr class="header">
<th style="width: 30%;">
Name
</th>
<th style="width: 50%;">
Address
</th>
<th style="width: 20;">
Phone
</th>
</tr>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr class="item">
<td>
<%# Eval("Name") %>
</td>
<td>
<%# Eval("Address") %>
</td>
<td>
<%# Eval("Phone") %>
</td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr>
<td>
<%# Eval("Name") %>
</td>
<td>
<%# Eval("Address") %>
</td>
<td>
<%# Eval("Phone") %>
</td>
</tr>
</AlternatingItemTemplate>
<EmptyDataTemplate>
<hr />
No Records Found.<hr />
<asp:LinkButton ID="lnkInsert" runat="server" Text="Insert Records" CommandName="Insert" />
</EmptyDataTemplate>
</asp:ListView>
 
<div style="text-align: center; font-weight: bold;">
 
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="5"
QueryStringField="pageid">
<Fields>
<asp:NumericPagerField ButtonCount="5" />
</Fields>
</asp:DataPager>
 
</div>

Things to notice in the above code snippet is the OnPagePropertiesChanging="PagePropertiesChanging" attribute of ListView and QueryStringField="pageid" attribute of DataPager control. Rest of the code is notihing much special. When page number link will be clicked PagePropertiesChanging method will fire.

DataPager.aspx.cs

string _connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindPersonDetails("Name ASC");
}
}
 
/// <summary>
/// Fires when page links are clicked in the Page control
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
{
DataPager1.SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
// Rebind the data
BindPersonDetails("Name ASC");
}
 
/// <summary>
/// Bind Person Details data
/// </summary>
private void BindPersonDetails(string sortExpression)
{
sortExpression = sortExpression.Replace("Ascending", "ASC");
using (SqlConnection conn = new SqlConnection(_connStr))
{
conn.Open();
using (SqlDataAdapter dAd = new SqlDataAdapter("select * from Details order by Name", conn))
{
DataTable dTable = new DataTable();
dAd.Fill(dTable);
// Sort now
dTable.DefaultView.Sort = sortExpression;
// Bind data now
ListView1.DataSource = dTable;
ListView1.DataBind();
}
conn.Close();
}
}

Above code is simple, I am binding the ListView in Page_Load method after checking IsPostBack condition. In PagePropertiesChanging method, I am specifying current start row index of the records and maximum rows per page.

Here, When we are clicking the page number link, the page is not being posted back instead the same page is being redirected to server with pageid querystring and its value. As ListView and DataPager control is attached with each other so ListView control is sensing the pageid and binding only those records that is valid for that page. So even if ViewState is false for your entire page, pagination works smoooothly. As clicking on the page number links redirects to the page with different querystring value so SEO robots also understand it and crawl through all the page number links.

Thanks to QueryStringField attribute of asp:DataPage control to give bunch of benefits in such an easy way !!!

Conclusion