ASP .NET provides a new way to handle dynamic web forms. Unlike the conventional style where the developers had to adapt and improvise with HTML tags and attributes, ASP. NET server controls automatically provide their HTML structure. This allows the developers to focus just on the desired behavior. These server controls behave like objects and they are two types:

  • HTML server controls;
  • Web controls.

HTML Server Controls

These controls correspond with ordinary HTML controls so they will look familiar to anyone who has created a dynamic page using pure HTML. Some basic characteristics:

  • They fire server-side events: radio buttons will fire an event when some of them is marked, buttons will fire an event when they are clicked on, etc.
  • They retain state: this means if the user selects or changes something in these controls, the changes are kept and will be available the next time the page and respectively the form are generated.
  • Suitable for transitions from old style HTML pages: here is an example:
<form method="post">
	<div>
	Enter number of cats to calculate number of paws: 
	    <input type="number" />
	    <br />
	    <input type="submit" value="Calculate" />
	</div>
</form>

Above is a simple example of a form with two ordinary HTML controls. Let’s modify it so the controls become HTML server controls:

<form method="post">
	<div>
	Enter number of cats to calculate number of paws: 
	   <input type="number" id="Cats" runat="server" />
	   <br />
	   <input type="submit" value="Calculate" id="Calculate" 
            runat="server" />
	</div>
</form>

It’s as simple as that. We just added two attributes to each control: an id so the control can be interacted with in the code and runat=”server” which shows it is now a server control.

Web Controls

These controls provide way more possibilities than HTML server controls because they are not limited to what HTML has to offer as tags. Web controls generate HTML controls but as you can see, this is not such a straightforward process. For example, the web control class Image can generate an “<img>” tag, however the class CheckBoxList doesn’t generate a single tag but a “<table>” with several “<input type=”checkbox”>” tags in it.

Some basic characteristics of web controls:

  • Web controls can generate different HTML tags and attributes depending on the properties the developer has set. A Button class can generate “<input type=”submit”>” or “<input type=”button”>”; a TextBox class can generate “<input type=”text”>”, “<input type=”password”>”, or “<textarea>”. They also use a feature called adaptive rendering which means they can render differently depending on the user’s browser capabilities;
  • High level features: web controls provide a lot more flexibility than using only HTML server controls. The developer has to concentrate on the desired functionality and ASP .NET will do the other tricks.

Web Control Tags

Web controls do not correspond directly with ordinary HTML tags, thus they look a bit different:

<asp:TextBox ID="TextBox1" BackColor="Black" 
Text="Cats have four paws" 
ReadOnly="True" TextMode="MultiLine" Rows="3" runat="server"/>

Above you can see a web control with the class TextBox. Web control tags start with “<asp:”. Below is what it generates in HTML:

<textarea name="txt1" rows="3" cols="20" readonly="readonly"
id="TextBox1" style="background-color:Black;">Cats have four paws</textarea>

A “<textarea>” is generated because it is a multiline input and “<input>” tag provides single line inputs. BackColor generates style attribute, Text generates innerHTML text and the other properties generate attributes with similar names.

Was this article helpful?