ASP.NET Web Forms Weaknesses - The HTML Tag Weakness
(Page 2 of 5 )
(2) Difficulty in rendering HTML Tags
In constructing large ASP.NET Web Forms-based projects, you might find great difficulty in controlling the rendering of the HTML contents. ASP.NET server controls often render HTML with mixed inline style and deprecated tags that do not follow web standards.
ASP.NET Web Forms provide people plenty of controls; third parties have added many. The various server controls possess strong functionalities and are easy to use. As you may have seen, in most Microsoft techniques-related speeches, the GridView is usually used. With a drag and some clicks, it can be easily bound to a DataSet (or many other ADO.NET items). So a data table is generated, with easy editing, deleting support, and easy event responses.
Regrettably, there are many defects with the GridView control. If you want to use the advanced functionalities, such as appending, editing, and deleting, of the GridView control, ViewState becomes a MUST HAVE.
Now, what we care about is the HTML content generated from the GridView control.
Let's look at a related example. The following shows you some simple GridView control-related HTML code:
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AllowSorting="True" AutoGenerateColumns="False" BackColor="#DEBA84"
BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3"
CellSpacing="2" DataKeyNames="CategoryID" DataSourceID="SqlDataSource1">
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID"
InsertVisible="False" ReadOnly="True" SortExpression="CategoryID" />
<asp:BoundField DataField="CategoryName" HeaderText="CategoryName"
SortExpression="CategoryName" />
<asp:BoundField DataField="Description" HeaderText="Description"
SortExpression="Description" />
</Columns>
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>"
SelectCommand="SELECT [CategoryID], [CategoryName], [Description], [Picture] FROM [Categories]">
</asp:SqlDataSource>
How do the resulting HTML contents look in the browser side? Here are the result contents:
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
............
<table cellspacing="2" cellpadding="3" rules="all" border="1" id="GridView1" style="background-color:#DEBA84;border-color:#DEBA84;border-width:1px;border-style:None;">
<tr style="color:White;background-color:#A55129;font-weight:bold;">
<th scope="col"> </th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$CategoryID')" style="color:White;">CategoryID</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$CategoryName')" style="color:White;">CategoryName</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Description')" style="color:White;">Description</a></th>
</tr><tr style="color:#8C4510;background-color:#FFF7E7;">
<td><a href="javascript:__doPostBack('GridView1','Select$0')" style="color:#8C4510;">Select</a></td><td>1</td><td>Beverages</td><td>Soft drinks, coffees, teas, beers, and ales</td>
</tr><tr style="color:#8C4510;background-color:#FFF7E7;">
<td><a href="javascript:__doPostBack('GridView1','Select$1')" style="color:#8C4510;">Select</a></td><td>2</td><td>Condiments</td>
<td>Sweet and savory sauces, relishes, spreads, and seasonings</td>
</tr><tr style="color:#8C4510;background-color:#FFF7E7;">
<td><a href="javascript:__doPostBack('GridView1','Select$2')" style="color:#8C4510;">Select</a></td><td>3</td><td>Confections</td>
<td>Desserts, candies, and sweet breads</td>
</tr><tr style="color:#8C4510;background-color:#FFF7E7;">
<td><a href="javascript:__doPostBack('GridView1','Select$3')" style="color:#8C4510;">Select</a></td><td>4</td><td>Dairy Products</td><td>Cheeses</td>
</tr><tr style="color:#8C4510;background-color:#FFF7E7;">
<td><a href="javascript:__doPostBack('GridView1','Select$4')" style="color:#8C4510;">Select</a></td><td>5</td><td>Grains/Cereals</td>
<td>Breads, crackers, pasta, and cereal</td>
</tr><tr style="color:White;background-color:#738A9C;font-weight:bold;">
<td><a href="javascript:__doPostBack('GridView1','Select$5')" style="color:White;">Select</a></td><td>6</td><td>Meat/Poultry</td>
<td>Prepared meats</td>
</tr><tr style="color:#8C4510;background-color:#FFF7E7;">
<td><a href="javascript:__doPostBack('GridView1','Select$6')" style="color:#8C4510;">Select</a></td><td>7</td><td>Produce</td><td>Dried fruit and bean curd</td>
</tr><tr style="color:#8C4510;background-color:#FFF7E7;">
<td><a href="javascript:__doPostBack('GridView1','Select$7')" style="color:#8C4510;">Select</a></td><td>8</td><td>Seafood</td><td>Seaweed and fish</td>
</tr>
</table>
Next: Code Explained >>
More ASP.NET Articles
More By Xianzhong Zhu
