The standard set of web server controls that comes with ASP.NET mirrors the HTML server controls in many ways. However, web server controls offer some new refinements and enhancements, such as support for events and view state, a more consistent set of properties and methods, and more built-in functionality. In this section, we’ll take a look as some of the controls you’re most likely to use in your day-today work.
Remember to use the .NET Framework SDK Documentation whenever you need more details about any of the framework’s classes (or controls). You can access the documentation from the Help > Index menu item in Visual Web Developer. To find a class, simply search for the class’s name. If there are many classes with a given name in different namespaces, you’ll be able to choose the one you want from the Index Results window. For example, you’ll find that there are two classes named Label, located in the System.Web.UI.WebControls and System.Windows.Forms namespaces, as below Figure illustrates. You’ll most likely be interested in the version of the class situated in the WebControls namespace.
Reading this Page_Load handler code, we can see that when the page first loads, the Text property of the Label control with the id of message will be set to “Hello World.”
The following markup displays a Button control and a Label:
Notice the OnClick attribute on the control. 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 to the user:
C#
It’s important to realize that events are associated with most web server controls, and the basic techniques involved in using them, are the same events and techniques we used with the Click event of the Button control. All controls implement a standard set of events because they all inherit from the WebControl base class.
The Click event of the ImageButton receives the coordinates of the point at which the image was clicked:
If it’s specified, the ImageUrl attribute causes the control to display the specified image, in which case the text is demoted to acting as the image’s alternate text.
The main event associated with a CheckBox is the CheckChanged event, which can be handled with the OnCheckChanged attribute. The Checkedproperty is Trueif the checkbox is checked, and False otherwise.
Like the CheckBox control, the main event associated with RadioButtons is the CheckChanged event, which can be handled with the OnCheckChangedattribute. The other control we can use to display radio buttons is RadioButtonList, which we’ll also meet in this chapter.
These areas can be defined using three controls, which generate hot spots of different shapes: CircleHotSpot, RectangleHotSpot, and PolygonHotSpot. Here’s an example that defines an image map with two circular hot spots:
Table : Possible values of HotSpotMode
To configure the action that results when a hot spot is clicked by the user, we set the HotSpotMode property of the ImageMap control, or the HotSpotMode property of the individual hot spot objects, or both, using the values shown in Table 4.2. If the HotSpotMode property is set for the ImageMap control as well as for an individual hot spot, the latter property will override that set for the more general ImageMap control.
The Microsoft .NET Framework SDK Documentation for the ImageMap class and HotSpotMode enumeration contains detailed examples of the usage of these values.
The following code dynamically adds a new HtmlButton control within the placeholder:
The code above places 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:
In this case, when the user clicks the button, the Click event is raised and the HidePanelsubroutine is called, which sets the Visibleproperty of the Panelcontrol to False.
Remember to use the .NET Framework SDK Documentation whenever you need more details about any of the framework’s classes (or controls). You can access the documentation from the Help > Index menu item in Visual Web Developer. To find a class, simply search for the class’s name. If there are many classes with a given name in different namespaces, you’ll be able to choose the one you want from the Index Results window. For example, you’ll find that there are two classes named Label, located in the System.Web.UI.WebControls and System.Windows.Forms namespaces, as below Figure illustrates. You’ll most likely be interested in the version of the class situated in the WebControls namespace.
Figure : Documentation for the Label control
Label
The easiest way to display static text on your page is simply to add the text to the body of the page without enclosing it in a tag. However, if you want to modify the text displayed on a page using ASP.NET code, you can display your text within a Label control. Here’s a typical example:<asp:Label id="messageLabel" Text="" runat="server" />
The following code sets the Text property of the Label control to display the text “Hello World”:Visual Basic
Public Sub Page_Load()
messageLabel.Text = "Hello World"
End Sub
C#
public void Page_Load()
{
messageLabel.Text = "Hello World";
}
Reading this Page_Load handler code, we can see that when the page first loads, the Text property of the Label control with the id of message will be set to “Hello World.”
Literal
This is perhaps the simplest control in ASP.NET. If you set Literal’s Text property, it will simply insert that text into the output HTML code without altering it. Unlike Label, which has similar functionality, Literal doesn’t wrap the text in <span> tags that would allow the setting of style information.TextBox
The TextBox control is used to create a box in which the user can type or read standard text. You can use the TextMode property to set this control to display text in a single line, across multiple lines, or to hide the text being entered (for instance, in HTML password fields). The following code shows how we might use it in a simple login page:<p>
Username: <asp:TextBox id="userTextBox" TextMode="SingleLine"
Columns="30" runat="server" />
</p>
<p>
Password: <asp:TextBox id="passwordTextBox"
TextMode="Password" Columns="30" runat="server" />
</p>
<p>
Comments: <asp:TextBox id="commentsTextBox"
TextMode="MultiLine" Columns="30" Rows="10"
runat="server" />
</p>
In each of the instances above, the TextMode attribute dictates the kind of text box that’s to be rendered.HiddenField
HiddenFieldis a simple control that renders an inputelement whose typeattribute is set to hidden. We can set its only important property, Value.Button
By default, the Button control renders an input element whose type attribute is set to submit. When a button is clicked, the form containing the button is submitted to the server for processing, and both the Click and Command events are raised.The following markup displays a Button control and a Label:
<asp:Button id="submitButton" Text="Submit" runat="server" OnClick="WriteText" />
<asp:Label id="messageLabel" runat="server" />
Notice the OnClick attribute on the control. 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 to the user:
Visual Basic
Public Sub WriteText(s As Object, e As EventArgs)
messageLabel.Text = "Hello World"
End Sub
C#
public void WriteText(Object s, EventArgs e)
{
messageLabel.Text = "Hello World";
}
It’s important to realize that events are associated with most web server controls, and the basic techniques involved in using them, are the same events and techniques we used with the Click event of the Button control. All controls implement a standard set of events because they all inherit from the WebControl base class.
ImageButton
An ImageButton control is similar to a Button control, but it uses an image that we supply in place of the typical system button graphic. Take a look at this example:<asp:ImageButton id="myImgButton" ImageUrl="myButton.gif"
runat="server" OnClick="WriteText" />
<asp:Label id="messageLabel" runat="server" />
The Click event of the ImageButton receives the coordinates of the point at which the image was clicked:
Visual Basic
Public Sub WriteText(s As Object, e As ImageClickEventArgs)
messageLabel.Text = "Coordinate: " & e.X & "," & e.Y
End Sub
C#
public void WriteText(Object s, ImageClickEventArgs e)
{
messageLabel.Text = "Coordinate: " + e.X + "," + e.Y;
}
LinkButton
A LinkButton control renders a hyperlink that fires the Click event when it’s clicked. From the point of view of ASP.NET code, LinkButtons can be treated in much the same way as buttons, hence the name. Here’s LinkButton in action:<asp:LinkButton id="myLinkButon" Text="Click Here" runat="server" />
HyperLink
The HyperLink control creates on your page a hyperlink that links to the URL in the NavigateUrl property. Unlike the LinkButton control, which offers features such as Click events and validation, HyperLinks are meant to be used to navigate from one page to the next:<asp:HyperLink id="myLink" NavigateUrl="http://www.sitepoint.com/"
ImageUrl="splogo.gif" runat="server">SitePoint</asp:HyperLink>
If it’s specified, the ImageUrl attribute causes the control to display the specified image, in which case the text is demoted to acting as the image’s alternate text.
CheckBox
You can use a CheckBoxcontrol to represent a choice that can have only two possible states—checked or unchecked:<asp:CheckBox id="questionCheck" Text="Yep, ASP.NET is cool!" Checked="True" runat="server" />
The main event associated with a CheckBox is the CheckChanged event, which can be handled with the OnCheckChanged attribute. The Checkedproperty is Trueif the checkbox is checked, and False otherwise.
RadioButton
A RadioButton is a lot like a CheckBox, except that RadioButtons can be grouped to represent a set of options from which only one can be selected. Radio buttons are grouped together using the GroupName property, like so:<asp:RadioButton id="sanDiego" GroupName="City" Text="San Diego" runat="server" /><br />
<asp:RadioButton id="boston" GroupName="City" Text="Boston" runat="server" /><br />
<asp:RadioButton id="phoenix" GroupName="City" Text="Phoenix" runat="server" /><br />
<asp:RadioButton id="seattle" GroupName="City" Text="Seattle" runat="server" />
Like the CheckBox control, the main event associated with RadioButtons is the CheckChanged event, which can be handled with the OnCheckChangedattribute. The other control we can use to display radio buttons is RadioButtonList, which we’ll also meet in this chapter.
Image
An Image control creates an image that can be accessed dynamically from code; it equates to the <img> tag in HTML. Here’s an example:<asp:Image id="myImage" ImageUrl="mygif.gif" runat="server" AlternateText="description" />
ImageMap
The ImageMapcontrol generates HTML to display images that have certain clickable regions called hot spots. Each hot spot reacts in a specific way when it’s clicked by the user.These areas can be defined using three controls, which generate hot spots of different shapes: CircleHotSpot, RectangleHotSpot, and PolygonHotSpot. Here’s an example that defines an image map with two circular hot spots:
Table : Possible values of HotSpotMode
<asp:ImageMap ID="myImageMap" runat="server" ImageUrl="image.jpg">
<asp:CircleHotSpot AlternateText="Button1" Radius="20" X="50" Y="50" />
<asp:CircleHotSpot AlternateText="Button2" Radius="20" X="100" Y="50" />
</asp:ImageMap>
To configure the action that results when a hot spot is clicked by the user, we set the HotSpotMode property of the ImageMap control, or the HotSpotMode property of the individual hot spot objects, or both, using the values shown in Table 4.2. If the HotSpotMode property is set for the ImageMap control as well as for an individual hot spot, the latter property will override that set for the more general ImageMap control.
The Microsoft .NET Framework SDK Documentation for the ImageMap class and HotSpotMode enumeration contains detailed examples of the usage of these values.
PlaceHolder
The PlaceHoldercontrol lets us add elements at a particular place on a page at any time, dynamically, through our code. Here’s what it looks like:<asp:PlaceHolder id="myPlaceHolder" runat="server" />
The following code dynamically adds a new HtmlButton control within the placeholder:
Visual Basic
Public Sub Page_Load()
Dim myButton As HtmlButton = New HtmlButton()
myButton.InnerText = "My New Button"
myPlaceHolder.Controls.Add(myButton)
End Sub
C#
public void Page_Load()
{
HtmlButton myButton = new HtmlButton();
myButton.InnerText = "My New Button";
myPlaceHolder.Controls.Add(myButton);
}
Panel
The Panelcontrol functions similarly to the div element in HTML, in that it allows the set of items that resides within the tag to be manipulated as a group. For instance, the Panel could be made visible or hidden by a Button’s Click event:<asp:Panel id="myPanel" runat="server">
<p>Username: <asp:TextBox id="usernameTextBox" Columns="30" runat="server" /></p>
<p>Password: <asp:TextBox id="passwordTextBox"
TextMode="Password" Columns="30" runat="server" /></p>
</asp:Panel>
<asp:Button id="hideButton" Text="Hide Panel" OnClick="HidePanel" runat="server" />
The code above places 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:
Visual Basic
Public Sub HidePanel(s As Object, e As EventArgs)
myPanel.Visible = False
End Sub
C#
public void HidePanel(Object s, EventArgs e)
{
myPanel.Visible = false;
}
In this case, when the user clicks the button, the Click event is raised and the HidePanelsubroutine is called, which sets the Visibleproperty of the Panelcontrol to False.