Working with HTML Server Controls

To work with HTML controls using Visual Basic code, you must make them into HTML server controls and handle them on the server. When you make them into server controls, those controls become available in a project's .aspx.vb code for your use, although only limited events are available (and the user must click a standard button or submit button before the page gets sent back to the server for event handling).

You can see how this works in the HTMLControls example that appears in Figure 19.1—all the controls you see in that figure have been made into server controls, and Visual Basic gives them names automatically, like Button1 and Text1. When you click the button (caption: Button) in this example, the text "You clicked the button" appears in the text field. To make this happen, you can use the ServerClick event, which is the default event for HTML server buttons; just double-click the button in the Web form designer to open the event handler for the ServerClick event:

    Private Sub Button1_ServerClick(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles Button1.ServerClick

    End Sub

And I add this code to assign the text "You clicked the button" to the text field's Value property (note that we're dealing with HTML controls here—with Web server controls, you'd use the Text property of this control, but because this control corresponds to an HTML text field, you must use the Value property):

    Private Sub Button1_ServerClick(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles Button1.ServerClick
        Text1.Value = "You clicked the button."
    End Sub

In the same way, you can handle the ServerChange event of the checkbox, Checkbox1, like this, making it display the message "You clicked the check box":

    Private Sub Checkbox1_ServerChange(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles Checkbox1.ServerChange
        Text1.Value = "You clicked the check box."
    End Sub

It's important to bear in mind that what we're working with here are really HTML server controls, not Visual Basic's Web server controls (which look a lot like any other Visual Basic controls). All these HTML controls have plenty of attributes that are not reflected in Visual Basic properties; however, you can reach those attributes with the Attributes property. This property returns a collection of the attributes in the control, which you can work with as you like. For example, in the HTMLControls example, I use the onblur attribute of the text field to display an alert box (such as a message box, but displayed by the browser) when the text field loses the focus (as when you've been typing in the text field and then click somewhere else). I do that by connecting JavaScript to the onblur attribute, like this:

    Private Sub Page_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Load
        Text1.Attributes("onblur") = _
            "javascript:alert('Text field lost the focus');"
    End Sub

And in this way, you can gain access to all the attributes of HTML server controls, and even add client-side code to them. Here's what WebForm1.aspx looks like for this example:

<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="HTMLControls.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>HTMLControls example</title>
<meta content="Microsoft Visual Studio.NET 7.0" name=GENERATOR>
<meta content="Visual Basic 7.0" name=CODE_LANGUAGE>
<meta content=JavaScript name=vs_defaultClientScript>
<meta content=http://schemas.microsoft.com/intellisense/ie5
    name=vs_targetSchema>
  </HEAD>
<body MS_POSITIONING="GridLayout">
<form id=Form1 method=post
runat="server">
<DIV
style="DISPLAY: inline; Z-INDEX: 102; LEFT: 46px; WIDTH: 70px;
POSITION: absolute; TOP: 46px; HEIGHT: 15px"
ms_positioning="FlowLayout" id=DIV1 runat="server">Label</DIV>
<DIV
style="DISPLAY: inline; Z-INDEX: 113; LEFT: 72px; WIDTH: 70px;
BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE:
none; POSITION: absolute; TOP: 137px; HEIGHT: 15px;
BORDER-BOTTOM-STYLE: none" ms_positioning="FlowLayout">
Check Box</DIV><SELECT style="Z-INDEX: 111; LEFT: 301px; WIDTH:
114px; POSITION: absolute; TOP: 136px; HEIGHT: 38px"
size=2> <OPTION>List Item 1</OPTION><OPTION>List Item 2</OPTION>
<OPTION>List Item 3</OPTION></SELECT>
<TABLE
style="Z-INDEX: 110; LEFT: 41px; WIDTH: 376px; POSITION: absolute;
TOP: 188px; HEIGHT: 72px"
cellSpacing=1 cellPadding=1 width=376 border=1>
  <TR>
    <TD id=TD1 runat="server">1</TD>
    <TD>2</TD>
    <TD>3</TD></TR>
  <TR>
    <TD>4</TD>
    <TD>5</TD>
    <TD>6</TD></TR>
  <TR>
    <TD>7</TD>
    <TD>8</TD>
    <TD>9</TD></TR></TABLE>
<INPUT
style="Z-INDEX: 109; LEFT: 154px; WIDTH: 20px; POSITION: absolute;
TOP: 137px; HEIGHT: 20px" type=radio id=Radio1 title="" CHECKED
value=Radio1 name="" runat="server">
<INPUT style="Z-INDEX: 108; LEFT: 44px; POSITION: absolute; TOP:
137px" type=checkbox id=Checkbox1 title="Check Box" name=Checkbox1
runat="server" CHECKED>
<TEXTAREA style="Z-INDEX: 107; LEFT: 231px; WIDTH: 183px;
POSITION: absolute; TOP: 83px; HEIGHT: 38px" rows=2 cols=20
id=TEXTAREA1 name=TEXTAREA1 runat="server">
Text Area</TEXTAREA>
<INPUT
style="Z-INDEX: 106; LEFT: 47px; WIDTH: 155px; POSITION: absolute;
TOP: 90px; HEIGHT: 22px" type=text value="Text Field" id=Text1
name=Text1 runat="server">
<INPUT style="Z-INDEX: 105; LEFT: 348px; WIDTH: 63px; POSITION:
absolute; TOP: 43px; HEIGHT: 24px" type=submit value=Submit
id=Submit1 name=Submit1 runat="server">
<INPUT style="Z-INDEX: 104; LEFT: 257px; WIDTH: 52px; POSITION:
absolute; TOP: 43px; HEIGHT: 24px" type=reset value=Reset id=Reset1
name=Reset1 runat="server">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT style="Z-INDEX: 103; LEFT: 158px; POSITION: absolute; TOP: 43px"
type=button value=Button id=Button1 name=Button1 runat="server">&nbsp;

<DIV
style="DISPLAY: inline; Z-INDEX: 114; LEFT: 183px; WIDTH: 94px;
POSITION: absolute; TOP: 136px; HEIGHT: 22px"
ms_positioning="FlowLayout">Radio Button</DIV> </form>
  </body>
</HTML>

And here's what WebForm1.aspx.vb looks like for this example:

Public Class WebForm1
    Inherits System.Web.UI.Page
    Protected WithEvents DIV1 As _
        System.Web.UI.HtmlControls.HtmlGenericControl
    Protected WithEvents Button1 As _
        System.Web.UI.HtmlControls.HtmlInputButton
    Protected WithEvents Reset1 As _
        System.Web.UI.HtmlControls.HtmlInputButton
    Protected WithEvents Submit1 As _
        System.Web.UI.HtmlControls.HtmlInputButton
    Protected WithEvents Text1 As System.Web.UI.HtmlControls.HtmlInputText
    Protected WithEvents TD1 As System.Web.UI.HtmlControls.HtmlTableCell
    Protected WithEvents Checkbox1 As _
        System.Web.UI.HtmlControls.HtmlInputCheckBox
    Protected WithEvents Radio1 As _
        System.Web.UI.HtmlControls.HtmlInputRadioButton
    Protected WithEvents TEXTAREA1 As _
        System.Web.UI.HtmlControls.HtmlTextArea
#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> _
        Private Sub InitializeComponent()

    End Sub

    Private Sub Page_Init(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Load
        'Put user code to initialize the page here
        Text1.Attributes("onblur") = _
            "javascript:alert('Text field lost the focus');"
    End Sub

    Private Sub Button1_ServerClick(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles Button1.ServerClick
        Text1.Value = "You clicked the button."
    End Sub

    Private Sub Checkbox1_ServerChange(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles Checkbox1.ServerChange
        Text1.Value = "You clicked the check box."
    End Sub
End Class

And now it's time to turn to the specific details of the HTML server controls classes in the Immediate Solutions section.