Evjen c08.tex V2 - 01/28/2008 2:05pm Page 406 Chapter 8: Data Management with ADO.NET < span id="DataList1_ctl00_CompanyNameLabel" > Alfreds Futterkiste < /span > < br / > < br / > < /td > < /tr >< tr > < td > CompanyName: < span id="DataList1_ctl01_CompanyNameLabel" > Ana Trujillo Emparedados y helados < /span > < br / > < br / > < /td > < /tr > < ! Code removed for clarity > < /table > Although this table layout is the default, you can change this so that the DataList control outputs < span > tags instead. This is done through the use of the RepeatLayout property of the DataList control. You will need to rework your DataList, as is shown in Listing 8-19. Listing 8-19: Changing the output style using RepeatLayout < asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatLayout="Flow" > < ItemTemplate > Company Name: < asp:Label ID="CompanyNameLabel" runat="server" Text=’ < %# Eval("CompanyName") % > ’/ > < br / > < br / > < /ItemTemplate > < /asp:DataList > The possible options for the RepeatLayout property are either Table or Flow . Table is the default set- ting. The output you w ill get when looking at the source of the page when using the Flow setting is presented here: < span id="DataList1" > < span > CompanyName: < span id="DataList1_ctl00_CompanyNameLabel" > Alfreds Futterkiste < /span > < br / > < br / > < /span >< br / > < span > CompanyName: < span id="DataList1_ctl01_CompanyNameLabel" > Ana Trujillo Emparedados y helados < /span > < br / > < br / > < /span > 406 Evjen c08.tex V2 - 01/28/2008 2:05pm Page 407 Chapter 8: Data Management with ADO.NET < ! Code removed for clarity > < /span > Working with Other Layout Templates You will find that the other templates are just as easy to work with as the ItemTemplate. Listing 8-20 shows you how to add the AlternatingItemTemplate and the SeparatorTemplate to the company name display. Listing 8-20: Using both the AlternatingItemTemplate and the SeparatorTemplate < %@ Page Language="VB" AutoEventWireup="false" CodeFile="DataListControl.aspx.vb" Inherits="DataListControl" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > DataList Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" > < ItemTemplate > Company Name: < asp:Label ID="CompanyNameLabel" runat="server" Text=’ < %# Eval("CompanyName") % > ’/ > < br / > < br / > < /ItemTemplate > < AlternatingItemTemplate > CompanyName: < asp:Label ID="CompanyNameLabel" runat="server" BackColor="LightGray" Text=’ < %# Eval("CompanyName") % > ’/ > < br / > < br / > < /AlternatingItemTemplate > < SeparatorTemplate > < hr / > < /SeparatorTemplate > < /asp:DataList > < asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString=" < %$ ConnectionStrings:DSN_Northwind % > " SelectCommand="SELECT [CompanyName] FROM [Customers]" > < /asp:SqlDataSource > < /div > < /form > < /body > < /html > In this case, the AlternatingItemTemplate is a repeat of the ItemTemplate, but the addition of the Back- Color property to the Label control is contained within the item. The SeparatorTemplate is used between 407 Evjen c08.tex V2 - 01/28/2008 2:05pm Page 408 Chapter 8: Data Management with ADO.NET each item, whether it is from the ItemTemplate or the AlternatingItemTemplate. In this case, a simple < hr / > element is used to draw a line between each item. The output of this is shown here in Figure 8-6. Figure 8-6 This process allows you to change how items are defined within the alternating rows and to put a separator between the elements. If you wanted just alternating row colors or an alternating style, it might not always be the best approach to use the < AlternatingItemTemplate > element, but you will find that it is better to use the < AlternatingItemStyle > element instead. This approach is presented here in Listing 8-21. Listing 8-21: Using template styles < asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical" > < FooterStyle BackColor="#CCCCCC" / > < AlternatingItemStyle BackColor="#CCCCCC" / > < SelectedItemStyle BackColor="#000099" Font-Bold="True" ForeColor="White" / > < HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" / > < ItemTemplate > CompanyName: < asp:Label ID="CompanyNameLabel" runat="server" Text=’ < %# Eval("CompanyName") % > ’/ > < br / > < br / > < /ItemTemplate > < /asp:DataList > You will notice that each of the available templates also have an associated style element. Figure 8-7 shows the use of these styles. 408 Evjen c08.tex V2 - 01/28/2008 2:05pm Page 409 Chapter 8: Data Management with ADO.NET Figure 8-7 Working with Multiple Columns Template-based controls are better at displaying items in multiple columns than other controls, such as the GridView control. The RepeatColumns property takes care of this. The code to make use of this property is shown in Listing 8-22. Listing 8-22: Creating multiple columns using the RepeatColumns property < asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" CellPadding="2" RepeatColumns="3" RepeatDirection="Horizontal" > < ItemTemplate > Company Name: < asp:Label ID="CompanyNameLabel" runat="server" Text=’ < %# Eval("CompanyName") % > ’/ > < br / > < br / > < /ItemTemplate > < /asp:DataList > Running this bit of code in your page produces the results shown in Figure 8-8. The RepeatDirection property instructs the DataList control about how to lay out the items bound to the control on the Web page. Possible values include Vertical and Horizontal . The default value is Vertical . Setting it to Vertical with a RepeatColumn setting of 3 gives the following results: Item1 Item5 Item9 Item2 Item6 Item10 Item3 Item7 Item11 Item4 Item8 Item12 409 Evjen c08.tex V2 - 01/28/2008 2:05pm Page 410 Chapter 8: Data Management with ADO.NET Figure 8-8 When the RepeatDirection property is set to Horizontal , you get the items laid out in a horizontal fashion: Item1 Item2 Item3 Item4 Item5 Item6 Item7 Item8 Item9 Item10 Item11 Item12 The ListView Ser ver Control One of the newest template-based controls is the ListView control. This is a control that is only available in the 3.5 version o f the .NET Framework. This control is considered a better alternative to the DataList control. You will find that this control gives you more control over the layout and works quite nicely in Visual Studio because it provides a set of wizards to easily set up your layout with the most common options. Looking at the Available Templates As with the DataList control, the ListView control has a series of available templates at your disposal. Each one of these templates controls a specific aspect of the layout. The following table defines the layout options available to this control. Template Description LayoutTemplate The core template that allows you to define the structure of the entire layout. Using this layout, you can use tables, spans, or anything else you want t o layout your data elements. ItemTemplate Defines the layout for each individual item in the data collection. ItemSeparatorTemplate Defines the layout of any separator that is used between items. 410 Evjen c08.tex V2 - 01/28/2008 2:05pm Page 411 Chapter 8: Data Management with ADO.NET Template Description GroupTemplate A group container element that can contain any number of data items. GroupSeparatorTemplate Defines the layout of any separator that is used between groups. EmptyItemTemplate Defines the layout of the empty items that might be contained within a group. For instance, if you group by ten items and the last page contains only seven items, then the last three items will use this template. EmptyDataTemplate Defines the layout for items that do not contain data. SelectedItemTemplate Allows for a row or item to be defined on how it looks and behaves when selected. AlternatingItemTemplate Works in conjunction with the ItemTemplate to provide a layout for all the odd rows within the layout. This is commonly used if you want to have a grid or layout where each row is distinguished in some way (such as having a different background color). EditItemTemplate Allows for a row or item to be defined on how it looks and behaves when editing. InsertItemTemplate Allows for a row or item to be defined on how it looks and behaves when performing an insert. Next, the following sections look at using some of these in your ASP.NET page. Using the Templates In creating a page that makes use of the ListView control, the first step will be to create a basic page with a ListView control on it, as illustrated here in Listing 8-23. Listing 8-23: Creating the base page < %@ Page Language="VB" AutoEventWireup="false" CodeFile="ListViewControl.aspx.vb" Inherits="ListViewControl" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > ListView Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ListView ID="ListView1" runat="server" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" > < /asp:ListView > Continued 411 Evjen c08.tex V2 - 01/28/2008 2:05pm Page 412 Chapter 8: Data Management with ADO.NET < asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString=" < %$ ConnectionStrings:DSN_Northwind % > " SelectCommand="SELECT * FROM [Customers] ORDER BY [CompanyName]" InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax]) VALUES (@CustomerID, @CompanyName, @ContactName, @ContactTitle, @Address, @City, @Region, @PostalCode, @Country, @Phone, @Fax)" UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [Address] = @Address, [City] = @City, [Region] = @Region, [PostalCode] = @PostalCode, [Country] = @Country, [Phone] = @Phone, [Fax] = @Fax WHERE [CustomerID] = @CustomerID" > < UpdateParameters > < asp:Parameter Name="CompanyName" Type="String" / > < asp:Parameter Name="ContactName" Type="String" / > < asp:Parameter Name="ContactTitle" Type="String" / > < asp:Parameter Name="Address" Type="String" / > < asp:Parameter Name="City" Type="String" / > < asp:Parameter Name="Region" Type="String" / > < asp:Parameter Name="PostalCode" Type="String" / > < asp:Parameter Name="Country" Type="String" / > < asp:Parameter Name="Phone" Type="String" / > < asp:Parameter Name="Fax" Type="String" / > < asp:Parameter Name="CustomerID" Type="String" / > < /UpdateParameters > < InsertParameters > < asp:Parameter Name="CustomerID" Type="String" / > < asp:Parameter Name="CompanyName" Type="String" / > < asp:Parameter Name="ContactName" Type="String" / > < asp:Parameter Name="ContactTitle" Type="String" / > < asp:Parameter Name="Address" Type="String" / > < asp:Parameter Name="City" Type="String" / > < asp:Parameter Name="Region" Type="String" / > < asp:Parameter Name="PostalCode" Type="String" / > < asp:Parameter Name="Country" Type="String" / > < asp:Parameter Name="Phone" Type="String" / > < asp:Parameter Name="Fax" Type="String" / > < /InsertParameters > < /asp:SqlDataSource > < /div > < /form > < /body > < /html > In this case, you have a base ListView control and a SqlDataSource control that has been wired up to the Northwind sample database and provided Select, Update, and Insert methods. The ListView control itself is then bound to the SqlDataSource control. It provides the primary key of the table for working with the various queries through the use of the DataKeyNames property. Creating the Layout Template The next step is to create the layout of the overall control using t he LayoutTemplate. T he use of this template is illustrated in Listing 8-24. 412 Evjen c08.tex V2 - 01/28/2008 2:05pm Page 413 Chapter 8: Data Management with ADO.NET Listing 8-24: Using the LayoutTemplate element < LayoutTemplate > < table runat="server" > < tr runat="server" > < td runat="server" > < table ID="itemPlaceholderContainer" runat="server" border="1" style="background-color: #FFFFFF;border-collapse: collapse; border-color: #999999;border-style:none;border-width:1px; font-family: Verdana, Arial, Helvetica, sans-serif;" > < tr runat="server" style="background-color:#DCDCDC;color: #000000;" > < th runat="server" >< /th > < th runat="server" > Customer ID < /th > < th runat="server" > Company Name < /th > < th runat="server" > Contact Name < /th > < /tr > < tr ID="itemPlaceholder" runat="server" >< /tr > < /table > < /td > < /tr > < tr runat="server" > < td runat="server" style="text-align: center;background-color: #CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;" > < asp:DataPager ID="DataPager1" 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 > < /td > < /tr > < /table > < /LayoutTemplate > This layout template constructs the layout as a grid using tables to layout the items. A styled table is defined with a header in place. The most important part of laying out the template is that the container itself is defined using a control with the ID value of itemPlaceholderContainer . The element will also need to be made a server control by adding the runat property. < table ID="itemPlaceholderContainer" runat="server" border="1" style="background-color: #FFFFFF;border-collapse: collapse; border-color: #999999;border-style:none;border-width :1px; font-family: Verdana, Arial, Helvetica, sans-serif;" > < /table > The placeholder for each data item needs to take the same form, but the ID of the server control you make needs to have a value of itemPlaceholder . 413 Evjen c08.tex V2 - 01/28/2008 2:05pm Page 414 Chapter 8: Data Management with ADO.NET < table ID="itemPlaceholderContainer" runat="server" border="1" style="background-color: #FFFFFF;border-collapse: collapse; border-color: #999999;border-style:none;border-width:1px; font-family: Verdana, Arial, Helvetica, sans-serif;" > < tr runat="server" style="background-color:#DCDCDC;color: #000000;" > < th runat="server" >< /th > < th runat="server" > Customer ID < /th > < th runat="server" > Company Name < /th > < th runat="server" > Contact Name < /th > < /tr > < tr ID="itemPlaceholder" runat="server" >< /tr > < /table > It is important to keep the itemPlaceholder element within the itemPlaceholderContainer control, within the layout template. It cannot sit outside o f the container. The final part of this layout is the new DataPager server control. This new server control is part of ASP.NET 3.5. < asp:DataPager ID="DataPager1" 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 > The DataPager works with template-based data in allowing you to control how end users move across the pages of the data collection. Now that the LayoutTemplate is in place, the next step is to create the ItemTemplate. Creating the ItemTemplate The ItemTemplate that you create is quite similar to the ItemTemplate that is part of the DataList con- trol that was discussed earlier. In this case, however, the ItemTemplate is placed in the specific spot within the layout of the page where you defined the itemPlaceholder control to be. Listing 8-25 shows the ItemTemplate for this example. Listing 8-25: Building the ItemTemplate < ItemTemplate > < tr style="background-color:#DCDCDC;color: #000000;" > < td > < asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" / > < /td > < td > 414 Evjen c08.tex V2 - 01/28/2008 2:05pm Page 415 Chapter 8: Data Management with ADO.NET < asp:Label ID="CustomerIDLabel" runat="server" Text=’ < %# Eval("CustomerID") % > ’/ > < /td > < td > < asp:Label ID="CompanyNameLabel" runat="server" Text=’ < %# Eval("CompanyName") % > ’/ > < /td > < td > < asp:Label ID="ContactNameLabel" runat="server" Text=’ < %# Eval("ContactName") % > ’/ > < /td > < /tr > < /ItemTemplate > Creating the EditItemTemplate The EditItemTemplate is the area that shows up when you decide to edit the data item (in this case, a row o f data). Listing 8-26 shows the EditItemTemplate in use. Listing 8-26: Building the EditItemTemplate < EditItemTemplate > < tr style="background-color:#008A8C;color: #FFFFFF;" > < td > < asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" / > < asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" / > < /td > < td > < asp:Label ID="CustomerIDLabel1" runat="server" Text=’ < %# Eval("CustomerID") % > ’/ > < /td > < td > < asp:TextBox ID="CompanyNameTextBox" runat="server" Text=’ < %# Bind("CompanyName") % > ’/ > < /td > < td > < asp:TextBox ID="ContactNameTextBox" runat="server" Text=’ < %# Bind("ContactName") % > ’/ > < /td > < /tr > < /EditItemTemplate > In this case, the EditItemTemplate, when shown, displays an Update and Cancel button to manipulate the editing options. When editing, the values are placed within text boxes and the values are then updated into the database through the Update command. Creating the EmptyItemTemplate If there are no values in the database, then you should prepare to gracefully show something in your layout. The EmptyItemTemplate is usedin Listing 8-27 to perform that operation. 415 . it looks and behaves when editing. InsertItemTemplate Allows for a row or item to be defined on how it looks and behaves when performing an insert. Next, the following sections look at using some. illustrated here in Listing 8- 23. Listing 8- 23: Creating the base page < %@ Page Language="VB" AutoEventWireup="false" CodeFile="ListViewControl.aspx.vb" Inherits="ListViewControl". Possible values include Vertical and Horizontal . The default value is Vertical . Setting it to Vertical with a RepeatColumn setting of 3 gives the following results: Item1 Item5 Item9 Item2 Item6