The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

One of the new controls in ASP.NET 3.5 that I think will be very popular is the <asp:ListView> control.  The ListView control supports the data editing, insertion, deleting, paging and sorting semantics of higher-level controls like the GridView.  But - unlike the GridView - it provides you with complete control over the html markup generated. 

The ListView control, when combined with the new Web Designer and rich CSS support in VS 2008, enables you to build much cleaner HTML UI.  Over the next few weeks I'll be putting together several blog posts that show off how you can use it.

Building a Products Catalog Page

For today's blog post we are going to start simple and just build a basic product catalog listing page like below:

This products.aspx page will take a Catalog index in the URL, and use LINQ to SQL to retrieve and display product information.  We will also enable paging navigation at the bottom of the product listing (and do all of the paging operations in the database - so that only 6 products at a time are retrieved from the database). 

The HTML markup output from the server will be 100% CSS based (no tables or inline styles). 

Step 1: Defining out Site Layout with Nested Master Pages

Before we start working on our product page, we'll first want to define the overall UI and layout structure for our site.

If you are "design challenged" like me, one approach you might want to take with a new site is to get started by using one of the free HTML site templates that you can download from these two sites: http://www.opensourcetemplates.org/ or http://www.oswd.org/.  The templates on these sites are pure HTML (meaning you can use them with any server-side programming technology), and are built using clean CSS and XHTML markup.  For this blog post I decided to go with the "TerraFirma" template here.

After I downloaded the template, the first thing I did was to create a root "Site.Master" Master Page that defined the overall layout structure for the site.  I then created a few nested master pages to define different column style layouts ("SingleColumn.master" and "TwoColumn.master").  VS 2008 now has great support for creating and using nested master pages that makes doing this easy.  You can read about how to define and use them in my earlier VS 2008 Nested Master Page Support blog post.

Once we have created our master pages layouts, we can then create a new product catalog page for the site that is based on the single-column nested master page (click below for a full screen picture):

Notice above how we can edit the page using the new VS 2008 Split View mode feature.  Above I'm using the "Vertical Split View" option so that I can see both the source and design view on a wide-screen monitor.  You can learn how to enable this in my earlier Enabling Vertical Split View in VS 2008 blog post.

Step 2: Defining our CSS Rules using Mock HTML UI

When it comes to defining our product UI for the page, there are a couple of different approaches we can use.  One would be to start by writing code to generate some dynamic data UI, and then work to make it pretty.  Another approach we could take would be to start by mocking up the HTML UI first, and then once we are happy with it write the code to make it dynamic.  For this blog post I'm going to take this second approach.

To start let's just add a standard <ul><li> list of product content into the page:

As you can see above, this <ul> list looks pretty unattractive, and obviously not like what we want our product listing page to look like.  To make it more attractive, we'll use some of the new CSS editing features I covered in my earlier VS 2008 Web Designer and CSS Support blog post.

Specifically we'll want to open the new "Manage Styles" tool window in VS 2008 (you can open this by selecting the Format->CSS Styles->Managed Styles menu item):

The manage styles window provides an easy way for us to see all CSS rules currently in our CSS stylesheet.  It also enables us to quickly lookup CSS selector values, refactor css rules across stylesheets, and create new rules. 

We can create a new CSS rule for our product listing by selecting the "New Style..." link in the "Manage Styles" window.  This will bring up a dialog that enables us to choose where we want to define the CSS rule, and configure what settings we want for it.  For this sample we'll name the CSS selector ".productslist li" and select the "Define in existing style sheet" option to add it to the external stylesheet we already have for our application:

We can then hit "ok", and return back to source mode to assign the CSS rule on our <ul> list (note how VS 2008 now provides CSS intellisense in source view):

Currently our CSS rule doesn't have settings assigned to it, so our <ul> list will still look the same as it did before.  We can change that by assigning some CSS settings.

There are a couple of ways we could set these CSS settings: 1) open up the CSS stylesheet and set them in source mode, 2) use the manage styles dialog we saw before to set them, or 3) use the new CSS Properties Window to edit the CSS rules in real-time within the designer.  We can bring up the CSS Properties Windows via the View->CSS Properties menu:

When you select an element either in source-view or design-view, the CSS Properties Windows will list all of the CSS rules that apply to it.  The "Applied Rules" list at the top of the CSS Properties window indicates the precedence order of cascading rules.  The CSS properties list below it then shows all of the setting values assigned to that element. 

The "target rule" drop down in the style application toolbar (circled in red above) indicates which CSS selector a change in the CSS Properties window will be assigned to.  In the example above our .productlist li rule is the CSS selector we currently have selected - which means as we set values in the CSS Properties window they will be persisted under that rule name in our external CSS stylesheet.  No style settings will be persisted inline the HTML page

Let's now make some changes to our "productlist li" CSS rule.  First we'll change the layout display mode to be "inline":

We'll then want to float each <li> to the left:

And lastly we'll set the bottom and left margin of each <li> element to be 15px to space out the products nicely:

Notice how when we are done no inline styles have been saved in our HTML page:

Instead they've all been cleanly saved under our "productlist li" CSS selector in the external CSS stylesheet:

Now all that remains is for us to replace the static HTML with some dynamic data coming from a database.

Step 3: Defining our LINQ to SQL Data Model

We'll use LINQ to SQL to retrieve our product data from the database.  LINQ to SQL is a great new ORM (object relational mapper) implementation built into .NET 3.5.  You can learn more about it from my on-going LINQ to SQL blog series (more posts in it coming soon):

We'll use the Northwind sample database for our product data, and define our data model classes in the LINQ to SQL ORM designer like so:

Once we have our LINQ to SQL data model defined, we are ready to use the <asp:listview> control and bind the data to it.

Step 4: Convert our HTML Mock UI to use the <asp:ListView> control

The <asp:listview> control is a template-driven control.  The control itself outputs no "built-in" UI, nor any actual HTML markup.  Instead, you can define whatever markup *you* want displayed using the below templates:

  • LayoutTemplate
  • ItemTemplate
  • AlternatingItemTemplate
  • SelectedItemTemplate
  • EditItemTemplate
  • InsertItemTemplate
  • EmptyItemTemplate
  • EmptyDataTemplate
  • ItemSeparatorTemplate
  • GroupTemplate
  • GroupSeparatorTemplate

The first two templates in the list above - LayoutTemplate and ItemTemplate - are the most common ones you'll end up using.  The <LayoutTemplate> template allows you to define the outer container/wrapper of your data UI.  The <ItemTemplate> template then allows you to define what each item in the list should look like. 

Within the <LayoutTemplate> you then define an "ItemContainer" control that indicates where you want the <asp:ListView> control to dynamically add the <ItemTemplate> items into the output markup.

To see how this works in action, we could take our mock products HTML UI:

And replace it with a <asp:listview> that can dynamically generate the exact same markup output like so:

Notice above how I am using a <asp:placeholder> control in the <LayoutTemplate> to indicate where I want to add in my items in the list.  I could use other controls instead as the itemContainer if I wanted to - but by using an <asp:placeholder> control as the itemContainer I will prevent any id values or extra markup being generated.

Notice above how I've also defined an <EmptyDataTemplate>.  This will display instead of the <LayoutTemplate> if I assign an empty sequence of data to the ListView.  This will avoid us inadvertently displaying an empty <ul></ul> element in the event that there are no products in the catalog specified.   

Once we've defined our template above, we can write some code in our code-behind file to retrieve our product data using LINQ to SQL, and bind our ListView with it:

VB:

C#:

And now when we run the page and supply a valid categoryid as a querystring argument we'll see our products dynamically pulled from the database:

If we try a category that doesn't contain products, we'll get our empty template message:

If you do a "view source" on the products page in the browser, you'll see that the markup generated from our ListView control is the same as what our static HTML was:

There are no ID elements or inline styles generated.  We had complete control over every HTML element and attribute generated.

Step 5: Using a <asp:LinqDataSource> control instead of writing code

In our previous step above we wrote procedural LINQ to SQL code to databind our <asp:ListView>.  This obviously works, and provides a great deal of control over the logic executed.

Another option you can alternatively use is a declarative ASP.NET datasource control.  All of the ASP.NET 2.0 datasource controls (SqlDataSource, ObjectDataSource, AccessDataSource, XmlDataSource, SiteMapDataSource, etc) work with the ListView.  You can also use the new <asp:LinqDataSource> control with it.  For more information on the LinqDataSource, check out my previous LINQ to SQL Part 5: Binding UI using the ASP:LinqDataSource Control blog post.

To use the <asp:LinqDataSource> in the above sample, we'll first delete the previous code we wrote in the code-behind file, and then click on the <asp:ListView> control in the designer and select the "Choose Data Source->New DataSource" option.  We'll pick the "LINQ DataSource" option in the data source dialog, and then bind to the Northwind data model we created earlier. 

We can then choose to bind the ListView against the "Products" entity collection in our Northwind data model:

We can then hit the "Where" button to configure a LINQ filter based on the "category" value in the querystring (we could alternatively bind the value from a form value, cookie, session value, another control, etc):

When we press the "ok" button the ListView's DataSourceID will be set to a new <asp:LinqDataSource> in the page:

And now without us having to have any code in the application we have a product listing with custom HTML UI databinding against our LINQ to SQL data model.

Step 6: Enabling Server Side Paging using the <asp:DataPager> control

Our last step with this sample will be to enable paging support over the products data.  Specifically, we only want to display 6 products at a time on the page, and provide a nice page number UI to allow users to navigate forward and backwards over our product sequence.

One of the other new controls in ASP.NET 3.5 is the <asp:DataPager> control - which makes data paging scenarios with the ListView control pretty easy.  You can drop it anywhere you want on a page, and set its "PagedControlID" property to point at the ListView, and its "PageSize" property to indicate how many items in the ListView you want displayed at a time:

The <asp:DataPager> will then output navigation UI for your ListView:

And then if you click the "2" link in the paging UI above it will show you the remaining 5 products in the category:

The <asp:LinqDataSource> automatically uses LINQ to SQL's built-in support for server-side data paging to ensure that only 6 products (because the PageSize is 6) are ever retrieved from the database at a time.  This means that your application and database will scale even if you have thousands of products in a specific category.

Disclaimer: The <asp:DataPager> in Beta2, though, does have some limitations in that it can't by default be driven off of a querystring value - which makes it not very SEO friendly.  I'll cover how to fix this and support a querystring index in a future blog post.

Summary

Hopefully the above walkthrough provides a good first look overview of how to use the new <asp:ListView> control.  You will find that this control provides you with complete control over the markup output sent down to a client - while still providing rich data paging, editing, deleting and insertion semantics.  I'll cover many more of these scenarios (along with the ListView's cool grouping functionality) in future blog posts.

Click here to download a copy of the above sample in order to try it out on your own machine.

Hope this helps - and have a great weekend!

Scott

Published Friday, August 10, 2007 1:16 AM by ScottGu

Comments

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 4:39 AM by denni

Yep, this ListView stuff is so cool. I was really disappointed when I found that GridView was the only control that supported paging. I hate how my simple lists were wrapped in tables just to use the automatic paging feature provided with GridView.

I used to create a custom control like ListView (a combination of Repeater and custom paging) if I wanted to avoid the tables generated by GridView. ListView should have come earlier, but better late than never.

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 5:02 AM by Thomas

Nice example (and nice control!) - but you've forgotten to set the alt-attribute for the images. Without this page will never be rendering valid xhtml code ;-) ;-) ;-)

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 5:49 AM by NMarian

ListView seems to be very useful control, I think it will be more accepted than DataGrid or GridView. Will be also editing features explained on this blog?

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 6:15 AM by Anders

Thanks Scott! Complete control over the html markup generated is great!

