Programming Web Controls
Web Controls also emit raw HTML back to the client Web browser. They can handle client-side and server-
side events and support a number of useful properties and methods.
Given that HTML Server Controls and Web Controls ultimately do the exact same thing (emit back HTML),
why do they both exist? The short answer is to lessen the learning curve. Classic ASP programmers / HTML
programmers can make use of the HTML Server controls as they learn Web Controls (given that they look
very much like the standard HTML controls). Web Controls are easy to use for those who come from a
traditional Windows development background.
Furthermore, if a company has a team of HTML folks, they can build the page’s HTML user interface, pass
it over to the ASP.NET developers, and allow them to convert them to .aspx files. Finally, if upgrading a Web
page from HTML/ASP to ASP.NET, selected HTML controls can be upgraded to HTML Server Controls.
Web Controls have been designed to look and behave like Windows controls. For example, these controls also
integrate tightly into the IDE (e.g. events can be handled via the Properties Window). Furthermore, Web
Controls have many exotic controls not available in the HTML controls (TreeView, Menu, Calendar, etc).
The Visual Studio Toolbox groups the ASP.NET Web Controls into several different categories.
From a bird’s eye view, the Toolbox categories break down as so:
The members of the ‘Standard’ section require little comment, as they look and feel quite similar to their
Windows Forms counterparts. However, this chapter will examine some of the more interesting aspects of
these simple controls as well as the validation controls. Future chapters will examine the more exotic
categories (Data, Navigation, Login, WebParts, and AJAX) where appropriate.
Most Web Controls inherit from the WebControl base class. It’s located in the System.Web.UI.
WebControls namespace. As expected, the WebControl base class defines common GUI properties,
methods and events for Web Controls. They should appear familiar to developers who’ve worked with
Windows Forms development.
Here are some (but not all) of the properties of interest.
To demonstrate Web Controls, the previous server-side HTML Server Control project is recreated here to
compare the differences. The outputted HTML markup will be identical. The generated code in the *.aspx file
however, makes use of the <asp:> prefix when defining Web Control tags.
All Web Controls must have the runat="server" attribute. For this example, the OnClick attribute must also
be set with the name of the method that will run in the code-behind file.
The code-behind file looks identical to the HTML Server Control example, but now is making use of the
WebControls derived types. Note that this event handler logic is able to use the more Windows-centric Text
property to pull the value of the text box.
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ }
protected void btnPostback_Click(object sender, EventArgs e)
{
// Get birthday value.
string userBDay = this.txtUserBirthday.Text;
// Process data...
}
}
As the control’s look and feel is altered using the Properties window, the underlying <asp:> tags are updated
with name / value pairs that represent the values. At runtime, the ASP.NET engine will read these values to
create the HTML object with default values (within the Init event). After the Init event, the incoming view
state is used to refresh the values of the widgets upon post back (Load event).
For example, if the BackColor, BorderColor and BorderStyle properties of a TextBox control are set like this:
The following attributes are set:
<asp:TextBox ID="txtUserBirthday" runat="server" BackColor="#FFC0C0"
BorderColor="Black" BorderStyle="Ridge">
</asp:TextBox>
When the Web page is requested from the Web server, it will use this information to render out the HTML
control with the set appropriate attributes.
The HTML looks like the following:
<input name="txtUserBirthday" type="text" id="txtUserBirthday" style="background-color:#FFC0C0;
border-color:Black;border style:Ridge;"/>
Web Controls also emit raw HTML back to the client Web browser. They can handle client-side and server-
side events and support a number of useful properties and methods.
Given that HTML Server Controls and Web Controls ultimately do the exact same thing (emit back HTML),
why do they both exist? The short answer is to lessen the learning curve. Classic ASP programmers / HTML
programmers can make use of the HTML Server controls as they learn Web Controls (given that they look
very much like the standard HTML controls). Web Controls are easy to use for those who come from a
traditional Windows development background.
Furthermore, if a company has a team of HTML folks, they can build the page’s HTML user interface, pass
it over to the ASP.NET developers, and allow them to convert them to .aspx files. Finally, if upgrading a Web
page from HTML/ASP to ASP.NET, selected HTML controls can be upgraded to HTML Server Controls.
Web Controls have been designed to look and behave like Windows controls. For example, these controls also
integrate tightly into the IDE (e.g. events can be handled via the Properties Window). Furthermore, Web
Controls have many exotic controls not available in the HTML controls (TreeView, Menu, Calendar, etc).
The Visual Studio Toolbox groups the ASP.NET Web Controls into several different categories.
From a bird’s eye view, the Toolbox categories break down as so:
The members of the ‘Standard’ section require little comment, as they look and feel quite similar to their
Windows Forms counterparts. However, this chapter will examine some of the more interesting aspects of
these simple controls as well as the validation controls. Future chapters will examine the more exotic
categories (Data, Navigation, Login, WebParts, and AJAX) where appropriate.
Most Web Controls inherit from the WebControl base class. It’s located in the System.Web.UI.
WebControls namespace. As expected, the WebControl base class defines common GUI properties,
methods and events for Web Controls. They should appear familiar to developers who’ve worked with
Windows Forms development.
Here are some (but not all) of the properties of interest.
To demonstrate Web Controls, the previous server-side HTML Server Control project is recreated here to
compare the differences. The outputted HTML markup will be identical. The generated code in the *.aspx file
however, makes use of the <asp:> prefix when defining Web Control tags.
All Web Controls must have the runat="server" attribute. For this example, the OnClick attribute must also
be set with the name of the method that will run in the code-behind file.
The code-behind file looks identical to the HTML Server Control example, but now is making use of the
WebControls derived types. Note that this event handler logic is able to use the more Windows-centric Text
property to pull the value of the text box.
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ }
protected void btnPostback_Click(object sender, EventArgs e)
{
// Get birthday value.
string userBDay = this.txtUserBirthday.Text;
// Process data...
}
}
As the control’s look and feel is altered using the Properties window, the underlying <asp:> tags are updated
with name / value pairs that represent the values. At runtime, the ASP.NET engine will read these values to
create the HTML object with default values (within the Init event). After the Init event, the incoming view
state is used to refresh the values of the widgets upon post back (Load event).
For example, if the BackColor, BorderColor and BorderStyle properties of a TextBox control are set like this:
The following attributes are set:
<asp:TextBox ID="txtUserBirthday" runat="server" BackColor="#FFC0C0"
BorderColor="Black" BorderStyle="Ridge">
</asp:TextBox>
When the Web page is requested from the Web server, it will use this information to render out the HTML
control with the set appropriate attributes.
The HTML looks like the following:
<input name="txtUserBirthday" type="text" id="txtUserBirthday" style="background-color:#FFC0C0;
border-color:Black;border style:Ridge;"/>
Programming Web Controls
Table of Contents
Copyright (c) 2008. Intertech, Inc. All Rights Reserved. This information is to be used exclusively as an
online learning aid. Any attempts to copy, reproduce, or use for training is strictly prohibited.
online learning aid. Any attempts to copy, reproduce, or use for training is strictly prohibited.
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Courseware
Training Resources
Tutorials
|
|
Services