Chapter 3: Customizing the HTML Output
By Scott Mitchell
Using Developer Tools to Specify Display Properties
Hopefully you've found that specifying display properties for the DataGrid and DataList controls is relatively easy. Unfortunately, for people like myself who are anything but artistic, getting an aesthetically pleasing DataGrid or DataList can still pose a bit of a challenge. I find that while setting the display properties might be easy enough, knowing what colors go well together and what fonts and font settings to use to create eye-pleasing output can be quite a challenge.
If your artistic skills are at all like mine, you'll find developer tools like Visual Studio .NET and the Web Matrix Project to be indispensable.
When creating ASP.NET Web pages with either of these tools, you can enter what is called the Design view, which presents a WYSIWYG view of the ASP.NET Web page called the Designer. From this Design view, you'll be able to drag and drop Web controls that are shown in the toolbox on the left.
After you drag a control onto the Designer you can click on the control, and a list of its properties should appear in the bottom right-hand corner. Figure 3.5 shows a screenshot of an ASP.NET Web page in the Web Matrix Project after a DataGrid has been dragged onto the Designer. You can specify various display properties from the properties window in the bottom right-hand corner.
Note - Although the following screenshots show the Web Matrix Project in use, Visual Studio .NET provides an identical user experience when it comes to working with the Designer.
You can set the DataGrid's display properties through the Properties window.
Although the Properties window is a nice way to quickly set display properties, a real gem for artistically challenged individuals is hidden in the Auto Format link at the bottom of the Properties window. After clicking on the Auto Format link, a dialog box appears with a listing of various style schemes and a preview of the style scheme (see Figure 3.6).
The Auto Format dialog box allows you to quickly choose a style scheme for your DataGrid or DataList control.
After you have selected a style scheme and clicked the OK button, the Designer is updated to show the new look and feel of the style scheme you have chosen (see Figure 3.7). This also has the effect of updating the DataGrid (or DataList) control, automatically specifying the style properties. For example, Listing 3.5 contains the control markup automatically added to the ASP.NET Web page by simply dragging a DataGrid onto the Designer and opting for the Colorful 5 style scheme.
Listing 3.5 The Auto Format Dialog Box Can Automatically Set Display Properties for Your DataGrid
1: <asp:DataGrid id="DataGrid1" runat="server" GridLines="None" BorderWidth="1px" BorderColor="Tan" BackColor="LightGoldenrodYellow" CellPadding="2" ForeColor="Black"> 2: <FooterStyle backcolor="Tan"></FooterStyle> 3: <HeaderStyle font-bold="True" backcolor="Tan"></HeaderStyle> 4: <PagerStyle horizontalalign="Center" forecolor="DarkSlateBlue" backcolor="PaleGoldenrod"></PagerStyle> 5: <SelectedItemStyle forecolor="GhostWhite" backcolor="DarkSlateBlue"> </SelectedItemStyle> 6: <AlternatingItemStyle backcolor="PaleGoldenrod"></AlternatingItemStyle> 7: </asp:DataGrid>
Note - Line 4 in Listing 3.5 contains a PagerStyle tag, which sets properties for the PagerStyle property of the DataGrid. The PagerStyle property, which we've yet to discuss, is an "ItemStyle" property of the DataGrid. It is useful for specifying paging styles for DataGrids that support pagination. We'll be examining this property in more detail in Chapter 8, "Providing DataGrid Pagination."
A Note on How the Display Properties Are Rendered in the Browser
One of the nice things about ASP.NET Web controls is that they are adaptive to the user's browser. By that I mean the HTML markup emitted by an ASP.NET Web page's Web controls is dependent upon the browser being used to view the page. For example, the ASP.NET validation Web controls will emit client-side validation code if the user's browser is deemed to be an uplevel browser; if the browser is deemed to be a downlevel browser, then no such client-side code is emitted.
The display properties for the DataGrid and DataList are rendered differently depending upon whether the user visiting the page is using an uplevel or a downlevel browser. If an uplevel browser is being used, the display properties are emitted as CSS. For example, in Listing 3.4, the header's style properties are set on lines 6 and 7. Specifically, the BackGround is set to Navy, and the ForeGround to White; the text is centered and made bold. When visiting with an uplevel browser, the header for the HTML table is rendered as the following:
<tr align="Center" style="color:White;background-color:Navy;font-weight:bold;"> <td>Title</td><td>Sales Performance</td> </tr>
Note that the properties are all set in a style attribute of the tr tag.
However, if we visit this page with a downlevel browser (any browser other than Internet Explorer 4.0 or later), the following HTML is emitted:
<tr align="Center" bgcolor="Navy"> <td><font face="Verdana" color="White"><b>Title</b></font></td> <td><font face="Verdana" color="White"><b>Sales Performance</b></font></td> </tr>
Here the display properties are set using HTML instead of CSS.
If you are curious about the rendering differences between an uplevel and downlevel browser, you can do one of two things: view the same page with an uplevel browser (such as Internet Explorer 6.0) and a downlevel browser (such as Opera), comparing the HTML output that each browser receives; or programmatically specify how the controls on the page should be rendered by using the ClientTarget attribute in the @Page directive.
Using the ClientTarget attribute, you can have the controls on an ASP.NET Web page render as if the page were being visited by an uplevel or downlevel browser, independent of the actual browser being used. To specify that the controls should render as if being visited by an uplevel browser, use the following:
<%@ Page ClientTarget="uplevel" %>
Similarly, to force the controls to render as if they were being visited by a downlevel browser, use this:
<%@ Page ClientTarget="downlevel" %>
What About the Repeater Control?
The Repeater control does not have any display properties. Rather, to customize the HTML output of the Repeater, you must explicitly specify the HTML markup to use in the Repeater's templates. That is, if you want to have the Repeater output bold text, you have to specifically surround the text with the bold tag, or surround the text with a span tag whose style attribute contains a CSS rule to set the font-weight accordingly. (Realize that the DataList and DataGrid's templates can also be customized in this fashion.)
Of course, any time you encapsulate the appearance in HTML markup in a template, you are mixing code and content. Ideally, these two should be kept separate. By setting the appearance of the DataGrid and DataList via the display properties, it is much easier to make changes to the control or template markup later.
For example, imagine that you are using a DataGrid with a couple of TemplateColumns and you want the text in the TemplateColumn to be bold. Although you could simply add
<span style="font-weight:bold;"> Template Markup </span>
it would be cleaner to set the TemplateColumn's ItemStyle-Font-Bold property to True. If you later needed to change the TemplateColumn's output to italic instead of bold, changing the display property would be simpler than picking through the template markup. (Although it might not be much simpler in this trivial example, imagine that you have a large number of display properties set, and you want to change just one of them. Clearly, making such a change would be simpler using the display properties than if you use a large number of HTML tags to specify the style settings.)
Another advantage of using the display properties is that the HTML emitted is adaptive to the user's browser. If you had used the CSS markup shown previously to make the template's contents bold, a visitor using an older browser that does not support CSS would miss out on the intended visual experience. By using display properties, the correct markup is automatically chosen and sent to the user based upon her browser.