When IE7 supports CSS in a better way life will be much easier. Do you know if this will happen any time soon?

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 6:30 AM by Karl J.

I played today a bit with the linq data source and the listview. I like the new possibilities a lot. ´

But I also had some problems:

When I define a data model class in the designer I always put the complete table(s) in there.

I discovered problems with a little bit more complex sets of tables. Is there a limit how many tables and how many  assciations a data context object can have? I had problems with 7 tables and 7 associations. The data context object simply didn't show up in the LinqDataSource, but it did, when put some these away...

Normally we used only a small part of the fields of a table in the gridview, which was typically a kind of main view in our projects. I was very quick with the gridview using this "edit columns" thing and I am now missing this function with the listview control.

I like it a lot, that the LinqDataSource doesn't have the problems of the ObjectDatasource, if you do not use all the fields of a table or change something in the fields. But I am missing support for update and insert in the UI version of the linq data source. And even worse: If I don't use the "select *" option I cannot use update, insert, and delete at all. I didn't try so far to do this without the UI. Is this possible there and what are the rules exactly? When can I use one LinqDataSource for select, update, insert, delete?

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 6:58 AM by Martin Ennemoser

Regarding Step 5: I once tried to use a LinqDataSource in combination with a Where clause for partial string matching. But it doesn't seem to work because there is no way to use an operator similar to SQL 'LIKE'. I also tried <ParamName>.Contains but it says that Contains is not a member of String. Any solution for this?

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 7:31 AM by Mike

Well, it's taken some time to get to the point where we have 'full' control. The only thing missing, and you have noticed it, is paging using the querystring. But it's good to finally have your markup be left intact, have intelligent application of CSS, have controls that render _exactly_ as you, the developer, wants.

Looking back at VS 2002, I remember how the code behind had this piece of generated code that would sometimes disappear, and how it would always mangle your HTML when you switched to Design View and back.

One thing that I've often wondered: was this always on the radar for Microsoft, even during .NET 1.0 and Visual Studio 2002, but you just never had the time?

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 8:47 AM by sam

I'm quite happy that you guys are now starting to examine how to produce better html.  Has the menu control been improved?  In the past when I've been dealing with 100+ items (3+ hierarchy levels) in the menu control it's been pretty useless.

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 9:28 AM by John Smith

I feel ListView is comparable to FormView

in the sense that GridView is comparable to DetailsView

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 9:31 AM by Jeff

So will this listview and some of the LINQ stuff be supported in the Express Editions of VS 2008 or will it only be available in the full version of the software?

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 9:41 AM by Yash Patel

Scott - Thanks for providing us really good and usefully articles.

Keep on updating us with new features!!.

Thanks

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 10:07 AM by Josh Stodola

Golly, doesn't get much simpler than that.  You guys are doing great work over there, I can't wait for the release.  And YOU have a great weekend, too!!

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 10:16 AM by Vikram

that was brilliant. Can you also show one small example where we use Objectdatasource with the LINQ to SQL and also use a anonymous types

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 10:19 AM by Sean Scally

Scott, thanks so much for this. This is just what I've been looking for. I'd really like to see more on this, including the other templates in the ListView control and things like table layouts using it.

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 10:57 AM by brian

really.. really nice tutorial.. on a really cool new control.

i can't wait for vs2008

keep up the great work scott!

-brian

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 11:18 AM by Brian Perry

Very nice. I especially like how clean the code is.

I have a small comment - I'd like to see more code samples using best practices - so adding alt text, using ems for font sizes, etc. Not that I want to cloud the issue, but often something that's simple in concept becomes much more difficult when you follow just the core best practices required. It would give a chance to show that you've taken those scenarios into account, otherwise it's hard to really believe that .NET can be taken seriously, instead of just a drag and drop developer's tool that kicks the user in the kahooie.

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 11:23 AM by Egil Hansen

Thanks for the tutorial Scott.

I've been using the ListView control the last few days, and really like it. A questions though:

