Build Your Own ASP.NET Website Using C# and VB.NET. Pt. 4. | 4

Build Your Own ASP.NET Website Using C# and VB.NET. Pt. 4.

Introduction to Web Controls

As we’ve just seen, Web Forms allow users to interact with our site using Web controls. With Web controls, Microsoft basically reinvented HTML from scratch. For example, it created two different Web controls that correspond to the two different versions of the HTML <select> tag: a DropDownList control and a ListBox control. This means there isn’t a direct one-to-one correspondence between the Web controls and standard HTML tags, as there is with HTML controls. Web controls follow the same basic pattern as HTML tags, but the tag name is preceded by asp: and the name is capitalized using "CamelCasing." Consider the HTML <input> tag, which creates an input text box on screen: 

<input type="text" name="username" size="30" />

The equivalent Web control is the TextBox control, and it would look like this: 

<asp:TextBox id="username" Columns="30" runat="server">
</asp:TextBox>

Note that, unlike many HTML tags, Web controls always require a closing tag (the </asp:TextBox> part above). We can also use the shorthand /> syntax if our Web control tag doesn’t contain anything between its opening and closing tags. So, we could also write this TextBox like so:

<asp:TextBox id="username" Columns="30" runat="server" />

To sum up, the key points to remember when working with Web controls are:

There are more Web controls than HTML controls, and some offer advanced features that simply aren’t available in HTML alone. Controls that we’ll discuss in this and future chapters are as follows:

The basic Web controls perform the on-screen layout of a Web page, and mirror in many ways the HTML controls that are based on regular HTML. However, they offer some new refinements and enhancements, and should be used in place of HTML whenever possible. In this section, we’ll look at the controls in this group, namely:

By default, the Button control renders the same form submit button that’s rendered by the HTML <input type="Submit"> tag. When a button is clicked, the form containing the button is submitted to the server for processing, and both click and command events are raised. The following code displays a Button control and a Label:

<asp:Button id="btnSubmit" Text="Submit" runat="server" 
    OnClick="WriteText" />
<asp:Label id="lblMessage" runat="server" />

Notice the OnClick attribute on the control. Unlike the HtmlButton HTML control, OnClick assigns a server-side event handler—there is no need to remember to use OnServerClick. When the button is clicked, the Click event is raised and the WriteText() subroutine is called. The WriteText() subroutine will contain the code that performs the intended function for this button, such as displaying a message for the user:

Public Sub WriteText(s As Object, e As EventArgs)
  lblMessage.Text = "Hello World"
End Sub
public void WriteText(Object s, EventArgs e) {
  lblMessage.Text = "Hello World";
}

It’s important to realize that most Web controls have events associated with them, and the basic idea and techniques are the same as for the Click event of the Button control.

Like the RadioButton control, the RadioButtonList control represents radio buttons. However, the RadioButtonList control represents a list of radio buttons and uses more compact syntax. Here’s an example:

<asp:RadioButtonList id="radlFavColor" runat="server">
  <asp:ListItem Text="Red" Value="red" />
  <asp:ListItem Text="Blue" Value="blue" />
  <asp:ListItem Text="Green" Value="green" />
</asp:RadioButtonList>

One of the great features of the RadioButtonList is its ability to bind to a data source. For instance, imagine you have a list of employees in a database. You could create a page that binds a selection from that database to the RadioButtonList control, to list dynamically certain employees within the control. The user would then be able to select one (and only one) employee from that list, and our code could determine the choice.

The most useful event produced by RadioButtonList is the SelectedIndexChanged event, to which you can assign a handler with the OnSelectedIndexChanged attribute

A ListBox control equates to the HTML <select> tag with the size attribute set to 2 or more. The ListBox control allows you to select items from a multiline menu. If you set the SelectionMode attribute to Multiple, the user will be able to select more than one item from the list, as in this example:

<asp:ListBox id="listTechnologies" runat="server"
    SelectionMode="Multiple">
  <asp:ListItem Text="ASP.NET" Value="aspnet" />
  <asp:ListItem Text="JSP" Value="jsp" />
  <asp:ListItem Text="PHP" Value="php" />
  <asp:ListItem Text="CGI" Value="cgi" />
  <asp:ListItem Text="Coldfusion" Value="cf" />
</asp:ListBox>

Again, because the ListBox control is a collection-based control, it can be dynamically bound to a data source. The most useful event that this control provides is—you guessed it—SelectedIndexChanged, with the corresponding OnSelectedIndexChanged attribute.

The Panel control functions similarly to the <div> tag in HTML, in that the set of items that resides within the tag can be manipulated as a group. For instance, the Panel could be made visible or hidden by a Button’s Click event:

<asp:Panel id="pnlMyPanel" runat="server">
  <p>Username:
    <asp:TextBox id="txtUsername" Columns="30" runat="server" />
  </p>
  <p>Password:
    <asp:TextBox id="txtPassword" TextMode="Password" 
        Columns="30" runat="server" /></p>
</asp:Panel>
<asp:Button id="btnHide" Text="Hide Panel" OnClick="HidePanel" 
    runat="server" />

The code above creates two TextBox controls within a Panel control. The Button control is outside of the panel. The HidePanel() subroutine would then control the Panel’s visibility by setting its Visible property to False:

Public Sub HidePanel(s As Object, e As EventArgs)
  pnlMyPanel.Visible = False
End Sub
public void HidePanel(Object s, EventArgs e) {
  pnlMyPanel.Visible = false;
}

In this case, when the user clicks the button, the Click event is raised and the HidePanel() subroutine is called, which sets the Visible property of the Panel control to False.

Created: March 27, 2003
Revised: July 12, 2004

URL: http://webreference.com/programming/asp_net4/1