20 acres ~ 360 degree mountain top views ~ Log home ~ $799,000

Orcas - ListView and DataPager fun!


The next version of Visual Studio will bring all kinds of new goodies.  One is .NET 3.5 (maybe 4.0 by then) which will include two new controls for ASP.NET developers, the ListView and DataPager controls.  My first look at these controls had a few errors, but I quickly go the idea.  Here is the example I tried, which simply reads my RSS feed from http://blog.silverlightcity.com and displays the items.

The first step is to create the web form and then drag a DataPager control and the ListView control followed by another DataPager control.  I configured the ListView control to use an XMLDataSource which I set the DataFile property to my RSS feed and the xpath property to "/rss/channel/item".  That is all that is required for the data source to read all the items in my RSS feed.

The next step is to set the layouttemplate and the item tempate for the Listview control.  The layouttemplate specifies the overall look where the items will be embedded.  Think of the layouttemplate as a master page (nothing to do with a master page, but functions like one as far as the ListView is concerned by specifying the look of the control) and the itemtemplate as the formatted content that will be inserted into the area specified in the layouttemplate.  The itemtemplate governs the appearance of items and the layout dictates the look of the container that holds the items.   Here is the code for the ListView: 

<asp:ListView ID="ListView1" runat="server" DataSourceID="XmlTheFeed" ItemContainerID="DataSection" >

<layouttemplate>
<br /><br />We are here:<br /><br />
<div id="DataSection" runat="server"></div>
</layouttemplate>

<itemtemplate>
<h2><a href='<%# XPath("link") %>'><%# XPath("title") %></a></h2>
<p><em>Published <%#XPath("pubDate")%></em></p>
<p><%# XPath("description") %></p>
<br />
</itemtemplate>

<ItemSeparatorTemplate>
<div style="height:0px;border-top:dashed 1px #ff0000"></div>
</ItemSeparatorTemplate>

</asp:ListView>

<asp:XmlDataSource ID="XmlTheFeed" runat="server" DataFile="http://blog.silverlightcity.com/Rss.aspx"
XPath="/rss/channel/item"></asp:XmlDataSource>

Notice the use of the "DataSection" label.  It is first used in the "ItemContainerID" property of the ListView and then again as the ID of the div I made in the layouttemplate section.  Also notice the div mentioned, is set to RunAt="Server".  This is what specifies "where" the list of items will appear.  In this example, all items will be inserted into the div that has the "DataSection" ID.  So, you can see the layouttemplate for the control is a type of skin and the ItemContainerID property of the control specifies the control where the items are to be inserted.  Be sure the control where you want the items inserted is flagged to runat="Server".

With the above code on a page, you should be able to display the RSS feed.  If there is an error make sure the register line was generated at the top of the page:

<%@ Register assembly="System.Web.Extensions, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.WebControls" tagprefix="asp" %>

Okay, at this point we are running great and the feed lists out like we desired.  Now it is time to hook up those two DataPagers we dropped on the page above and below the ListView control.I set the other pager to the same values and that gives me the paging navigation at the top and bottom of the page.  Both can work on the ListView at the same time.

The first step is to set the property "PagedControlID" to the ID of the control we wish this pager to page the data.  In our case we set it to "ListVIew1".  While there I set the PageSize property to "5".