I'm using a business layer and the ObjectDataSource as the data source for the ListView, and are having a little trouble getting sorting to work. I my BLL I have a method used by the ObjectDataSource for selecting, which takes a sort expression (string sortExpression - like in the old 2.0 days :)), but I can't figure out how to query my DataContext with the sort expression...

var product = p from northwind.Product

             orderby sortExpression

             select p;

... doesn't work.

Could you give an example of how to do this, also in regards to sort direction.

Thanks, Egil.

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 11:50 AM by Leniel Macaferi

Hello Scott,

I’ve run the asp:ListView control example and I found that in the Default.aspx in the Products list section the links point to products.aspx?categoryid=#" and the expected is category, so the list of product won't be showed.

I also had to delete the Northwind.dbml file and add a new one because the database connection was refused for the user DEFAULT/Leniel.

Thank you very much for this excellent blog. You at Microsoft simply rocks.

I'm finishing my graduation course in Computer Engineering here in Brazil and my monograph is going to be about LINQ. I love this technology!

Leniel

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 12:13 PM by elixir

your platforms are always improving towards better experience

that's why i stick with ms

good job!

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 12:43 PM by Timothy

Thanks for yet a another great tutorial.

You've been my number one resource for ASP.NET 3.5 and LINQ lately.

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 12:55 PM by Boris Yeltsin's Zombie

Thanks Scott. I especially like the "Empty" template feature.

Very slightly off-topic. Is it possible to override the rendering of an asp:content tag?

I'd love to be able to get the number of tabs in front of the asp:contentplaceholder control and then put that number of tabs in front of every line of HTML output from the asp:content control.

That way the output HTML would all be nicely formatted and indented as it is in the actual ASPX markup.

Thanks!

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 3:21 PM by Ashok Padmanabhan DVM

I am kind of surprised it took till v3.5 to have a control like the datapager. I had rolled something similiar some years ago using the pageddatasource class and would just point this at datalist or repeater.

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 3:24 PM by johnny

Finally paging without the datalist paging headaches.  Thank you.

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 4:57 PM by Ken

Will this control work when EnableViewState is off? If it's turned off now, pager won't work. And I hate when size of ViewState increase, if the purpose is only viewing data.

Ken

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 5:22 PM by ScottGu

Hi Ken,

>>>>>> Will this control work when EnableViewState is off? If it's turned off now, pager won't work. And I hate when size of ViewState increase, if the purpose is only viewing data.

Unfortunately this is a bug with the DataPager in Beta2.  It will be fixed for RTM.

Thanks,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 5:23 PM by ScottGu

Hi Leniel,

>>>>> I’ve run the asp:ListView control example and I found that in the Default.aspx in the Products list section the links point to products.aspx?categoryid=#" and the expected is category, so the list of product won't be showed.

I actually copied the default.aspx page from an old sample I'd written which is why I hadn't caught that.  I posted an updated version with the fix.

Thanks,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 5:28 PM by ScottGu

Hi Egil,

>>>>>>>> I've been using the ListView control the last few days, and really like it. A questions though:  I'm using a business layer and the ObjectDataSource as the data source for the ListView, and are having a little trouble getting sorting to work. I my BLL I have a method used by the ObjectDataSource for selecting, which takes a sort expression (string sortExpression - like in the old 2.0 days :)), but I can't figure out how to query my DataContext with the sort expression...

One approach you can use is to use the "DynamicQuery" LINQ library that is included as part of the C# samples kit with VS 2008 (Daniel has a good pointer on how to access it here: www.danielmoth.com/.../linq-samples.html).  Among other things, this gives you the ability to define LINQ expressions as strings and apply them.

Hope this helps,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 5:30 PM by ScottGu

Hi Vikram,

>>>>> Can you also show one small example where we use Objectdatasource with the LINQ to SQL and also use a anonymous types

What you'll want to-do with ObjectDataSource is to return back strongly-typed collections.  For example:

  public List<Product> GetProductsByCategory(int category) {

  }

