Adding an Alternating Template

Previous page
Table of content
Next page


I mentioned earlier in the chapter that the DataList control allows you to create two types of templates for displaying data: the item template that you just finished, and an alternating item template. If you define an alternating item template, the DataList control uses it to display every other record from the result set. An alternating item template is often used to provide visual contrast in your page, which is how you ll use it in this section. However, the alternating item template is independent from the item template, and if it made sense for your application, you could display entirely different information with the item and alternating item templates.

You define an alternating item exactly as you did the item template, namely by using the template editor in Web Matrix. In this section, however, you ll work in HTML view for the following reasons:

  • If you ve already defined an item template, it s easy to create the alternating item template in HTML view, because you can just copy it.

  • Working in HTML view will familiarize you with the syntax of templates in the page. You ll need to know the HTML syntax for templates if you want to work with the Repeater control.

  • Due to a bug in Microsoft Internet Explorer (discussed in the following sidebar), you might need to use HTML view to edit an item template that you created earlier in the template editor.

start sidebar
Trouble in the Template Editor

If you re running Microsoft Windows 2000 or Windows XP, you might experience the side effect of a bug in Internet Explorer 6. Web Matrix uses the Internet Explorer engine to display your pages in Design view and your templates in the template editor. (That s how Web Matrix gets the near-WYSIWYG look in those windows.)

Under some obscure conditions, the Internet Explorer engine won t display controls correctly. For your purposes, the most obvious effect of this display problem is in the template editor. When you first create a template, you can drag controls into it and the template looks fine. However, if you close the template editor and then reopen it, the controls you had in your templates won t show up correctly. You ll see only the little glyph that indicates a Web control. The controls are still in the templates, but you can t see them and you therefore can t edit them in the template editor.

The template editor itself has no solution for this bug. If you need to edit the controls in an existing template, you need to edit them in HTML view. Working in HTML view isn t that hard, but having the WYSIWYG template editor as a starting point is a big help. I m taking some extra time in the discussion of alternating templates to explain the layout of templates in HTML view, just in case you have to edit templates in that view.

If you re working with Windows .NET Server 2003, you won t experience this bug, because it s been fixed. Moreover, you can cross your fingers and hope that a forthcoming service pack will fix Internet Explorer 6 in Windows 2000 and Windows XP. If so, Web Matrix will work as designed and you ll be able both to create and edit templates in the template editor.

end sidebar

Examining Templates in HTML View

Before you create the alternating item template, let s take a tour of what you ve done with templates so far. Start by switching to HTML view for the  ViewGuestbookList.aspx page.

In HTML view, find the tag for the DataList control, which begins with <asp:DataList>. Look down the page until you find the closing tag (</asp:DataList>). All the elements between these two tags constitute the DataList control and its templates. Spend a few moments studying the page to see how the DataList control is constructed. The opening <asp:DataList> tag contains the properties (attributes) that apply to the control as a whole. For example, when you created the DataList control, you set its DataSource property to point to SqlDataSourceControl1, which appears this way:

<asp:DataList  runat="server" DataMember="Table"       DataSource="<%# SqlDataSourceControl1 %>"   >

The templates are elements unto themselves that are enclosed in (or children of) the DataList control. If you ve ever used HTML to create a bulleted list (<ul> element), numbered list (<ol> element), or a list box (<select> element), you ll recognize how template elements are children of the DataList control. The item template is an element named <ItemTemplate>, and the separator template is an element named <SeparatorTemplate>, and so on. In HTML view, the templates look like this:

<ItemTemplate> <p>     <strong>Name</strong>:&nbsp;      <asp:Label  runat="server"         Text= <%# DataBinder.Eval(Container, "DataItem.GuestName") %> >     </asp:Label>     ⋮ </ItemTemplate> <FooterTemplate>     <strong>(End of listing)</strong>  </FooterTemplate> <SeparatorTemplate>     <hr align="left" color="blue" /> </SeparatorTemplate>

I ve left out some of the contents of the item template to reduce the size of the listing, but you get the idea. Within each template, you can see the text and controls that you put there in the template editor.

