Beginning ASP.NET 1.1 with Visual C# .NET 1002003 [Electronic resources] نسخه متنی

Web Controls

ASP.NET's Web controls are the building blocks for creating ASP.NET Web forms. Like their HTML counterparts, Web controls provide all the basic controls necessary for building Web forms (

Button ,

ListBox ,

CheckBox ,

TextBox , and many more), as well as a collection of rich controls, such as the

Calendar and

DataGrid controls. As we discussed earlier, these controls have a rich object model, such as the ability to detect which browser is displaying them and a set of properties and events that we can use as we develop sites.

Rich Object Model

Web controls draw from the rich features of the .NET Framework. As such, they inherit their base methods, properties, and events from either the

System.Web.UI.WebControls.Control or

System.Web.UI.WebControls.WebControl base classes.

As discussed in Chapter 7, inheritance is a key feature of object-oriented design and programming. When instantiating a Web control, you're really creating an instance of an object that gives you access to the properties, methods, and events of its base class and interface. Web controls have style properties that are instances of

CssStyle objects. We can set colors using standard .NET

Color objects, and specify dimensions using strongly typed Web measurement objects. By comparison, HTML controls generally have weakly-typed properties mapping to their attributes, allowing any string to be set as a value.

Automatic Browser Detection

Web controls detect client browser capabilities and create the appropriate HTML and client-side script for the client browser. The difference in rendering won't be apparent with a control such as a

Button control, but you might find that a script-rich control such as a validation control renders differently on different browsers. Or you may find that older non-CSS compliant browsers may have style rendered as old style attributes, instead of

style=" attributes. The HTML (or the script) rendered for different browsers is all handled by the Web control, and by and large, the developer does not have to worry too much about client browser capabilities or limitations.

Properties

All Web controls share a common set of base properties and also have their own class-specific properties. These properties allow you to change the look and behavior of the control. Some of the common base class properties shared by all ASP.NET server controls include:

BackColor : The background color of the control, 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 units of either exs, ems, pixels, points, picas, inches, centimeters (or millimeters), or a percentage value.

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 control they had declared their nationality as British, you might want to hide another control that asks them for their Social Security Number (or SSN; only US residents have an SSN) while displaying a third that asks for their National Insurance number (only UK residents have an NI 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 : Height of the control.

Width : Width of the control.

ToolTip : Hover text displayed dynamically on mouse rollover. Typically used to supply additional help without taking up space on the form.

Font-Size :–The font size of the control.

The above properties are merely an abbreviated listing; many more common properties are available (you can investigate these in depth in the SDK documentation).

The following code snippet is an example of an ASP.NET

Button Web control with several of the common base class properties assigned to give it a 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, the button will look something like Figure 10-3:

Figure 10-3

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;" /> 

To look at the HTML, just select View | Source from your browser.

As an alternative method of adding styles, all Web controls have a

style property. This property acts in a similar manner to the

style attribute of an HTML tag, and makes it possible to apply any CSS- compatible style to a control. Using this property, the code used to generate this control would be as follows:

<asp:Button id="MyButton" runat="server"  
Text="I'm an ASP.NET server control Button!" 
style="color:White;background-color:Purple; 
border-width:4px;border-style:Ridge; 
font-family:Tahoma;font-size:16pt;font-weight:bold;" 
/> 

Finally, you can also use the

CssClass attribute of any Web control to specify that the control inherits styling information from the appropriate class in the underlying stylesheet for the page. For example, the button could also have been written as follows:

<asp:Button id="MyButton" runat="server"  
Text="I'm an ASP.NET server control Button!" 
CssClass="StylishButton" 
/> 

The appropriate CSS stylesheet would then need to contain the following declaration:

.StylishButton{ 
color:White; 
background-color:Purple; 
border-width:4px; 
border-style:Ridge; 
font-family:Tahoma; 
font-size:16pt; 
font-weight:bold; 
} 

These three variations on the same button are included in the code download for this chapter, along with a very simple stylesheet. They demonstrate that despite the code written in each of the three cases being different, the rendered appearance is the same.