The next step is to select the type of display you wish for the pager.  You can select one of two default types (using the arrow on the DataPager control in design view to select it our build the list of fields by hand.  Here is what the pager would look like in code:

<asp:DataPager runat="server" PagedControlID="ListView1" PageSize="5">
 <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>

Well, that is pretty much it.  It is not too much work and you can have paged data in a list! 

--- Update ---

After a bit of browsing, I found that the ListView has a number of features, including the ability to use groups giving you a more tiled look (or however you configure it) and edit abilities.   There is more info on this at:

http://blogs.msdn.com/kashif/archive/2007/ 01/30/listview-presentation-slides-and-samples.aspx

The big major drawback to using these controls on a Interent based site is SEO issues.  Since the controls work on postbacks and not url parameters, we are still stuck in the same situation where search engines will not be able to index the pages of data.  Since the DataPage is an individual component though, maybe in the future we will see a SEO DataPager that will add this functionality.

Another issue as is with most ASP.NET default server controls is the size of the ViewState.  Oh well, there are still ways around that!

posted on Monday, June 04, 2007 3:32 AM
Filed Under: Web Dev/ASP.NET/C#   ** All Categories  
<< You should not miss Linq to Sql.. | Home | Linq - Way too easy! >>

Comments

Gravatar
# re: Orcas - ListView and DataPager fun!
Posted by catalin
on 1/2/2008 6:13 AM
hi,
how affects DataPager the operation to databse? it makes it slower or is like it should be?
Gravatar
# re: Orcas - ListView and DataPager fun!
Posted by Thinker
on 1/3/2008 3:59 AM
Well, it would depend on what type of datasource you are using. If you use a LinqDatasource, then you need to watch out for delayed loading which can cause a query to the database for each row along with each page. If the datasource is handled properly, it should be quite zippy.
Gravatar
# re: Orcas - ListView and DataPager fun!
Posted by Sameer
on 2/17/2008 11:38 PM
Nice article.Got something new.
I tried to extend it furthur by applying the IPageableItemContainer interface to the ReorderList control.But the DataPager dosent show up on the page. Can you provide me with a demo to show how to apply dataPager to the databound controls that do not implement IPageableItemContainer?
Gravatar
# re: Orcas - ListView and DataPager fun!
Posted by Thinker
on 2/18/2008 9:45 AM
Sameer, I have not tried to build my own IPageableITemContainer calls into a control, so not much help. You might use Reflector.exe and look at the source for datapager to see if there is something you are missing.
Gravatar
# re: Orcas - ListView and DataPager fun!
Posted by Sameer
on 2/27/2008 9:51 PM
Thanks for your suggestion Moore.
I used the Lutz reflector to see the source of ListView and tried to implement the similar one for my custom reorderlist. It has a lot of additional methods and properties . I copied them all, modified some of them to work with the reorderlist and run it and debugged it with utmost care. All the methods are called and executed without any exception. But in vain.
I am still at the same place where I began with. The DataPager is still not displayed.
I would like to request you to try with my scenario.
e-mail me if you can on the above mentioned id.
Gravatar
# re: Orcas - ListView and DataPager fun!
Posted by Thinker
on 2/27/2008 11:11 PM
You probably could have wrote a datapager of your own in that amount of time ;)
Gravatar
# re: Orcas - ListView and DataPager fun!
Posted by Sameer
on 2/28/2008 4:14 AM
Thats really funny.. Thanks
Gravatar
# re: Orcas - ListView and DataPager fun!
Posted by Sameer
on 2/28/2008 4:25 AM
I came across one thousand tutorials on the net describing how to use DataPager with ListView ( probably pirated copies of the msdn tutorial). But none of them have tried using it with other databound control.
I praise these guys....

Here's a tip for you Moore. You need to study really hard today... :))
http://www.aspnetpro.com/adredir.asp?url=/PDF/Issues/aspJAN2008.pdf

Gravatar
# re: Orcas - ListView and DataPager fun!
Posted by Thinker
on 2/28/2008 6:24 AM
That was a nice article on the DataPager. When I was playing around with the DataPager, it was not SEO friendly, although they had a version that was which may be the same one that shipped with vs2008, but not for sure. Anyway, I typically use my own pager and control the paging manually. I still use the ListView all the time, but the DataPager is still on the shelf until a later time.

For me a simple web user control which handles all the main logic given the number of items, current item and number of items on a page which it then simply gives a first/next/previous/last buttons or links (depending on the pager I use) is enough for my needs. I one had one that actually contained a dropdown to select page (besides the buttons), but most of the time the button features is all I need. I have a member in my data layer that does the paging of data and returns class containing the max number of items along with the page of items depending on the page. It may be a little more work on each project, but it gives me complete control and only takes a few minutes to get going.

I am going over you email at the moment.
Post a comment










 

Please add 7 and 4 and type the answer here: