We are really fond of Web controls. They are easy to use and immensely programmable. Each control is an object and therefore has its own set of properties, methods, and events. We have found that using Web controls greatly eases the pain of writing repetitive HTML code. You may not feel as closely connected to the HTML when using Web controls, but at least you’ll know that your page will render correctly regardless of which browser is used.
Here is a code sample that creates an HTML table using the ASP.NET TableWeb control:
<html> <head> </head>
<body>
<asp:Table id=”tblExample” BorderWidth=1 GridLines=”both” runat=”server”/> </body>
</html>
When you run the page, you’ll notice that nothing is displayed. That’s because we haven’t added any cells to the data. By examining the HTML output from the page, you should, however, see the HTML table. Here is the HTML generated in IE 5.5:
<html> <head> </head> <body>
<table id=”tblExample” rules=”all” border=”1” style=”border-width:1px;border-style:solid;”> </table>
</body> </html>
If we further examine the HTML output, we see that there is some HTML that we didn’t add. For example, the style and border attributes were created for us by the ASP.NET engine based on the properties we set for the Table Web control (here: BorderWidthand
GridLines). This is how browser compatibility is handled. The ASP.NET engine sniffs the browser to determine its capabilities and sends HTML that the browser can handle. This is a simple operation, but it’s really a pain if you’re forced to do it yourself.
Next, you’ll expand on the previous sample page by adding a few rows and columns to the table. There are two ways to accomplish this: you can add TableRowand TableCellWeb controls (a) manually or (b) programmatically. Listing 9-1 shows the manual approach. Listing 9-1 Using intrinsic controls (manually)
<html> <head> </head> <body>
<asp:Table id=”tblExample” BorderWidth=1 GridLines=”both” runat=”server”> <asp:TableRow>
<asp:TableCell>Row 1, Cell 1</asp:TableCell> <asp:TableCell>Row 1, Cell 2</asp:TableCell> <asp:TableCell>Row 1, Cell 3</asp:TableCell> <asp:TableCell>Row 1, Cell 4</asp:TableCell> <asp:TableCell>Row 1, Cell 5</asp:TableCell> </asp:TableRow>
<asp:TableRow>
<asp:TableCell>Row 2, Cell 1</asp:TableCell> <asp:TableCell>Row 2, Cell 2</asp:TableCell> <asp:TableCell>Row 2, Cell 3</asp:TableCell> <asp:TableCell>Row 2, Cell 4</asp:TableCell> <asp:TableCell>Row 2, Cell 5</asp:TableCell> </asp:TableRow>
</asp:Table> </body> </html>
You’ll notice that all we are doing here is creating rows using the TableRowWeb control and cells using the TableCellWeb control. There are two things we would like to mention here. First, the Web controls must be formed correctly, which means that if we open, for example, a TableCell, we must close it using the following (XML) syntax:
</asp:TableCell>
Secondly, it isn’t necessary to include the runat=”server”attribute/value pair when creating the TableRowand TableCellWeb controls in the example because they belong to the Table Web control that did include the runat=”server”attribute/value pair. As a rule, you should always include it so there’s no confusion about what you’re doing. (We didn’t include the runat=”server”attribute/value pair for demonstration purposes only.)
Manually adding rows and cells is great if you’re using the table for formatting and know exactly how many rows and cells you need. In many cases, however, you don’t have this information so it may be better to take the programmatic approach. Listing 9-2 shows the code listing that, when run, creates 10 rows and 50 cells programmatically.
Listing 9-2 Using intrinsic controls (programmatically)
<script language=”VB” runat=”server”>
Sub Page_Load(Sender As Object, E As EventArgs) Dim iRowCount As Integer ‘ Current row count
Dim iColumnCount As Integer ‘ Total number of columns (columns) For iRowCount = 1 To 10
Dim tRow As New TableRow() For iColumnCount = 1 To 5
Dim tCell As New TableCell()
tCell.Text = “Row “ & iRowCount & “, Cell “ & iColumnCount tRow.Cells.Add(tCell) ‘ Add new TableCell object to row Next tblExample.Rows.Add(tRow) Next End Sub </script> <html> <head> </head> <body>
<asp:Table id=”tblExample” BorderWidth=1 GridLines=”both” runat=”server”/> </body>
</html>
In the body of the HTML, we declare a TableWeb control. Since we are not initially declaring any TableRowsor TableCells, we end the Table declaration with />rather than >. We could have just as easily closed the TableWeb control using the </asp:Table>syntax. Again, a matter of personal preference! At the beginning of the page, we have included a
simple script within the Page_Loadevent that adds rows and cells rows to the table program- matically. Every time the page is called, this script will be executed. Because this is not a book about VB.NET, I won’t go into the syntax of the script. The important thing to realize is that by using an object’s properties, methods, and events, you can programmatically create other objects at runtime.