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>
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.
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!
Reasons why you must trust ASPHostPortal.com
Every provider will tell you how they treat their support, uptime, expertise, guarantees, etc., are. Take a close look. What they’re really offering you is nothing close to what ASPHostPortal does. You will be treated with respect and provided the courtesy and service you would expect from a world-class web hosting business.
You’ll have highly trained, skilled professional technical support people ready, willing, and wanting to help you 24 hours a day. Your web hosting account servers are monitored from three monitoring points, with two alert points, every minute, 24 hours a day, 7 days a week, 365 days a year. The followings are the list of other added- benefits you can find when hosting with us:
- DELL Hardware
Dell hardware is engineered to keep critical enterprise applications running around the clock with clustered solutions fully tested and certified by Dell and other leading operating system and application providers.
- Recovery Systems
Recovery becomes easy and seamless with our fully managed backup services. We monitor your server to ensure your data is properly backed up and recoverable so when the time comes, you can easily repair or recover your data.
- Control Panel
We provide one of the most comprehensive customer control panels available. Providing maximum control and ease of use, our Control Panel serves as the central management point for your ASPHostPortal account. You’ll use a flexible, powerful hosting control panel that will give you direct control over your web hosting account. Our control panel and systems configuration is fully automated and this means your settings are configured automatically and instantly.
- Excellent Expertise in Technology
The reason we can provide you with a great amount of power, flexibility, and simplicity at such a discounted price is due to incredible efficiencies within our business. We have not just been providing hosting for many clients for years, we have also been researching, developing, and innovating every aspect of our operations, systems, procedures, strategy, management, and teams. Our operations are based on a continual improvement program where we review thousands of systems, operational and management metrics in real-time, to fine-tune every aspect of our operation and activities. We continually train and retrain all people in our teams. We provide all people in our teams with the time, space, and inspiration to research, understand, and explore the Internet in search of greater knowledge. We do this while providing you with the best hosting services for the lowest possible price.
- Data Center
ASPHostPortal modular Tier-3 data center was specifically designed to be a world-class web hosting facility totally dedicated to uncompromised performance and security
- Monitoring Services
From the moment your server is connected to our network it is monitored for connectivity, disk, memory and CPU utilization – as well as hardware failures. Our engineers are alerted to potential issues before they become critical.
- Network
ASPHostPortal has architected its network like no other hosting company. Every facet of our network infrastructure scales to gigabit speeds with no single point of failure.
- Security
Network security and the security of your server are ASPHostPortal’s top priorities. Our security team is constantly monitoring the entire network for unusual or suspicious behavior so that when it is detected we can address the issue before our network or your server is affected.
- Support Services
Engineers staff our data center 24 hours a day, 7 days a week, 365 days a year to manage the network infrastructure and oversee top-of-the-line servers that host our clients’ critical sites and services.