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> 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