LINQ doesn't require you to use anonymous types - and you can easily type the return result like above to make it work great with the ObjectDataSource.

Hope this helps,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 5:31 PM by ScottGu

Hi Jeff,

>>>>>>> So will this listview and some of the LINQ stuff be supported in the Express Editions of VS 2008 or will it only be available in the full version of the software?

All of the features I showed above (Listview, LinqDataSource, the CSS design and split-view features in the tool, etc) are fully supported in the free Visual Web Developer 2008 Express edition.

Hope this helps,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 5:34 PM by ScottGu

Hi Martin,

>>>>>>> Regarding Step 5: I once tried to use a LinqDataSource in combination with a Where clause for partial string matching. But it doesn't seem to work because there is no way to use an operator similar to SQL 'LIKE'. I also tried <ParamName>.Contains but it says that Contains is not a member of String. Any solution for this?

I don't think you can do the like syntax declaratively with the LinqDataSource control.  But what you can do is handle the "Selecting" event on the LinqDataSource and specify the custom LINQ expression there.  I'll do a blog post in the future that demonstrates how to enable this.

Thanks,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 10, 2007 5:59 PM by Karl J.

I tried a little bit more and learned, that the codebehind editing of the Linq-Queries right now goes far beyond of the possibilities of the LinqDataSource. Is there a way of connecting a codebehind databinding to the UI of the RAD-Controls like Gridview and Listview to be able to access their properties in the design view?

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Saturday, August 11, 2007 6:22 AM by Matt Brooks

Scott,

One thing that immediately stood out to me was the reliance upon the fixed control ID of 'itemContainer' within the LayoutTemplate. Why go to all the effort of creating an extremely flexible control (with regards to layout) but force an ID upon the page developer? In your example you have used an asp:Placeholder that doesn't render any UI but what if you were using an asp:Panel? Then the panel would be rendered in the response markup as a DIV element with an ID attribute the page development may not want.

Of course there are ways around my example - such as nesting elements in the same way you have. However I can't help but think how complicated would it be to add a property to the asp:ListView control (say 'LayoutTemplateItemContainerID'). The asp:ListView control could then look for a control with this ID within its LayoutTemplate at runtime and add the templated controls to its control collection. If a value is not supplied for this property the templated controls could simply be appended to the controls (if any) within the LayoutTemplate. This would support the flexibility that the rest of the asp:ListView's functionality provides, without forcing any particular naming conventions on developers.

I have not had any time to actually put the control into use or indeed read the current thread of comments for this post, so I apologise if this is supported or has been covered already!

I look forward to your comments.

Regards,

Matt

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Saturday, August 11, 2007 9:20 AM by Martin Ennemoser

Thanks for your tip regarding the Selecting event, Scott. I revisited the scenario today and found out that it can also be solved by not using the Selecting event. E.g, I can specify "LastName.Contains( @Search )" as the Where clause, as long as I make sure to also specify ConvertEmptyStringToNull="false" in the Where parameter. Otherwise the (slighty confusing) error "No applicable method 'Contains' exists in type 'String'" is displayed.

One thing that would be nice though is to enable arbitrary Where clauses in the wizard by default. Currently it's limited to a few operators so that the scenario above is only possible in markup. Oddly enough, once an arbitrary Where clause is specified in markup, the Configure Data Source dialog displays an editable text field instead of the limited wizard.

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Saturday, August 11, 2007 11:42 AM by Ben Hayat

Hi Scott;

A few questions for you. All questions are related to ASP.Net

a)Can you comment on what would be the disadvantage of using datasource?

When should developer use straight linq and when should he use datasource?

b) What are the guidelines for how long to keep datacontext live?

c) Is it better to have one large datacontext with all the tables in it or is it better to have multiple datacontext for different situations?

d) Are there any up-to-date docs on the "DOs" and "Don'ts" with datacontext?

Thanks for your attention!

..Ben

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Saturday, August 11, 2007 11:57 AM by Vikram

Hi Scott,

