80 |
Saturday Morning |
More flexible controls. Some controls offer the ability to specify whether a control’s event causes immediate posting to the server or whether it is cached and raised when the form is submitted.
Better communication between controls. This includes the ability to pass events from a nested control (such as a button in a table) to the container control.
At this point, you may be wondering why Microsoft opted to offer both HTML and Web controls. The answer is simple: flexibility. You can use whichever set of controls you feel more comfortable with. HTML controls keep you closer to the content. By contrast, Web controls provide a more consistent programming model, but distance you a little from the actual output.
You use Web controls in the same way that you use HTML controls. The only difference is that they must have the runat=”server” name/value pair. You don’t have to do anything special to access this code library as it’s available by default, but you do have to ensure you use the correct tag prefix (or namespace) when using the controls.
In general, Web controls can be grouped into one of four basic categories:
Intrinsic controls
List controls
Rich controls
Validation controls
Intrinsic Controls
The intrinsic controls are designed to provide replacements for the standard HTML controls. Here is a list of the intrinsic controls:
Button |
CheckBox |
Hyperlink |
Image |
Label |
LinkButton |
Panel |
Table |
TableCell |
TableRow |
TextBox |
|
Using intrinsic controls
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 Table Web control:
<html>
<head>
</head>
Session 9—Using Web Controls |
81 |
<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: BorderWidth and 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 TableRow and TableCell Web 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>
82 |
Saturday Morning |
You’ll notice that all we are doing here is creating rows using the TableRow Web control and cells using the TableCell Web 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 TableRow and TableCell Web 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 Table Web control. Since we are not initially declaring any TableRows or TableCells, we end the Table declaration with /> rather than >.
We could have just as easily closed the Table Web control using the </asp:Table> syntax.
Again, a matter of personal preference! At the beginning of the page, we have included a
Session 9—Using Web Controls |
83 |
simple script within the Page_Load event that adds rows and cells rows to the table programmatically. 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.
Handling intrinsic Web control events
Now may be as good a time as any to talk about handling Web control events. All ASP.NET events are handled on the server rather than the client. This is kind of a new way of thinking for many developers who are used to writing client-side code, but it has the advantage of providing cross-browser compatibility. Each and every Web control has its own set of events. You’ll have to refer to your ASP.NET documentation for a complete listing of each control’s events. For example, the ASP.NET Button Web control has an OnClick event that is fired when the button is clicked. Listing 9-3 illustrates handling an OnClick event.
Listing 9-3 Handling OnClick events
<script language=”VB” runat=”server”>
Sub btnTest_Click(Sender As Object, E As EventArgs) If tblExample.Rows.Count = 0 Then
Dim |
iRowCount As |
Integer |
‘ Current |
row count |
Dim |
iColumnCount |
As Integer |
‘ Total |
number of cells (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 If
End Sub </script> <html> <head> </head> <body>
<asp:Table id=”tblExample” BorderWidth=1 GridLines=”both” runat=”server”/> <form runat=”server”>
<asp:Button id=”btnTest” OnClick=”btnTest_Click” Text=”Insert Rows” runat=”server”/>
</form>
</body>
</html>