User Id :    Password :      New Member   Forgot Password  
 
Removing outer table elements from Server Control's generated HTML in Asp.net 4.0
Description Removing outer table elements from Server Control's generated HTML in Asp.net 4.0   No. of Views     690
  Rating     0
Author Najmul Hoda   Posted On     14 Aug 2011
Tags ASP.NET,C#,Server Control    

Sample Code   Download Code

 

Introduction

Before Asp.net 4.0, a number of Asp.net server controls used to render their corresponding HTML output within a tabular structure by surrounding the data within table tr td elements, and there was no way you could get rid of those tables and customize the rendered HTML. The following controls were among them:

 

  • RadioButtonList
  • CheckBoxList
  • FormView
  • Login
  • PasswordRecovery
  • ChangePassword

 
If you do a little experiment with a few of the above controls, you would see the CheckBoxList and RadioButtonList would render the following kind of HTMLs:
 
 

<table id="MainContent_CheckBoxList1">
    <tr>
        <td>
            <input id="MainContent_CheckBoxList1_0" type="checkbox" name="ctl00$MainContent$CheckBoxList1$0"
                value="1" /><label for="MainContent_CheckBoxList1_0">Shubho</label>
        </td>
    </tr>
</table>

And,

<table id="MainContent_RadioButtonList1">
    <tr>
        <td>
            <input id="MainContent_RadioButtonList1_0" type="radio" name="ctl00$MainContent$RadioButtonList1"
                value="1" /><label for="MainContent_RadioButtonList1_0">Shubho</label>
        </td>
    </tr>
</table>

 
And, the FormView would render the following HTML:
  
 

<table cellspacing="0" id="MainContent_FormView1" style="border-collapse: collapse;">
    <tr>
        <td colspan="2">
            Employee Name : <span id="MainContent_FormView1_Label1">Shubho</span>
        </td>
    </tr>
</table>

Guess what, these tabular HTMLs are not easy to manage using javascript and css and these also increase the overall page size because of the additional HTML elements are used to render the actual data in tabular structure.

 
Good news is, Asp.net 4.0 lets you get rid of these table elements from their rendered HTML by using some simple properties.
 

RepeatLayout property


 

 

Figure : RepeatLayout property of RadioButtonList

 

If you specify "Flow", the RadioButtonList would render the following kind of HTML:
 

<span id="MainContent_CheckBoxList1">
    <input id="MainContent_CheckBoxList1_0" type="checkbox" name="ctl00$MainContent$CheckBoxList1$0"
        value="1" /><label for="MainContent_CheckBoxList1_0">Shubho</label>
 
</span>

 

Note that, no table element is there two wrap the above rendered HTML
 


Specifying OrderedList would render the HTML using ol, li elements and specifying UnOrderedList would render the HTML using ul, li. Not to mention what will happen if Table is specified


RenderOuterTable property


This property is available for the following Asp.net server controls to specify whether or not to render a wrapping table structure for the rendered HTML output. The property is applicable for the following server controls:
 

  • FormView
  • Login
  • PasswordRecovery
  • ChangePassword
  •  

Specifying RenderOuterTable ="false" for a FormView control results in the following HTML output:
 

Name
<span id="MainContent_FormView1_Label1">Shubho</span>

 
An issue with asp:Login control

Surprisingly, if you specify RenderOuterTable="false" for an <asp:Login> control, you would still see tons of <table> based HTMLs in the output. For example: 

 

<table >
    <tr>
        <td align="center" colspan="2">
            Log In
        </td>
    </tr>
    <tr>
        <td align="right">
            <label for="MainContent_Login1_UserName">
                User Name:</label>
        </td>
        <td>
            <input name="ctl01$MainContent$Login1$UserName" type="text" id="MainContent_Login1_UserName" /><span
                id="MainContent_Login1_UserNameRequired" title="User Name is required." style="visibility: hidden;">*</span>
        </td>
    </tr>
</table>

At first this may seem confusing that even after specifying RenderOuterTable="false", why the HTML output is being rendered using structure.


The answer is, specifying RenderOuterTable="false" only eliminates the outer table (If there is any) which wraps the original HTML control that is rendered by the corresponding server control. So, in case of asp:Login control, specifyingRenderOuterTable="false" only eliminates the outer table, and, not the table from it's original rendered HTML (Which is above). To verify this, if you specify RenderOuterTable="true", you would see and extra table tr td is being used to wrap the original table based HTML output.


 
 
Figure : Converting Login Control To Template
 
 

 
 
Doing so would generate template based complete HTML for login control which you can costomise as you like.
The above is also true for PasswordRecovery and ChangePassword control.
 
Hope this helps :)

About Author

About Author He is a team lead, having 8+ years of experience. He loves writing technical article for .Net developers. Najmul Hoda
No Photo
 
Country United States
Company BirlaSoft
Home Page http://www.magixchat.com

Rate this article

Rating options from poor, fair, good, very good to excelent.  
 

Comments

 
 
Posted By Annonymous on 03 Sep 2011 at 02:53 AM
 
It was dark when I woke. This is a ray of snusihne.
 
 
   
Write your comment here.
Comment
Verification Code