WebControls and HtmlControls
| When sitting down to write an ASP.NET application the designer in Visual Studio.NET gives us a toolbox window full of controls. Two of the areas on the toolbox seem to overlap: the Web Form controls tab and the HTML controls tab. Both sections have a button control we can drag onto a form, for instance. In this article we will take a look at differences, strengths, and weaknesses between these two sections of controls. HTML ControlsHTML controls are “close to the metal” in the sense that HTML controls are a thin wrapper around their HTML element equivalents. When we drag a control from the HTML controls textbox onto a web form, VS.NET places the basic HTML markup into the form. Unlike Web Form controls, the IDE does not associate the HTML control with a member variable in our code-behind class. If we drag and drop the “Text Field” control onto a form, for example, we will get the following HTML in our web form:
<INPUT type="text"> We can associate this input field with a variable in code behind if we just make a couple changes to the markup by hand:
<INPUT type="text" runat="server" id="ProductName"> Giving the control a runat=”server” attribute and an ID allows us to manipulate the control during server side processing from our code. All we need is a protected field in our code-behind file with a name matching the ID.
protected HtmlInputText ProductName;
private void Page_Load(object sender, System.EventArgs e) { ProductName.Value = "Foo Berry Tea"; ProductName.Attributes["style"] = PRODUCT_STYLE; }
const string PRODUCT_STYLE = "COLOR: red; FONT-FAMILY: 'Courier New'; BACKGROUND-COLOR: gray"; The HTML controls might feel slightly quirky if you are used to forms based development with Microsoft tools. For instance, HTML controls have no direct properties available to set the colors or font used by the control when it renders. Another example is the Value property exposed by the HtmlInputText field. We generally expect a text box control to have a Text property for us to get or set the string to display. In this sense, HTML controls remain true to their roots and are not far removed from writing just HTML. If we want to set colors or font information – we can use the Attributes property. The Attributes property represents all the name / value pairs in the HTML element for the control. For example, a control might have an attribute “class” which will assign the cascading style sheet class. In the example above, we are assigning some inline style information to the style attribute of the control. On the client this attribute will render inline with the element.
<input name="ProductName" id="ProductName" type="text" value="Foo Berry Tea" style="COLOR: red; FONT-FAMILY: 'Courier New'; BACKGROUND-COLOR: gray" /> Web ControlsWhen we drag a control from the Web Controls section of the toolbox onto a form, VS.NET automatically gives the tag a runat=”server” attribute and an ID. The IDE also automatically adds a protected field to our code behind class for us to interact with the control programmatically. In the following example we have dragged a TextBox control onto the web form, and adjusted the appearance using the Properties window of the web form designer.
<asp:TextBox id="TextBox1" runat="server" Font-Names="Courier New"/> We can also interact with this control from code behind.
protected System.Web.UI.WebControls.TextBox TextBox1;
private void Page_Load(object sender, System.EventArgs e) { TextBox1.Text = "Foo Berry Tea"; TextBox1.BackColor = Color.LightGray; TextBox1.ForeColor = Color.Red; } Notice the web control version of a textbox operates at a slightly higher level of abstraction when compared to the HTML control. For example, the TextBox control has properties to set the colors (BackColor, ForeColor). We don’t need to know how to use inline styles – the code for the control will take care of rendering the correct HTML to achieve the desired appearance in the client’s web browser. The web controls section of the toolbox also offers some controls you won’t find in pure HTML. These controls, like the RegularExpressionValidator, produce a combination of HTML and JavaScript on the client to offer more functionality than you can get from available HTML controls. The web control approach is object oriented, easier to use server-side, and more robust than using HTML controls. Since everything in software development has a trade-off, you might be wondering what the downside to using a web control is (some may say the trade-off is performance, but in reality the overhead of using a web control is almost negligible). There really is no downside to using web controls over HTML controls – we should always favor using the web control. The next question then might be: why did Microsoft give us two sets of controls if web controls are always superior? One answer might be that HTML controls offer a path for porting HTML and ASP applications to .NET. Just give an HTML tag a runat and ID attribute and one can start using the control from code-behind. Another answer is that we can still find scenarios where HTML controls are useful in brand new .NET applications.
The HtmlGenericControlOne of the redeeming features about HTML Controls is that any HTML element in an ASPX page can be associated with a variable derived from the HtmlControl class. We can programmatically interact with anchors (<a>), and paragraphs (<p>), and even the body and title tags. One class that can handle any of these elements is the HtmlGenericControl. As an example, if we wanted to set the title of a page from our C# or VB.NET code, we can use the following title tag:
<title runat="server" id="Title"></title> To set the text of the title from code behind, we simply need to adjust the InnerText property of the HtmlGenericControl instance.
protected HtmlGenericControl Title;
private void Page_Load(object sender, System.EventArgs e) { if(!Page.IsPostBack) { Title.InnerText = "The Foo Berry Home Page"; } }
Wrap UpIn this article we’ve reviewed some of the features of HTML controls and web controls and discovered why HTLM controls can still be useful. You’ll want to stick the web control toolbox wherever possible, but knowing how to use an HtmlGenericControl object at the right place can help you build a more dynamic web page. |