ASP.NET Web Forms - Server Controls

Server controls are tags that can be understood by the server.

Limitations of Classic ASP

The code listed below is copied from the previous chapter:

<html>
<body bgcolor="yellow">
<center>
<h2>Hello Example!</h2>
<p><%Response.Write(now())%></p>
</center>
</body>
</html>

The code above reflects the limitations of Classic ASP: code blocks must be placed where you want the output to be displayed.

With Classic ASP, it is impossible to separate executable code from the HTML page. This makes the page difficult to read and maintain.

ASP.NET - Server Controls

ASP.NET has solved the above "spaghetti code" problem through server controls.

Server controls are tags that can be understood by the server.

There are three types of server controls:

  • HTML Server Controls - created HTML tags
  • Web Server Controls - new ASP.NET tags
  • Validation Server Controls - used for input validation

ASP.NET - HTML Server Controls

HTML Server Controls are HTML tags that can be understood by the server.

HTML elements in ASP.NET files are treated as text by default. To make these elements programmable, add the runat="server" attribute to the HTML element. This attribute indicates that the element will be processed as a server control. You also need to add the id attribute to identify the server control. The id reference can be used to manipulate the server control at runtime.

Note:All HTML server controls must be inside a <form> tag with the runat="server" attribute. The runat="server" attribute indicates that the form must be processed on the server. It also indicates that the controls contained within it can be accessed by server scripts.

In the following example, we declare an HtmlAnchor server control in the .aspx file. Then we manipulate the HRef property of the HtmlAnchor control in an event handler (an event handler is a subroutine that executes code for a given event). The Page_Load event is one of many events understood by ASP.NET:

<script runat="server">
Sub Page_Load
link1.HRef="http://www.example.com"
End Sub
</script>

<html>
<body>

<form runat="server">
<a id="link1" runat="server">Visit EXAMPLE!</a>
</form>

</body>
</html>

The executable code itself has been moved out of the HTML.

ASP.NET - Web Server Controls

Web Server Controls are special ASP.NET tags that can be understood by the server.

Like HTML server controls, Web server controls are created on the server, and they also require the runat="server" attribute to take effect. However, Web server controls do not need to map to any existing HTML elements; they can represent more complex elements.

The syntax for creating a Web server control is:

<asp:control_name id="some_id" runat="server" />

In the following example, we declare a Button server control in the .aspx file. Then we create an event handler for the Click event to change the text on the button:

<script runat="server">
Sub submit(Source As Object, e As EventArgs)
button1.Text="You clicked me!"
End Sub
</script>

<html>
<body>

<form runat="server">
<asp:Button id="button1" Text="Click me!"
runat="server" OnClick="submit"/>
</form>

</body>
</html>

ASP.NET - Validation Server Controls

Validation Server Controls are used to validate user input. If the user input fails validation, an error message will be displayed to the user.

Each validation control performs a specific type of validation (such as validating a specific value or a range of values).

By default, page validation is performed when Button, ImageButton, or LinkButton controls are clicked. You can set CausesValidation to false to prevent validation from being performed when button controls are clicked.

The syntax for creating a Validation server control is:

<asp:control_name id="some_id" runat="server" />

In the following example, we declare a TextBox control, a Button control, and a RangeValidator control in the .aspx file. If validation fails, the text "The value must be from 1 to 100!" will be displayed in the RangeValidator control:

Examples

<html>
<body>

<form runat="server">
<p>Enter a number from 1 to 100:
<asp:TextBox id="tbox1" runat="server" />
<br /><br />
<asp:Button Text="Submit" runat="server" />
</p>

<p>
<asp:RangeValidator
ControlToValidate="tbox1"
MinimumValue="1"
MaximumValue="100"
Type="Integer"
Text="The value must be from 1 to 100!"
runat="server" />
</p>
</form>

</body>
</html>
Other Extensions