Thanks for the answer.But just to clearify myself fully. This means that we cannot use both objectdatasource and annoymous type with linq.

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Saturday, August 11, 2007 12:06 PM by ScottGu

Hi Matt,

>>>>>>> One thing that immediately stood out to me was the reliance upon the fixed control ID of 'itemContainer' within the LayoutTemplate. Why go to all the effort of creating an extremely flexible control (with regards to layout) but force an ID upon the page developer? In your example you have used an asp:Placeholder that doesn't render any UI but what if you were using an asp:Panel? Then the panel would be rendered in the response markup as a DIV element with an ID attribute the page development may not want.

The good news is that that ID used for the itemContainer is configurable.  There is both an ItemContainerID and GroupContainerID property on <asp:listview> that you can set to override the default names to use.  That way you can use any ID value you want.

Also - if you use an <asp:placeholder> control then no ID is rendered at all - which gives you maximum flexibility over markup.

Hope this helps,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Saturday, August 11, 2007 12:08 PM by ScottGu

Hi Martin,

>>>>> Thanks for your tip regarding the Selecting event, Scott. I revisited the scenario today and found out that it can also be solved by not using the Selecting event. E.g, I can specify "LastName.Contains( @Search )" as the Where clause, as long as I make sure to also specify ConvertEmptyStringToNull="false" in the Where parameter.  One thing that would be nice though is to enable arbitrary Where clauses in the wizard by default. Currently it's limited to a few operators so that the scenario above is only possible in markup. Oddly enough, once an arbitrary Where clause is specified in markup, the Configure Data Source dialog displays an editable text field instead of the limited wizard.

Cool - I'm glad you got it working!  I'm not sure why the edit box didn't display on first pass through.  I haven't checked yet to see if this is fixed in the RTM branch - I will forward to the team to see if they can do this.

Thanks,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Saturday, August 11, 2007 12:10 PM by ScottGu

Hi Vikram,

>>>>>> This means that we cannot use both objectdatasource and annoymous type with linq.

You'll need to declare some return signature from the methods in the class that the ObjectDataSource points at.  You can either declare your own class types (the same approach that I described in my post on LINQ to XML: weblogs.asp.net/.../using-linq-to-xml-and-how-to-build-a-custom-rss-feed-reader-with-it.aspx).  Or alternatively you can declare the return types to be Object or List<object>.  Either approach should I think work with anonymous types.

Hope this helps,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Saturday, August 11, 2007 1:02 PM by ScottGu

Hi Ben,

>>>>>> a)Can you comment on what would be the disadvantage of using datasource? When should developer use straight linq and when should he use datasource? b) What are the guidelines for how long to keep datacontext live?  c) Is it better to have one large datacontext with all the tables in it or is it better to have multiple datacontext for different situations? d) Are there any up-to-date docs on the "DOs" and "Don'ts" with datacontext?

We'll get some more of this documentation out as we get closer to RTM.  In general, I think the LinqDataSource control is a good option for scenarios where you want to enabling two way editing, paging, deleting and sorting with UI controls.  It encapsulates the code needed to handle postback scenarios, and works well with AJAX.

You can then use the LinqDataSource control's "Selecting" event to have even more control over the actual LINQ expression used.  You could use this, for example, to call a business object that returns back a sequence of objects based on some business logic.  

In terms of DataContext lifetime, you typically want to scope the lifetime to encompass all of the operations you will be doing together.  For example, if you are retrieving customers, orders and order details, you'll want to use a single DataContext for all of them (since these object are related), and you'll want the ability to make updates against all of them at the same time.

Hope this helps,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Saturday, August 11, 2007 2:05 PM by Ben Hayat

Scott; Thank you for the comments on DataSource and DataContext;

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Saturday, August 11, 2007 9:57 PM by Vikram

Hi Scott

Thanks. The idea did worked. I think being able to pass a list of object would be great Idea as this can increase the potential to what what can I do very much

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Sunday, August 12, 2007 2:13 AM by How can I page if I do not use a datasource

HI,how can I page ListView use then DataPager contril if I do not use the DataSource control.

