The ListView Control

The ListView control is a data-bound control. This control exposes a DataSource property that can be associated with a collection of objects or data records by the page developer. ListView is responsible for generating a scrollable user interface (UI) that contains a rendering for each object in the associated data source. To allow the page developer to define the visual characteristics and the layout of the rendering for each object, the ListView control exposes various style and template properties for customization.

Figure 20-1 demonstrates the ListView control in a sample page that generates a scrollable view of information about a set of book titles.

Figure 20-1. The ListView control being used to generate a scrollable, columnar rendering

graphics/f20hn01.jpg

Listing 20-1 shows the sample page used in Figure 20-1.

Listing 20-1 ListViewTest.aspx

 <%@Pagelanguage="c#" %> <%@ImportNamespace="System.IO" %> <%@ImportNamespace="System.Data" %> <%@RegisterTagPrefix="mspwc" Namespace="MSPress.WebControls" Assembly="MSPress.WebControls" %> <html> <scriptrunat="server"> privateDataSetGetDataSource(){ FileStreamfs=null; DataSetds=null;

 try{ fs=newFileStream(Server.MapPath("TitlesDB.xml"), FileMode.Open,FileAccess.Read); ds=newDataSet(); ds.ReadXml(fs); } finally{ if(fs!=null){ fs.Close(); fs=null; } } returnds; } privatestringGetAuthor(stringauthorID){ DataSetds=(DataSet)listView1.DataSource; DataViewdv=newDataView(ds.Tables["Author"]); dv.RowFilter= "au_id='" +authorID+ "'"; return(string)dv[0]["au_name"]; } privatevoidlistView1_OnSelectedIndexChanged(objectsender, EventArgse){ label1.Text= "Selectedtitle:'" + listView1.DataKeys[listView1.SelectedIndex]+ ".'"; } publicvoidPage_Load(objectsender,EventArgse){ if(!IsPostBack){ listView1.DataSource=GetDataSource(); listView1.DataBind(); } } </script> <head> <title>ListViewSample</title> </head> <body> <formmethod="post" runat="server" ID="Form1"> <mspwc:ListViewrunat="server" id="listView1" ShowScrollBars="true" Columns="2" BorderStyle="Solid" BorderColor="Gainsboro" BorderWidth="1px" Enableclickselect="true" OnSelectedIndexChanged="listView1_OnSelectedIndexChanged" DataKeyField="title" DataMember="Title"> <ItemTemplate> <asp:Tablerunat="server" Font-Names="Verdana"  Font-Size="8pt"> <asp:TableRow> <asp:TableCell> <asp:Imagerunat="server" ImageUrl='<%#DataBinder.Eval(Container.DataItem, "title_id", "images\Title-{0}.gif")%>'/> </asp:TableCell> <asp:TableCellvalign="top"> <asp:Labelrunat="server" text='<%#DataBinder.Eval(Container.DataItem, "title")%>'/> <br/> <asp:Labelrunat="server" text='<%#GetAuthor((string)DataBinder.Eval(Container.DataItem, "au_id"))%>'/> <br/> <asp:Labelrunat="server" text='<%#DataBinder.Eval(Container.DataItem, "price", "{0:c}")%>'/> <br/> <br/> <asp:LinkButtonrunat="server" CommandName="Select" Text="Select"/> </asp:TableCell> </asp:TableRow> </asp:Table> </ItemTemplate> <HeaderTemplate> BookTitles </HeaderTemplate> <SelectedItemStyleBackColor="Gainsboro" BorderStyle="Solid" BorderColor="Gray" BorderWidth="1px"/> <HeaderStyleBackColor="Navy" ForeColor="White"  Font-Bold="true"/> <ViewStyleheight="275px" Width="600px"/> </mspwc:ListView> <br/> <asp:Labelrunat="server" id="label1" Text="Selectatitle:"/> </form> </body> </html>

The sample page uses an instance of a System.Data.DataSet class as the data source. The DataSet is loaded from data that is persisted into an .xml file named TitlesDB.xml. The .xml file contains data based on the pubs database that is available as a sample database with Microsoft SQL Server. We use an XML file for persisting data (instead of using a database) because we want to keep the sample simple and self-contained rather than demonstrate complex data access logic. A representative portion of the .xml file used in the sample is shown in Listing 20-2.

Listing 20-2 TitlesDB.xml

 <?xmlversion="1.0" encoding="utf-8" ?> <TitlesDB> <xsd:schemaid="TitlesDB" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">  </xsd:schema> <Author> <au_id>213-46-8915</au_id> <au_name>MarjorieGreen</au_name> <phone>415986-7020</phone> <address>30963rdSt.#411</address> <city>Oakland</city> <state>CA</state> <zip>94618</zip> </Author>  <Title> <title_id>BU1032</title_id> <au_id>213-46-8915</au_id> <title>TheBusyExecutive'sDatabaseGuide</title> <price>19.99</price> <pubdate>1991-06-12T07:00:00</pubdate> </Title>  </TitlesDB>