Post
Ask Question

ASP.NET Server Controls

Introduction

Server Controls are the tags that are understood by the server. There are basically three types of server controls.

  • HTML Server Controls - Traditional HTML tags
  • Web Server Controls - New ASP. NET tags
  • Validation Server Controls - For input validation

ASP.NET HTML Server Controls

ASP.NET provides a way to work with HTML Server controls on the server side; programming with a set of controls collectively is called HTML Controls.

  • These controls are grouped together in the Visual Studio Toolbox in the HTML Control tab. The markup of the controls is similar to the HTML control.
  • These controls are basically the original HTML controls but enhanced to enable server side processing.
  • HTML elements in ASP. NET files are, by default, treated as text. To make these elements programmable, add a runat="server" attribute to the HTML element. This attribute indicates that the element should be treated as a server control.

Note:

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

The System.Web.UI.HtmlControls.HtmlControl base class contains all of the common properties. HTML server controls derive from this class.

For example, consider the HTML input control:

htmlinput cntrl im.gif

The following table describes the HTML server controls:

html cntrls.gif

ASP.NET Web Server Controls

  • Web server controls are special ASP. NET tags understood by the server.
  • Like HTML server controls, Web server controls are also created on the server and they require a runat="server" attribute to work.
  • However, Web server controls do not necessarily map to any existing HTML elements and they may represent more complex elements.
  • Mostly all Web Server controls inherit from a common base class, namely the WebControl class defined in the System.Web.UI.WebControls namespace.

The syntax for creating a Web server control is:

web syntx.gif

The following table describes the WEB server controls:

wb ser cntrls.gif


ASP.NET Validation Server Controls

  • After you create a web form, you should make sure that mandatory fields of the form elements such as login name and password are not left blank; data inserted is correct and is within the specified range. Validation is the method of scrutinizing (observing) that the user has entered the correct values in input fields.
  • A Validation server control is used to validate the data of input control. If the data does not pass validation, it will display an error message to the user.
  • In ASP. NET you can use ASP. NET Validation Controls while creating the form and specify what ASP. NET Validation Controls you want to use and to which server control you want to bind this.
  • Validation Controls are derived from a common base class and share a common set of properties and methods. You just have to drag and drop the ASP. NET Validation Control in the web form and write one line of code to describe its functionality.
  • This reduces the developer time from writing JavaScript for each type of validation. Moreover, through ASP. NET Validation Controls if any invalid data is entered the browser itself detects the error on the client-side and displays the error without requesting the server. This is another advantage because it reduces the server load.
Some Server Validation controls are:

validations cntrl.gif

The syntax for creating a Validation server control is:

syntx validation.gif

Default.aspx Page

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3.    
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div style="width: 414px; background-color: #E6E6FA; height: 110px;">  
  12.         Name   
  13.         <asp:textbox id="TextBox1" runat="server" style="z-index: 1; left: 73px; top: 15px;  
  14.             position: absolute">  
  15.         </asp:textbox>  
  16.         <asp:requiredfieldvalidator id="RequiredFieldValidator1" runat="server" controltovalidate="TextBox1"  
  17.             errormessage="Cannot be Blank" setfocusonerror="True" style="position: absolute;  
  18.             z-index: 1; left: 238px; top: 21px">  
  19.         </asp:requiredfieldvalidator>  
  20.         <br />  
  21.   
  22.         Mobile  
  23.         <asp:textbox id="TextBox2" runat="server" style="position: relative; top: 4px; left: 12px">  
  24.         </asp:textbox>  
  25.         <br />  
  26.         <tr>  
  27.             <td class="style3">  
  28.                 Email  
  29.             </td>  
  30.             <td class="style2">  
  31.                 <asp:regularexpressionvalidator id="remail" runat="server" controltovalidate="txtemail"  
  32.                     errormessage="Enter in proper format" validationexpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"  
  33.                     style="z-index: 1; left: 279px; top: 61px; position: absolute">  
  34.                 </asp:regularexpressionvalidator>  
  35.                 <asp:textbox id="txtemail" runat="server" width="200px" style="z-index: 1; left: 73px;  
  36.                     top: 62px; position: absolute">  
  37.                 </asp:textbox>  
  38.             </td>  
  39.             <td>  
  40.             </td>  
  41.         </tr>  
  42.         <asp:button id="Button1" runat="server" text="SUBMIT" style="z-index: 1; left: 73px;  
  43.             top: 91px; position: absolute; right: 1066px" />  
  44.         <br />  
  45.         <br />  
  46.     </div>  
  47.     </form>  
  48. </body>  
  49. </html> 

Output

output vald.gif

If any input field is left blank then it is handled by the control name as RequiredField Validation control.

name valid.gif

It ensures that the value of an input control matches a specified pattern and this is handled by the RegularExpression Validation control.

email valid.gif


Similar Articles