When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article

ASP ASP.NET ASP FAQs Message Board Feedback
 
Print this Page!
Published: Wednesday, March 24, 2010

Data Web Controls Enhancements in ASP.NET 4

By Scott Mitchell


Introduction


Traditionally, developers using Web controls enjoyed increased productivity but at the cost of control over the rendered markup. For instance, many ASP.NET controls automatically wrap their content in <table> for layout or styling purposes. This behavior runs counter to the web standards that have evolved over the past several years, which favor cleaner, terser HTML; sparing use of tables; and Cascading Style Sheets (CSS) for layout and styling. Furthermore, the <table> elements and other automatically-added content makes it harder to both style the Web controls using CSS and to work with the controls from client-side script.

One of the aims of ASP.NET version 4.0 is to give Web Form developers greater control over the markup rendered by Web controls. Last week's article, Take Control Of Web Control ClientID Values in ASP.NET 4.0, highlighted how new properties in ASP.NET 4.0 give the developer more say over how a Web control's ID property is translated into a client-side id attribute. In addition to these ClientID-related properties, many Web controls in ASP.NET 4.0 include properties that allow the page developer to instruct the control to not emit extraneous markup, or to use an HTML element other than <table>.

This article explores a number of enhancements made to the data Web controls in ASP.NET 4.0. As you'll see, most of these enhancements give the developer greater control over the rendered markup. Read on to learn more!

- continued -

ASP.NET 4.0's Status and Release Date
At the time of this writing, ASP.NET 4.0 is currently available a Release Candidate (RC). You can download the .NET Framework 4.0 and Visual Studio 2010 RC or wait until the software is officially released. Currently, ASP.NET 4.0 is scheduled to be released in April 2010.

Disabling The Outer Table In Templated Controls


In ASP.NET 3.5, a number of Web controls that use (or can use) templates automatically wrap the rendered templated content within a <table> element. One such control that displays this behavior is the FormView control. To see how the FormView wraps the output in a <table>, let's take a moment to construct a FormView to display the name and description of a particular category from the Northwind database's Categories table. This FormView would need to include an ItemTemplate that emitted the CategoryName and Description fields. The following declarative markup creates such a FormView:

<asp:FormView runat="server" ...>
   <ItemTemplate>
      <b><%# Eval("CategoryName") %></b><br />
      <%# Eval("Description") %>'
   </ItemTemplate>
</asp:FormView>

Furthermore, imagine that this FormView was bound to a data source control that returned information about the Beverages category. When viewed through a browser, the FormView control would generate the following HTML:

<table cellspacing="0" id="ContentPlaceHolder1" style="border-collapse:collapse;">
   <tr>
      <td colspan="2">
         <b>Beverages</b><br />
         Soft drinks, coffees, teas, beers, and ales'
      </td>
   </tr>
</table>

The highlighted markup above shows the <table> element automatically added to the markup defined in the template. In short, the FormView control wraps its templated content within a one row, one column table, whether we like it or not.

The FormView renders this outer <table> to express style information. The FormView has a property named RowStyle, which contains a variety of substyles (BackColor, Font, BorderColor, and so on). For example, if the RowStyle's BackColor and Font-Size properties are set to Red and Larger, respectively, the FormView will render the following markup:

<table cellspacing="0" id="ContentPlaceHolder1" style="border-collapse:collapse;">
   <tr style="background-color:red;font-size:Large;">
      <td colspan="2">
         <b>Beverages</b><br />
         Soft drinks, coffees, teas, beers, and ales'
      </td>
   </tr>
</table>

Note how the <table> (specifically the <tr> element) specifies the style as defined by the FormView's RowStyle property. Therefore, this outer <table> element is useful when using the RowStyle property, but is extra cruft if the RowStyle property is not being used or if the style information is specified directly in the template's markup (using CSS classes, ideally).

ASP.NET 4.0 adds a new Boolean property to the FormView and a host of other Web controls named RenderOuterTable. This property, when set to True (the default), renders the outer <table> element as was done in ASP.NET 3.5 and earlier versions. If this property is set to False, however, then the outer <table> is omitted.

Taking our earlier FormView example, let's see what would happen if we set RenderOuterTable to False.

<asp:FormView runat="server" ... RenderOuterTable="false">
   <ItemTemplate>
      <b><%# Eval("CategoryName") %></b><br />
      <%# Eval("Description") %>'
   </ItemTemplate>
</asp:FormView>

With that minor change, the rendered markup for the FormView no longer includes the outer table. Instead, the FormView renders just the contents of its template(s), as the following snippet of HTML shows:

<b>Beverages</b><br />
Soft drinks, coffees, teas, beers, and ales'

When RenderOuterTable is set to False, any styles that are expressed through that outer table are no longer rendered. In short, any style settings to the RowStyle property will be ignored when the above FormView is rendered.

