Search This Blog

Wednesday, June 16, 2010

Controls in ASP.NET:

Controls in ASP.NET:
All Controls in ASP.net can be broadly classified into two basic types .
1) Client Side Controls: Client Side Controls are plane html controls, they cannot maintain state (if form validation fails user has to fill the form).The Values of Client side control can be manipulated only by client side scripting (JavaScript/Jscript/vbscript) but not by server side script(C#, VB.NET etc.).
2) Server Side Controls:
What's a Server Control?
Server controls are special tags that are processed by the web server in a manner vaguely similar to the way HTML tags are interpreted by your browser. You can identify a server control tag by the fact that they contain a runat="server" attribute. This helps the server differentiate them from standard HTML tags or from other types of text which it should ignore.
Interestingly enough, there is no runat="client" attribute. If you request a page with the runat attribute set to client (or anything else for that matter) you'll get a parser error telling you "The Runat attribute must have the value Server."
Once the server finds a server control, it creates an object in memory that the server control represents. This object can have properties, methods, and even expose or raise server events during the processing of the ASP.NET page. Once the processing is finished, the control emits its output in the form of HTML (or whatever it's designed to emit) and it is sent to the browser as part of the resulting page.
There are in all 5 types of controls in ASP.NET.
1) HTML controls: HTML controls are client side controls. All HTML elements in ASP.NET files are, by default, treated as text.These controls can’t maintain state.
List of Few:
a) HtmlAnchor: Controls an <a> HTML element
b) HtmlImage: Controls an <image> HTML element
c) HtmlInputHidden: Controls an <input type="hidden"> HTML element
d) HtmlSelect: Controls a <select> HTML element
e) HtmlButton: Controls a <button> HTML element
f) HtmlInputButton: Controls <input type="button">, <input type="submit">, and <input
type="reset"> HTML elements
g) HtmlInputImage: Controls an <input type="image"> HTML element
h) HtmlTable: Controls a <table> HTML element
i) HtmlForm: Controls a <form> HTML element
j) HtmlInputCheckBox: Controls an <input type="checkbox"> HTML element
k) HtmlInputRadioButton: Controls an <input type="radio"> HTML element
l) HtmlTextArea :Controls a <textarea> HTML element
m) HtmlGeneric: Controls other HTML element not specified by a specific HTML server control,
like <body>, <div>, <span>, etc.
n) HtmlInputFile: Controls an <input type="file"> HTML element
o) HtmlInputText: Controls <input type="text"> and <input type="password"> HTML elements
p) HtmlTableCell :Controls <td>and <th> HTML elements
q) HtmlTableRow :Controls a <tr> HTML element

2) HTML server controls:
What Are HTML Server Controls?
HTML server controls are simply a set of server controls that closely resemble their corresponding HTML tags. In fact, in order to declare (create/instantiate/etc.) an HTML server control on a page, all you have to do is take an existing HTML tag and add the runat="server" attribute we mentioned earlier.
If there's an HTML server control that corresponds to the HTML tag you've "control-ized," the HTML tag becomes the corresponding type of server control. Otherwise it will simply default to an HTML control of type HtmlGenericControl.
Here's a list of the different basic HTML server controls:
• HtmlAnchor
• HtmlButton
• HtmlForm
• HtmlGenericControl
• HtmlImage
• HtmlInputButton (Button/Reset/Submit)
• HtmlInputCheckBox
• HtmlInputFile
• HtmlInputHidden
• HtmlInputImage
• HtmlInputRadioButton
• HtmlInputText (Password/Text)
• HtmlSelect
• HtmlTable
• HtmlTableCell
• HtmlTableRow
• HtmlTextArea
all HTML Server Control have their own object model that maps pretty closely to the HTML they generate. e.g if you want to programmatically set the image source of an HtmlImage control with the id imgSample defined as such:
<img id="imgSample" runat="server" />
the line of code to do it in VB would simply be:
imgSample.Src = "path_to_image/image_name.gif"
Notice how the property of the control (.Src) has the same name as the attribute of the corresponding HTML <img> tag (src).
Why Do We Need Them?
All HTML server controls map to their corresponding HTML tags and simply output the HTML tags at run time. So why do we need the controls at all?
The controls greatly simplify dealing with the properties and attributes of the HTML tags. They also allow us to move the logic which affects the tags away from the tags themselves allowing us to write cleaner code.
Manipulating HTML tags is a pain for readability and maintainability, most people end up not even trying to manipulate one tag, but instead simply swap out the whole tag for an alternate one when trying to do something like this in classic ASP. If you do want to manipulate the tag you end up with something like this:
test.asp

<%@ Language="VBScript" %>
<%
Dim int0to9
int0to9 = Second(Now()) Mod 10
%>

<html>
<head>
<title>ASP.NET Number Images</title>
</head>
<body bgcolor="#FFFFFF">

<img id="imgSample" src="images\digit_<%= int0to9 %>.gif" alt="<%= int0to9 %>" />

</body>
</html>




In the classic ASP world, there's nothing wrong with that, but it's nice to be able to keep our variables out of our display code like we can in ASP.NET:



test.aspx

<%@ Page Language="VB" %>
<script runat="server">
Sub Page_Load(Sender As Object, E As EventArgs)
Dim int0to9

int0to9 = Now().Second Mod 10

imgSample.Src = "images\digit_" & int0to9 & ".gif"
imgSample.Alt = int0to9
End Sub
</script>

<html>
<head>
<title>ASP.NET Number Images</title>
</head>
<body bgcolor="#FFFFFF">

<img id="imgSample" runat="server" />

</body>
</html>
Notices how there are no variables or any code at all outside of the one nice neat script block. The use of server controls allows this flexibility.
How Do We Use Them?
The code sample above has given you some idea of how HTML controls are used, but just in case, here's a code listing illustrating how you can play with some of the properties and methods of an HtmlGenericControl.
helloworld.aspx

<%@ Page Language="VB" %>
<script runat="server">
Sub Page_Load(Sender As Object, E As EventArgs)
HelloWorld.InnerText = "Hello World!"
'HelloWorld.InnerText = HelloWorld.Page

If Request.QueryString("visible") = "false" Then
HelloWorld.Visible = False
Else
HelloWorld.Visible = True
End If

' .TagName lets you read or change the name of
' the HTML tag. It would currently return p,
' but if we change it, the server control
' will change the resulting HTML. Try this:
'HelloWorld.TagName = "strong"
End Sub
</script>

<html>
<head>
<title>ASP.NET Hello World</title>
</head>
<body bgcolor="#FFFFFF">

<p id="HelloWorld" runat="server"></p>

<p>
<a href="helloworld.aspx?visible=true">Make Visible</a>
<a href="helloworld.aspx?visible=false">Make Invisible</a>
</p>

</body>
</html>

3) Web server controls: provide .NET native server-side programming support. The properties, methods and events of these controls are more VB like than the HTML controls. These controls
offer the widest range of flexibility from a programming standpoint, but can (if not used correctly) create more overhead (viewstate) for your .aspx pages.
The Web server controls also feature controls that don't have an HTML equivalent (validation controls, data controls, other rich controls [calendar]). No matter which Web Form control you use, they render themselves to the client as pure HTML/JavaScript, so they can be used in any client.
4) Validation controls: Validation controls are inbuilt server side controls in asp.net they are used to validate user input on client & server side. If the user input does not pass validation, it will display an error message to the user.




The syntax for creating a Validation server control is:
Generic Syntax: <asp:control_name id="some_id" runat="server" />
Specific Syntax: <asp:CompareValidator id="compval"
Display="dynamic"
ControlToValidate="txt1"
ControlToCompare="txt2"
ForeColor="red"
BackColor="yellow"
Type="String"
EnableClientScript="false"
Text="Validation Failed!"
runat="server" />


Validation Server Control Description
CompareValidator
Compares the value of one input control to the value of another input control or to a fixed value
CustomValidator
Allows you to write a method to handle the validation of the value entered
RangeValidator
Checks that the user enters a value that falls between two values
RegularExpressionValidator
Ensures that the value of an input control matches a specified pattern
RequiredFieldValidator
Makes an input control a required field
ValidationSummary
Displays a report of all validation errors occurred in a Web page



5) Custom Controls ( created by the developer.):These are server side controls created by a developer by deriving a new custom control from an existing control or By composing a new custom control out of two or more existing controls or By deriving from the base control class, thus creating a new custom control from scratch. This is known as a full custom control.
Difference Between ASP.NET Server Controls,HTML Server Controls and HTML Intrinsic Controls
ASP.NET Server Controls
Advantages:

1. ASP .NET Server Controls can detect the target browser's capabilities and render
themselves accordingly. No issues for compatibility issues of Browsers i.e page that
might be used by both HTML 3.2 and HTML 4.0 browsers code to be written by you.
2. Newer set of controls that can be used in the same manner as any HTMl control like
Calender controls. (No need of Active-X Control for doing this which would then bring up
issues of Browser compatibility).
3. Processing would be done at the server side. In built functionality to check for few
values(with Validation controls) so no need to choose between scripting language which
would be incompatible with few browsers.
4. ASP .NET Server Controls have an object model different from the traditional HTML and
even provide a set of properties and methods that can change the outlook and behavior
of the controls.
5. ASP .NET Server Controls have higher level of abstraction. An output of an ASP .NET
server control can be the result of many HTML tags that combine together to produce that
control and its events.

Disadvantages:

1. The control of the code is inbuilt with the web server controls so you have no much of direct control on these controls
2. Migration of ASP to any ASP.NET application is difficult. Its equivalent to rewriting your new application
HTML Server Controls
Advantages:

1. The HTML Server Controls follow the HTML-centric object model. Model similar to HTML
2. Here the controls can be made to interact with Client side scripting. Processing would be done at client as well as server depending on your code.
3. Migration of the ASP project thought not very easy can be done by giving each intrinsic HTML control a runat = server to make it HTML Server side control.
4. The HTML Server Controls have no mechanism of identifying the capabilities of the client browser accessing the current page.
5. A HTML Server Control has similar abstraction with its corresponding HTML tag and offers no abstraction.

Disadvantages:
1. You would need to code for the browser compatibility.
HTML Intrinsic Controls
Advantages:
1. Model similar to HTML
2. Here the controls can be made to interact with Client side scripting

Disadvantages:
1. You would need to code for the browser compatibility

No comments:

Post a Comment