Server Controls in ASP. Net 

This part of the ASP.Net series introduces to the concepts, technologies, and

code that goes into making a dynamic Web page using the new .Net version of

Active Server Pages. Previously, we looked at the difference between traditional

ASP and ASP.Net, as well as code samples for creating forms, dealing with events

etc. In this part we go further into the Web Forms and see what the types of

controls that can be created . 

Last time, we saw how to create a small Web Form that simply, returns a text

message with the input data within it. The form used a few different controls in

it, namely , , and

. 



The four types of server controls that can be created using ASP.Net are detailed
below.

HTML server controls



These are server equivalents of each and every client side HTML form

element. That is, for every HTML form element such as

type=”text”>,

,

, <br></br> etc, there exists a HTML server control that duplicates the same functionality.

So what’s the big deal, you may ask. Why not simply use the HTML version

itself. The reason is that these controls are not really client controls and

never get rendered in the browser directly. Instead these controls are compiled,

processed and converted to some format (usually HTML) before they are sent back

to the client.

HTML Server controls can be accessed, manipulated and programmed at the

server end and then only returned to the user. Each HTML Control has server-side

event handlers that can be used to control what happens for each event that the

control can handle.

Let’s take an example to see what this means. See code one on CD for a

sample input box, which is created as a server control.

If you save this file as PCQ3-1.aspx and run it through the browser, you’ll

get a window with a username and password field. Enter a wrong set and press the

button to see a message. Enter the right set (Vinod, Superman) to see a

different message.



The difference in this page with normal ASP pages is that the HTML server
controls are actually being rendered at the server end before coming down to the

client end. The button on the form has an event handler ‘OnServerClick’ that

sends the form back to the server for processing the event. This works just like

a Visual Basic form. So, if you have ever programmed one before, you will feel

right at home with this.

There are a lot of HTML server controls available–almost all HTML controls

can be used as HTML server controls by just adding the runat=”server”

attribute to it. You can embed one inside the other too if required.

However, the power pf ASP.Net can be seen only when you start using Web

controls.

Web Controls



Web controls are the bigger, bolder cousins of HTML server controls. At

first glance they seem to mirror the exact same functionality, however a little

digging reveals much more hidden inside.

Web controls are completely server-oriented unlike HTML server controls that

are partly client-end. Web controls can automatically render DHTML for advanced

browsers and down level HTML for lower browsers. This means that when using a

Web control you do not need to worry about whether the control will render

correctly on all browsers or not. Web controls also let you use a consistent,

event driven, VB like programming model across websites.

Web controls are much more powerful than using HTML elements or HTML server

controls. You can even create your own Web controls, but we’ll leave that for

later. The supplied Web Controls can be broadly categorized into 3 sets.

Basic controls



These are similar to the HTML Server Controls but are more consistent and

object oriented. Examples of these include , ,

, etc.

Validation controls



These are a set of special input validation controls that do form input

validation using client side or server side methods. When the validation control

is encountered by the server parser, it checks the version and make of the

browser requesting the page and either sends back JavaScript that can do the

job, or makes it a post-form submission validation if the browser is older.

Examples of these are the RangeValidator, RegularExpressionValidator,

RequiredFieldValidator, etc.

Databound controls



These are the most powerful controls of the lot. These allow quick and easy

interactive Web-form development that can use data from a variety of sources.

You will see more of these in later parts of this series. Examples of these are

the DataList, DataGrid, DataRepeater, etc.

So let us now take a look at a small sample code (see code two on CD) that

uses the basic and validation controls. We’ll leave the databound ones for a

later session as they are slightly more complex to handle.

This is a slightly long piece of code that requires some explanation. The

sample has three Web Control Textboxes–txtName, txtAge and txtEmail and a Web

Control Button. There are also three “hidden” validation controls that are

associated with each textbox.

The first one is a RequiredFieldValidator control that is associated with the

txtName Textbox. This simply checks whether the field has any data in it or not.

The next one is the RangeValidator that is associated with the txtAge control

and checks whether the control is an integer within the range 1 and 100. The

final validation control is the RegularExpressionValidator that is associated

with the txtEmail control and uses a regular expression to see whether the email

address entered is valid or not.



When you view this page in the browser you’ll get a page with 3 input boxes
and a button. Try entering the values that you see in the screenshot here and

you’ll immediately get the error messages, some even without pressing the

submit button. This happens with JavaScript running to do this. View the same

page using an older browser and you’ll still get the same page. Enter the same

wrong data into the boxes. You will not see an automatic error message. But this

time, press the button so that the form is sent back to the server and you’ll

get the error messages back from the server in the same format as before.



The really good part about it is that all this is done without writing even a
single line of code!!! All that you need to do is add the required controls and

set their properties. If you’re using a RAD tool like VS.Net or ASP.NET Web

Matrix (reviewed last month), all this functionality comes with a simple drag

and drop and some property settings only. This can really lead to quick but

powerful web pages.

Knowledge of the different Web Controls and their properties can lead you on

the path of becoming a good Web page programmer. ASP.NET allows you to create

powerful web pages without even writing a single line of code. Using databound

controls (which we will be looking at in more details soon), you can even

program pages that have database access with all the feature you can think of

like sorting, paging, filtering etc. without actual programming required. So

till next time, happy dragging and dropping.

Vinod Unny is aTechnology Consultant at

Enterprise InfoTech