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 the HTML
Control tab. The markup of the controls are 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 an 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
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]()
Example
Default.aspx Page
<%@
Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE
html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
<title></title>
</head>
<body>
<form
id="form1"
runat="server">
<div
style="width:
414px; background-color:
#E6E6FA; height:
110px;">
Name
<asp:textbox
id="TextBox1"
runat="server"
style="z-index:
1; left: 73px;
top:
15px;
position:
absolute">
</asp:textbox>
<asp:requiredfieldvalidator
id="RequiredFieldValidator1"
runat="server"
controltovalidate="TextBox1"
errormessage="Cannot
be Blank" setfocusonerror="True"
style="position:
absolute;
z-index:
1;
left:
238px;
top:
21px">
</asp:requiredfieldvalidator>
<br
/>
Mobile
<asp:textbox
id="TextBox2"
runat="server"
style="position:
relative; top:
4px; left:
12px">
</asp:textbox>
<br
/>
<tr>
<td
class="style3">
Email
</td>
<td
class="style2">
<asp:regularexpressionvalidator
id="remail"
runat="server"
controltovalidate="txtemail"
errormessage="Enter in proper format"
validationexpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
style="z-index:
1; left: 279px;
top: 61px;
position:
absolute">
</asp:regularexpressionvalidator>
<asp:textbox
id="txtemail"
runat="server"
width="200px"
style="z-index:
1; left:
73px;
top:
62px;
position:
absolute">
</asp:textbox>
</td>
<td>
</td>
</tr>
<asp:button
id="Button1"
runat="server"
text="SUBMIT"
style="z-index:
1; left:
73px;
top:
91px;
position:
absolute;
right:
1066px"
/>
<br
/>
<br
/>
</div>
</form>
</body>
</html>
Output
![output vald.gif]()
If any input field is left blank then it is handle 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]()