In addition to the FormView, the RenderOuterTable property has been added to the following Web controls in ASP.NET 4.0:

  • Login
  • PasswordRecovery
  • ChangePassword
  • Wizard
  • CreateUserWizard
The download available at the end of this article includes a demo that illustrates the effects of the RenderOuterTable property on both the FormView and Login controls.

ListView Control Enhancements


The ListView control displays a set of data records using templates. Like the GridView, the ListView supports paging, sorting, editing, and deleting data. It can also be used to insert data. Developers using the ListView control in ASP.NET version 3.5 had to provide at least two required templates:
  • ItemTemplate - specifies the markup rendered for each item bound to the ListView
  • LayoutTemplate - specifies the ListView's encasing markup and contains a Web control that indicates where the ItemTemplate's markup should be placed
In most scenarios, the LayoutTemplate would contain nothing but a Web control to specify where the ItemTemplate's markup should appear, resulting in a ListView with markup like the following:

<asp:ListView runat="server" ...>
   <LayoutTemplate>
      <asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
   </LayoutTemplate>

   <ItemTemplate>
      ...
   </ItemTemplate>
</asp:ListView>

The LayoutTemplate in the above example serves no purpose other than to say, "Here is where the ItemTemplate markup should go." Regardless, with ASP.NET 3.5 you still had to define this LayoutTemplate explicitly in the ListView's markup.

The good news is that with ASP.NET version 4.0 you can omit the LayoutTemplate - the ItemTemplate is now the only required template in the ListView. The following snippet of declarative markup shows this new abbreviated syntax:

<asp:ListView runat="server" ...>
   <ItemTemplate>
      ...
   </ItemTemplate>
</asp:ListView>

For more information on the ListView control, see my ongoing article series, Using ASP.NET's ListView and DataPager Controls.

New RepeatLayout Options for the CheckBoxList and RadioButtonList Controls


The CheckBoxList and RadioButtonList controls display a set of check boxes or radio buttons based on some data and are useful for building a set of check boxes or radio buttons based on a database query. Both of these controls have a RepeatLayout property that dictates how the series of check boxes or radio buttons are laid out. In ASP.NET 3.5 there were two possible settings for this property:
  • Table (the default) - lays out the items using a <table> element. By default, each check box or radio button is laid out in its own table row. Use the RepeatColumns property to have a fixed number of check boxes or radio buttons displayed per row.
  • Flow - lays out each check box or radio button in a <span> element with a line break (<br />) after each element, by default. The RepeatColumns property, if set, indicates that a line break should only be rendered after a certain number of check boxes or radio buttons.
ASP.NET 4.0 adds two additional settings to the RepeatLayout property:
  • OrderedList - lays out the items using an <ol> element. You cannot use the RepeatColumns property with this setting. Doing so will result in an exception being thrown when the page is visited.
  • UnorderedList - lays out the items using an <ul> element. You cannot use the RepeatColumns property with this setting. Doing so will result in an exception being thrown when the page is visited.
Consider the following CheckBoxList, which has its RepeatLayout property set to UnorderedList.

<asp:CheckBoxList ... runat="server" DataTextField="CategoryName"
       DataValueField="CategoryID" RepeatLayout="UnorderedList">
</asp:CheckBoxList>

When bound to the categories in the Northwind database the above control will render the following markup:

<ul id="...">
   <li><input id="..." type="checkbox" name="..." value="1" /><label for="...">Beverages</label></li>
   <li><input id="..." type="checkbox" name="..." value="1" /><label for="...">Condiments</label></li>
   <li><input id="..." type="checkbox" name="..." value="1" /><label for="...">Confections</label></li>
   ...
</ul>

Note how the CheckBoxList renders an unordered list (<ul>) and how each check box is rendered within a list item (<li>).

The idea with the OrderedList and UnorderedList options is that the check boxes or radio buttons can be laid out using CSS. There are many web pages that discuss how to use CSS to layout elements in ordered and unordered lists. Check out the plethora of examples at Listmatic to see how to use CSS to style HTML lists in a wide variety of ways.

Conclusion


ASP.NET 4.0 gives Web Form developers greater control over the rendered markup. Many templated controls that had previously added <table> elements for styling purposes. These tags can now be optionally suppressed with a new property, RenderOuterTable. Similarly, the CheckBoxList and RadioButtonList controls' RepeatLayout property has been expanded to include two new settings - OrderedList and UnorderedList - which offer developers alternative ways to influence the markup generated by these controls.

Also, the ListView control has been tidied up a bit, making the LayoutTemplate optional.

Happy Programming!

  • By Scott Mitchell


    Attachments:


  • Download the code used in this article

    Further Readings:


  • Take Control Of Web Control ClientID Values in ASP.NET 4.0
  • Rendering an Outer Table for Templated Controls
  • ListView Control Enhancements
  • Using ASP.NET 3.5's ListView and DataPager Controls
  • CheckBoxList and RadioButtonList Control Enhancements


  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article