thanks

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Monday, August 13, 2007 10:04 AM by Colin Dekker

Hey Scott,

I tried running the sample 'out of the box' (open website and press F5), but got a "Child nodes not allowed" error on the providerOption tag in the web.config.

I'm running VS2005 Team Edition for Developers and Visual Studio 2008 Beta 2 side by side.

<compiler language="c#;cs;csharp" extension=".cs" compilerOptions="/warnaserror-" warningLevel="4" type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">

  <providerOption name="CompilerVersion" value="v3.5"/>

</compiler>

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Monday, August 13, 2007 10:32 AM by ScottGu

Hi Colin,

>>>>>> I tried running the sample 'out of the box' (open website and press F5), but got a "Child nodes not allowed" error on the providerOption tag in the web.config.

That error sounds a little like .NET 3.5 didn't install on your machine for some reason.  Can you try creating a new web-site/web-project with VS 2008 on the machine and see if that works (also - does the toolbox in VS 2008 have ASP.NET controls or is in blank)?  I blogged about a few common installation issue with .NET 3.5 here: weblogs.asp.net/.../fixes-for-common-vs-2008-and-net-3-5-beta2-issues.aspx

Thanks,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Monday, August 13, 2007 11:17 AM by overthetop

SUPER Scott ;))) - nice article

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Monday, August 13, 2007 4:38 PM by kdpo1990

i'm hooked on your posts.

Thank

-Albert

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Thursday, August 16, 2007 9:23 PM by Jon

When I drag <asp:ListView> control to the WYSIWYG editor,the message appear --<The operation could not be completed. Invalid FORMATETC structure.>

Why?

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 17, 2007 2:02 AM by ScottGu

Hi Jon,

>>>>>> When I drag <asp:ListView> control to the WYSIWYG editor,the message appear --<The operation could not be completed. Invalid FORMATETC structure.>

Can you send me an email with details about this (scottgu@microsoft.com)?  I will then loop in some folks from the team to investigate and figure out what is going wrong.

Thanks,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Friday, August 17, 2007 2:02 AM by ScottGu

Hi Adam,

I'll be covering some of these editing scenarios shortly!

Thanks,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Wednesday, September 5, 2007 9:06 AM by Moiz

Thanks Scott for the nice and informative tutorial.

I'm a newbie in the field of web programming, i started learning ASP.NET 2.0, but thanks to nice people like you i can wait for the new version of .net to release.

PLEASE POST THE PART 2 OF THIS SERIES.

MANY PEOPLE LIKE ME ARE WAITING TO READ THE USEFUL STUFF YOU WRITE.

With regards, Moiz.

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Sunday, September 9, 2007 8:41 PM by pete

We now have one control at least where we have control over the output. If Microsoft isn't willing to ensure that the webcontrols produce accessible compliant code, it's the very least that should be done. Now can you please outline your plans for MVC support?

Pete

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Monday, September 10, 2007 8:51 AM by ScottGu

Hi Pete,

>>>>>>> Now can you please outline your plans for MVC support?

We'll be talking about our new MVC framework for ASP.NET a little later this year.

Thanks,

Scott

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Tuesday, September 18, 2007 1:14 PM by I meet a strange problem in using DataPager,can you help me?

Dear Scott:

    I use the the DataPager with a ListView in a project.But when paging,it need to be clicked twice.I found DataPager had no atrribute about this.I don't know how to fixed this.

The aspx code is the same as the code in your sample. I'm confused,could you give me a hand? Thank you!

Happy Every Day!

# re: The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)

Wednesday, September 26, 2007 7:45 PM by Erik

Re the comments of August 16 & 17 by Jon & ScottGu

I have same issue: The operation could not be completed. Invalid FORMATETC structure.

This happens when dragging any control on to the page. Any known solutions yet guys? Did you fix your problem?

thanks,

-erik

Can you send me an email with details about this (scottgu@microsoft.com)?  I will then loop in some folks from the team to investigate and figure out what is going wrong.