MSDN Magazine - April 2008 - (Page 35)

ListView Tips and Tricks Dino EsposiTo I n last month’s issue, you were introduced to the ListView control, a new addition to the ASP.NET 3.5 control toolbox. To recap, the ListView is an enhanced version of the DataList control that provides more control over generated markup, support for paging, and full integration with the data source-based binding model. In this column, I’ll move beyond the basics of ListView templates and data binding to implement features that are fairly common in real-world pages but require some extra coding. You’ll see how to use nested ListView controls to create hierarchical views of data and how to extend the eventing model of the ListView by deriving a custom ListView class. In particular, I’ll refine the eventing model so you can use a different template for different groups of bound data items. For example, you’ll be able to use a different template for all data items in a data set that match some given criteria. This will go far beyond simply styling certain items differently; you can do that easily in any view control by simply handling the ItemDataBound event. Usually menus are implemented as a sequence of tags that are styled using CSS. Rendering a flat menu doesn’t pose any particular binding problems, but what happens when you need one or more sub-menus? In this case, you can either use the built-in Menu control or create a more custom rendering strategy by using a ListView. Incidentally, also note that by default the Menu control uses a table-based output unlike the more CSS-friendly output that you can obtain with a ListView. (To obtain a CSS-friendly output for a Menu control, you need to install and configure the CSS Control Adapter Toolkit, which you can download from www.asp.net.) Figure 1 A Standard Menu The HTML source code of an item of the right-side menu looks like the following: Something pellentesque sociis natoque semper convallis Building a Hierarchical Menu Many Web apps offer a vertical menu on the left or right side of the page. This menu enables the user to navigate to pages two or more nesting levels deep. The ASP.NET Menu control is definitely a viable option here. However, I tend to use the Menu control only when I have a hierarchical data source (typically, an XML file) to feed the menu and when I need to create fly-out sub-menus. For a static multi-level list of items, I opt for a repeater-like control to output markup created by a UI design team. In ASP.NET 3.5, the repeater-like control of choice is the ListView control. Consider a menu like the one in Figure 1. It’s shown in the CoffeeNCream free HTML template you can download from oswd.org. In the sample page, I simply incorporated the HTML markup in an ASP.NET Master Page. As you can see, it contains a top-level string followed by a list of links. You use a first ListView to create the H1 elements and then a nested ListView (or a similar data-bound control) to render the list of links. As a first step, you need to grab data to populate the menu. Ideally, you would use a collection of the following pseudotype objects to generate each item: class MenuItem { public string Title; public Collection Links; } class Link { public string Url; public string Text; } april2008 35 http://www.asp.net http://oswd.org

Table of Contents Feed for the Digital Edition of MSDN Magazine - April 2008

MSDN Magazine - April 2008 Contents Toolbox CLR Inside Out Basic Instincts Cutting Edge Foundations Test Run Service Station Windows with C++ Going Places { End Bracket }

MSDN Magazine - April 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.