Beginning ASP.NET Using VB.NET - Chapter 14: ASP.NET Server Controls

User Controls

User controls, as you might guess, are controls that you write yourself. You create these controls with any text editor, or with the assistance of an IDE like Visual Studio.NET. A user control can consist of text, HTML tags, HTML server controls, and ASP.NET server controls, along with any additional server-side code to handle events and perform server-side processing. The purpose of a user control is to provide the ability to reuse common user interface functionality across your ASP.NET web applications. For example, consider a typical logon page. You might have one textbox control for the logon name, another for the password, and a button control to submit the form logon data to the server. You might additionally have some validation controls to validate the user's input, and various server- side code to perform the actual logon authentication. If this was a common set of functionality that was going to be used by several pages in your web application, you might consider creating a user control to facilitate this functionality so that you only need write it once. You can think of a user control as being very similar to an ASP.NET web form. However, unlike a web form, a user control must always be included into an existing web form in order to work. A user control cannot load independently from a web form. User controls are covered in more detail in Chapter 13.

Now let's get into the substance of this chapter -- ASP.NET Server Controls.

ASP.NET Server Controls

ASP.NET server controls serve as the building blocks for creating ASP.NET web forms. Like their HTML counterparts, ASP.NET server controls provide all the basic controls necessary for building web forms (Button, ListBox, CheckBox, TextBox, et al.), as well as a collection of rich controls (controls with several functions -- we'll look at them later on), like the Calendar and DataGrid controls. The various control families are categorized and discussed later in this section, along with many mini- examples to demonstrate syntax and other features. At this point though, you might be wondering what benefits there are, if any, to using ASP.NET server controls instead of standard HTML controls. Here's a listing of some of the benefits ASP.NET server controls offer us:

• Rich Object Model
• Automatic Browser Detection
• Properties
• Events

Rich Object Model

ASP.NET server controls draw from the rich features of the .NET Framework. As such, each of the ASP.NET controls inherits base methods, properties and events from the System.Web.UI.WebControls base class. As you may recall from previous chapters, inheritance is a key feature of object oriented design and programming. When instantiating an ASP.NET server control, you're really creating an instance of an object that gives you access to the properties, methods, and events of its base class.

Automatic Browser Detection

ASP.NET server controls detect client browser capabilities, and create the appropriate HTML and client-side script for the client browser. In other words, ASP.NET pages, and the controls within them, are compiled and "served up," meaning they're not merely static text files. For example, consider the following ASP.NET button control declaration:

<asp:Button id="SampleButton" runat="server" Text="My Button"/>

When this control is processed on the server, the resultant HTML generated for both Netscape and Internet Explorer will be pretty much the same:

<input type="submit" name="SampleButton" value="My Button"    
id="SampleButton" />

Depending on the type of browser and its limitations and capabilities, as well as the type of ASP.NET control being rendered, however, there may in fact be a difference in the HTML generated. In the case of a simple button control, the significance is not immediately apparent -- just about any browser today will be able to render a standard button. The benefits for the developer are substantial once events, properties and validation come into play, however, as these are all factors which affect how the ASP.NET control is generated for the client browser. The bottom line here is that the HTML/script rendered for the different browsers (IE, Netscape, Opera) is all handled by the ASP.NET server control and, by and large, the developer is freed from having to worry too much about client browser capabilities and/or limitations.

Properties

All ASP.NET controls share a common set of base properties, as well as their own class-specific properties. These properties allow you to change the look and even the behavior of the control. Throughout this chapter, you will be exposed to a variety of properties for the various ASP.NET server controls. Some of the more common base class properties shared by all ASP.NET server controls include:

• BackColor -- the background color of the control. The possible values for all color properties can be ascertained by referencing the .NET Framework's Color structure properties in the SDK Documentation (or by using ILDasm or the class browser sample). For example, AliceBlue, AntiqueWhite, or even a hexadecimal value like #C8C8C8.
• ForeColor -- the foreground color of the control.
• BorderWidth -- the width of the border of the control, in pixels.
• Visible -- if set to True (the default for all controls) the control will be displayed. If set to False, the control will be hidden. This property is useful for when you want to hide a particular control on the web form. For example, if you were obtaining details from a user, and in one box, they had declared their nationality as English, then you might want to hide another box that asks them for their Social Security Number.
• Enabled -- whether on not the control is enabled. If set to False, the control will appear grayed out, and will not process or respond to events until its Enabled property is set to True.
• Height -- the height of the control in pixels.
• Width -- the width of the control in pixels.
• ToolTip -- hover text displayed dynamically on mouse roll-over. Typically, used to supply additional help without taking up space on the form.
• Font-Size -- the size of the control's font.

The above properties are merely an abbreviated listing; many more common properties are available. To see these, have a look at the SDK Documentation. An important thing to note is that not all browsers support all the possible property settings. You needn't worry too much about this however, because, when ASP.NET server controls are rendered, the output generated for the target browser will generally be suitable for that browser, whatever its capabilities or limitations are.

The following is an example of an ASP.NET Button server control with several of the common base class properties assigned, to give the it a rather distinctive look:

<asp:Button id="MyButton" runat="server" Text="I'm an ASP.NET    
server control Button!"    
 BackColor="purple"    
 ForeColor="white"    
 BorderWidth="4"    
 BorderStyle="Ridge"      
 ToolTip="Common Properties Example!"    
 Font-Name="Tahoma"    
 Font-Size="16"    
 Font-Bold="True"    
/>

When rendered and displayed in the client browser, this ASP.NET Button server control will look something like this:

The HTML generated for this control (for Internet Explorer 6.0) looks like this:

<input type="submit" name="MyButton" value="I'm an ASP.NET    
server control Button!"    
id="MyButton" title="Common Properties Example!"    
style="color:White;background-  
color:Purple;border-width:4px;border-  
style:Ridge;font-family:Tahoma;font-  
size:16pt;font-weight:bold;" />

Have a go yourself -- to look at the HTML, just select View > Source.