ListView and DataPager in ASP.NET 3.5 Search Engine Optimization ( SEO ) Friendly
by David Hayden ( Microsoft MVP C# ), Filed: ASP.NET 3.5 Tutorials
There are new ListView and DataPager controls in ASP.NET 3.5 that help you clean up the HTML rendered in your pages as well as offer paging that are search engine optimization ( SEO ) friendly. You will find a lot of blog posts and articles on the web saying just the opposite, but many of these posts on the ListView and the DataPager were written during Visual Studio 2008 Beta.
The ListView is similar to the Repeater in that it allows one to define the layout of the HTML rendered to the browser, using various templates:
- LayoutTemplate - The root template that defines a container object, such as a table, div, or span element, that will contain the content defined in the ItemTemplate or GroupTemplate template. It might also contain a DataPager object.
- ItemTemplate - Defines the data-bound content to display for individual items.
- ItemSeparatorTemplate - Defines the content to render between individual items.
- GroupTemplate - Defines a container object, such as a table row (tr), div, or span element, that will contain the content defined in the ItemTemplate and EmptyItemTemplate templates. The number of items that are displayed in a group is specified by the GroupItemCount property.
- GroupSeparatorTemplate - Defines the content to render between groups of items.
- EmptyItemTemplate - Defines the content to render for an empty item when a GroupTemplate template is used. For example, if the GroupItemCount property is set to 5, and the total number of items returned from the data source is 8, the last group of data displayed by the ListView control will contain three items as specified by the ItemTemplate template, and two items as specified by the EmptyItemTemplate template.
- EmptyDataTemplate - Defines the content to render if the data source returns no data.
- SelectedItemTemplate - Defines the content to render for the selected data item to differentiate the selected item from other items.
- AlternatingItemTemplate - Defines the content to render for alternating items to make it easier to distinguish between consecutive items.
- EditItemTemplate - Defines the content to render when an item is being edited. The EditItemTemplate template is rendered in place of the ItemTemplate template for the data item that is being edited.
- InsertItemTemplate - Defines the content to render to insert an item. The InsertItemTemplate template is rendered in place of an ItemTemplate template at either the start or at the end of the items that are displayed by the ListView control. You can specify where the InsertItemTemplate template is rendered by using the InsertItemPosition property of the ListView control.
The source of the ListView Control looks a lot like the Repeater Control
<asp:ListView ID="ListView1" runat="server"
DataSourceID="ObjectDataSource1">
<AlternatingItemTemplate>
<tr>
<td>
<asp:Label ID="CompanyNameLabel" runat="server"
Text='<%# Eval("CompanyName") %>' />
</td>
<td>
<asp:Label ID="ContactNameLabel" runat="server"
Text='<%# Eval("ContactName") %>' />
</td>
<td>
<asp:Label ID="ContactTitleLabel" runat="server"
Text='<%# Eval("ContactTitle") %>' />
</td>
</tr>
</AlternatingItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="itemPlaceholderContainer"
runat="server">
<tr runat="server">
<th runat="server">
CompanyName
</th>
<th runat="server">
ContactName
</th>
<th runat="server">
ContactTitle
</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
<EmptyDataTemplate>
<table runat="server">
<tr>
<td>
No data was returned.
</td>
</tr>
</table>
</EmptyDataTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="CompanyNameLabel" runat="server"
Text='<%# Eval("CompanyName") %>' />
</td>
<td>
<asp:Label ID="ContactNameLabel" runat="server"
Text='<%# Eval("ContactName") %>' />
</td>
<td>
<asp:Label ID="ContactTitleLabel" runat="server"
Text='<%# Eval("ContactTitle") %>' />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Using a Table Layout is optional, of course, and not as search engine optmization friendly as other CSS-based options. The point being that you are in control and can define the HTML layout to your liking using the various templates, which is not something we could do with the GridView.
More importantly, however, is that you can hook a DataPager Control to the ListView for paging. You can set the DataPager to use a QueryStringField which will give you that search engine optimization friendly paging:
<asp:DataPager
ID="DataPager1"
QueryStringField="id"
PageSize="20"
PagedControlID="ListView1"
runat="server">
<Fields>
<asp:NextPreviousPagerField
ButtonType="Button"
ShowFirstPageButton="True"
ShowNextPageButton="False"
ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField
ButtonType="Button"
ShowLastPageButton="True"
ShowNextPageButton="False"
ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
By using a QueryStringField with the DataPager you get much more search engine optimiazation friendly links to the other pages as opposed to the javascript ones:
<span id="DataPager1">
<a disabled="disabled">First</a>
<span>1</span>
<a href="/WebSite/Products.aspx?id=2">2</a>
<a href="/WebSite/Products.aspx?id=3">3</a>
<a href="/WebSite/Products.aspx?id=4">4</a>
<a href="/WebSite/Products.aspx?id=5">5</a>
<a href="/WebSite/Products.aspx?id=5">Last</a>
</span>
I want to spend a bit more time with the ListView and DataPager Controls, but they look promising in a few other ways as well.
News Feed: David Hayden ( Microsoft MVP C# ), Filed: ASP.NET 3.5 Tutorials