Notice that the templates don t need to be in any particular order the <SeparatorTemplate> element doesn t have to follow the <ItemTemplate> element, for example. When the page runs, the DataList control reads the template elements and uses them appropriately no matter what order you ve used to define the templates.

Examining Data Binding

Let s look at one more feature of the templates, namely, the syntax of data binding. In the item template, take a close look at the individual Label controls (<asp:Label>). Earlier you created data-binding expressions, assigning data to the Text property of the Label controls. In HTML view, you can see that the data binding expression appears this way:

<asp:Label  runat="server"     Text= <%# DataBinder.Eval(Container, "DataItem.GuestName") %> >

The Text attribute of the <asp:Label> element is the label s Text property. But notice the unusual syntax used for assigning the data-binding expression to the Text attribute. As mentioned earlier in this chapter, calling DataBinder.Eval() will bind labels to the data from the Guestbook table. The entire data-binding expression is enclosed in the tags <%# and %>, which are in turn in single quotation marks! The need for the single quotation marks should be obvious any value you assign to the Text attribute has to be in quotation marks, and because the data-binding expression already contains double quotation marks, you have to use single quotation marks to enclose the expression.

Everything inside <%# %> runs when you call the DataBind method. Do you remember that one of the few lines of code you wrote for this page was to call the DataList.DataBind method? The effect of the DataBind method is to get the data and then to evaluate any expressions on the page that are enclosed with <%# %>.

By now, I m sure you ve had enough of poking around in the templates, so let s move forward by doing something useful in HTML view.

Add an AlternatingItem template to the page

  1. In HTML view, select the entire item template, including everything from the <ItemTemplate> tag through the </ItemTemplate> tag.

  2. Copy the template to the Clipboard.

  3. Just below the </ItemTemplate> tag, press ENTER a few times to make room, and then paste the template into the page. At this point, you ll have two identical item templates, one right after the other.

  4. Change the tag name of the second item template from <ItemTemplate> to <AlternatingItemTemplate>. Change the closing tag from </ItemTemplate> to </AlternatingItemTemplate>. (Watch the spelling.)

That was easy, wasn t it? You now have templates that will alternate when the data is displayed. However, the templates are identical, which isn t very interesting. Let s change the alternating item template so that it has a different look than the item template.

Change the look of the AlternatingItem template

  1. Switch to Design view, and select the DataList control.

  2. In the Properties window, open the AlternatingItemStyle node. You ll see a list of properties that you can set that change the appearance of the alternating template.

  3. Change the BackColor property of the AlternatingItemStyle to a color you like. As soon as you do, the DataList changes in Design view so you can see how the alternating item will look. If you like, you can change other properties of the AlternatingItemStyle as well.

  4. Switch to HTML view. You ll see that the DataList control contains a new child element: the <AlternatingItemStyle> element. Perhaps surprisingly, the new element isn t directly associated with the <AlternatingItem> element; the style element is a peer of the <AlternatingItem> element, and they re both children of the <asp:DataList> element.

    You can change the look of the item template, footer template, or any template similarly. The DataList control supports an ItemStyle element, a FooterStyle element, and so on, one style element for each template type.

  5. Run the page again. This time, every other guestbook entry will have a contrasting background color, as shown here:

    click to expand


Previous page
Table of content
Next page
Microsoft ASP. NET Web Matrix Starter Kit
Microsoft ASP.NET Web Matrix Starter Kit (Bpg-Other)
ISBN: 0735618569
EAN: 2147483647
Year: 2003
Pages: 169
Authors: Mike Pope
BUY ON AMAZON
Snort Cookbook
Visual C# 2005 How to Program (2nd Edition)
Cisco IOS Cookbook (Cookbooks (OReilly))
Pocket Guide to the National Electrical Code(R), 2005 Edition (8th Edition)
Python Programming for the Absolute Beginner, 3rd Edition
Microsoft Visual Basic .NET Programmers Cookbook (Pro-Developer)
flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net
Privacy policy