HTML Control Classes
We aren't going to examine the entire family tree or hierarchy of an object's inheritance in this book, but you will learn about three objects in the System.Web.UI.HtmlControls namespace that are parents to the other remaining HtmlControls. The three parents are
-
HtmlControl
-
HtmlContainerControl
-
HtmlInput
HtmlControl
The HtmlControl object is pretty important to HTML server controls. Why, you ask? Because every property and method it has is inherited by every HTML server control, that's why. If you learn the properties and methods of the HtmlControl class, you have learned about 80% of the properties and methods of all the objects in the System.Web.UI.HtmlControls namespace. This makes it pretty simple to understand the rest.
The HTML server controls have their own properties and methods, as well, but they all have the properties and methods contained in the HtmlControl object.
This isn't a complete or exhaustive list, but a list of the properties and methods you will most commonly use. I again encourage you to investigate the class browser located at http://www.gotdotnet.com.
I'm also going to show you a few tricks that inheritance allows and that you will be able to use to your advantage in coding your ASP.NET pages and having them deliver the code to the browser that you want. First take a look at the HtmlControl object's properties in Table 6.1
| Property | Description | Readonly |
|---|---|---|
| Attribute | Returns the object's attributes collection. | Yes |
| Disabled | A Boolean (true or false) value that you can get or set that indicates whether a control is disabled. | No |
| EnableViewState | A Boolean (true or false) value that you can get or set that indicates whether a control should maintain its viewstate. | No |
| ID | A string that you can get or set that defines the Identifier for the control. | No |
| Style | Returns the CSSStyleCollection for a control. | Yes |
| TagName | Returns the tag name of an elemen such as input or div. | Yes |
| Visible | A Boolean (true or false) value that you can get or set that indicates whether a control is rendered to HTML for delivery to the client's browser. | No |
Most of these properties are self explanatory, but take a look at the Attribute and Style properties because they both might seem a bit mysterious to you at this point without a little explaination. I'm also going to show you a few tricks with these properties, as well.
Both of these properties may seem a bit odd to you, especially if you try to use them in your ASP.NET pages like this:
Response.Write(MyObject.Attributes) + "<br>" Response.Write(MyObject.Styles)
This returns something that may also look a bit odd to you. This is what you'd get returned to your browser:
<html> <head> <title>HtmlControl</title> </head> <body> System.Web.UI.AttributeCollection <br> System.Web.UI.CssStyleCollection </body> </html>
That doesn't seem very useful. What would you ever need to see that for? You really wouldn't, but what that shows is that these properties are a collection just like the form collection and the QueryString collection that was discussed in Chapter 4 on ASP.NET pages. This collection contains a name/value pair for every attribute or style belonging to the object in question. Take a look:
Visual Basic .NET control_collection_vb.aspx
<%@ page language="vb" runat="server"%> <script runat=server> Sub Page_Load() OurDiv.InnerHTML = "Our align attribute = " + OurDiv.Attributes("align") + "<br>" OurDiv.InnerHTML += "Our font-size style = " + OurDiv.Style("font-size") End Sub </script> <html> <head> <title>HtmlControl Collections</title> </head> <body> <div align="center" style="font-size:14px; font-weight:bold" runat="server"/> </body> </html>
C# control_collection_cs.aspx
<%@ page language="cs" runat="server"%> <script runat=server> void Page_Load(){ OurDiv.InnerHtml = "Our align attribute = " + OurDiv.Attributes["align"] + "<br>"; OurDiv.InnerHtml += "Our font-size style = " + OurDiv.Style["font-size"]; } </script> <html> <head> <title>HtmlControl Collections</title> </head> <body> <div align="center" style="font-size:14px; font-weight:bold" runat="server"/> </body> </html> As you can see in Figure 6.1, specific items are now being retrieved in the AttributeCollection and StyleCollection. As Chapter 4 described, the Response and Request properties of the page are really just instances of other objects. You can also say that Attribute and Style are instances of the System.Web.UI.AttributeCollection and System.Web.UI.StyleCollection. This is inheritance, as well.
Figure 6.1. You can retrieve the values of specific attributes and styles within the Attributes and Styles collection.
This is where you can do some fun stuff now that you understand inheritance a bit better. You know that you are really accessing different classes with both the Attributes and Styles properties. In the HtmlControl, these properties are read-only. It appears that you can't set an attribute or a style to any of the HTML server controls because they are read-only properties. This is true, but only if you look at it on the surface. But because Attribute and Style are really instances of the AttributeCollection and the StyleCollection, you can use its properties and methods, too.
There are two ways you can approach these collections. You can set the value of a specified item as part of the collection, or you can call a method. To set the value of a specific item of the collection, do the reverse of getting the item as you did in the previous code example.
Both these collections also have an Add() method that take two arguments, like this: Add("Name","Value"). You can use this method to add attributes and styles to all your HtmlControl's tags. Look at these two different approaches in action.
Visual Basic .NET control_addattstyle_vb.aspx
<%@ page language="vb" runat="server"%> <script runat=server> Sub Page_Load() OurDiv.InnerHtml = "This is the displayed text" OurDiv.Attributes("align")= "center" OurDiv.Style.Add("font-size","14px") End Sub </script> <html> <head> <title>HtmlControl Collections</title> </head> <body> <div style="font-weight:bold" runat="server"/> </body> </html>
C# control_addattstyle_cs.aspx
<%@ page language="cs" runat="server"%> <script runat=server> void Page_Load(){ OurDiv.InnerHtml = "This is the displayed text"; OurDiv.Attributes["align"] = "center"; OurDiv.Style.Add("font-size","14px"); } </script> <html> <head> <title>HtmlControl Collections</title> </head> <body> <div style="font-weight:bold" runat="server"/> </body> </html> Note |
| Notice again that when you refer to a specific item in a collection of items like this that C# uses square brackets around the item name and Visual Basic .NET uses parentheses. |
In the preceding code example, I used the "set item value" approach to add an attribute to the tag. I used the Add() method in these examples to add a style to the tag.
Following is the resulting HTML. You can see that the attribute and the style have been added to the Div tag. Notice also that .NET is smart enough to know that a style tag already exists, so it simply appended the font-size:14px to the already existing font-weight:bold style and separated them with a semicolon.
<html> <head> <title>HtmlControl Collections</title> </head> <body> <div style="font-weight:bold;font-size:14px;" align="center">This is thedisplayed text</div> </body> </html>
This comes in handy and gives you another tool for manipulating and programming in your ASP.NET applications. Keep this in the back of your mind because I'm sure it will be a handy solution for you at some time during ASP.NET development.
HtmlContainerControl
HtmlContainerControl is used as the parent for any HTML control that requires a closing tag, such as div, form, or select. This class actually inherits all its properties and methods from the HtmlControl class and adds a few of its own. So to clarify, any object that is a container-type object doesn't directly inherit from the HtmlControl class we just discussed. The HtmlContainerControl actually inherits the HtmlControl, and then when a container-type object uses the HtmlContainerControl it gets the HtmlControl class's objects that way.
The two properties that an HtmlContainerControl bring to the party are InnerText and InnerHtml. These properties basically do the same thing. They stick stuff between the open and closing tags of the container-type tag. They just handle the way it's inserted differently. Take a look.
Visual Basic .NET html_container_vb.aspx
<%@ page language="vb" runat="server"%> <script runat=server> Sub Page_Load() dim OurText as String = "<b>Wow!!</b> This is really <i>Cool!</i>" OurDiv.InnerHtml = OurText OurDiv2.InnerText = OurText End Sub </script> <html> <head> <title>HtmlControl InnerStuff</title> </head> <body> <div style="font-size:14px" runat="server"/> <div style="font-size:14px" runat="server"/> </body> </html>
C# html_container_cs.aspx
<%@ page language="cs" runat="server"%> <script runat=server> void Page_Load(){ string OurText = "<b>Wow!!</b> This is really <i>Cool!</i>"; OurDiv.InnerHtml = OurText; OurDiv2.InnerText = OurText; } </script> <html> <head> <title>HtmlControl InnerStuff</title> </head> <body> <div style="font-size:14px" runat="server"/> <div style="font-size:14px" runat="server"/> </body> </html> As you can see in Figure 6.2, InnerHtml and InnerText deal with the same exact string in two totally different ways. OurDiv is displaying the text and rendering it to the browser just the way you'd expect, but what happened to the text in OurDiv2? Look at the delivered file and try to figure it out.
Figure 6.2. InnerHtml and InnerText give you two different ways to insert text into a container-type object.
<html> <head> <title>HtmlControl InnerStuff</title> </head> <body> <div style="font-size:14px"><b>Wow!!</b> This is really <i>Cool!</i></div> <div style="font-size:14px"><b>Wow!!</b> This is really <i>
You can see that OurDiv2 contains some wacky characters. What ASP.NET does when you set the InnerText property is it interprets all characters in your string into the format in which the character will actually be displayed in the browser. For instance, in this example, < is what you would use to produce a less than sign (<) in a browser. ASP.NET interpreted all the characters to their displayable equivalent when using InnerText.
When using InnerHtml, it delivers your text to the HTML document with any HTML tags you used being properly interpreted. This is why when you used InnerHtml, the string of text appeared exactly as you'd expect in a browser.
HtmlInput
Just like the HtmlContainerControl, the HtmlInput inherits from the HtmlControl and adds a few properties of its own for the different object that live off it. It brings three additional properties to the table, as described in Table 6.2.
| Property | Description |
|---|---|
| Name | Gets or sets the unique name for the HtmlInput control. |
| Type | Determines what kind of Input element the HtmlInput control is. |
| Value | Gets or sets the value of the content of the HtmlInput object. |
The Name and Value properties are pretty self-explanatory, but I think it might be helpful to list the potential types of HtmlInput controls that inherit from this class. All these are covered later in this chapter with explanations and examples. The list in Table 6.3 is just in preparation.
| Type | Html Server Control | Tag |
|---|---|---|
| Button | HtmlInputButton |
|
| CheckBox | HtmlInputCheckBox |
|
| File | HtmlInputFile |
|
| Hidden | HtmlInputHidden |
|
| Image | HtmlInputImage |
|
| Password | HtmlInputText |
|
| Radio | HtmlInputRadioButton |
|
| Reset | HtmlInputButton |
|
| Submit | HtmlInputButton |
|
| Text | HtmlInputText |
|
This covers the three parent or base classes for the objects in the System.Web.UI.HtmlControls namespace. Now let's start looking at them individually.
| Top |
