Links


www.asp.net
Microsoft ASP.NET Resource and Community Site

www.asp.net/Forums/
Hundreds of ASP related forums - very useful when problems arise!

www.15seconds.com
Hundreds of articles about Microsoft web based programming, including ASP.NET

www.411asp.net
A directory of ASP.NET tutorials, applications, scripts, assemblies and articles for the novice to professional developer

Printer friendly version of this Page

ASP.NET Web Forms from a Developer's Perspective

An Introduction to Web Forms and Controls for Developers -

Including: the event driven model; compilation; web, html & user controls!

The ASP.NET Event Driven Model

For those who have done any event-driven programming a web form is analogous to a Windows form. This means we can write our code in event handlers that respond to user actions on the form - such as a button click. Amazingly, the fact that the interface of the web form (in the browser) is not directly connected to the event handlers (on the server) is not a problem because ASP.NET handles all of this rather tricky business automatically. This means the developer no longer has to worry about browser to server round-tripping, page refreshes, and handling the state of the controls that appear on the web form. The developer can get on with the important business of writing the code to react to the events. See the article "An Example ASP.NET Web Form for Data Input" for a demonstration of this process.


Code Separation and Compilation

The ASP.NET Event driven processing engine is a major shift forward compared to the linier processing model used by ASP version 3 (and PHP!). In ASP 3 the output page is built from top to bottom, often with ASP program code interspersed with HTML. In ASP.NET, on the other hand, the ASP code can be quite separate from the HTML. Visual Studio .NET allows us to develop with separate 'code behind' files - written in C#, Visual Basic, or what ever other language we prefer. This is excellent because it means there is a clear separation between the design and the code on a page. It is less confusing (have you ever tried to read a large ASP 3 or PHP input validation page?), and it means that designers and coders can work on the same page much more easily (if they are different people that is!).

These 'code behind' files are potentially just the interface or event 'hooks' to what could be an entire enterprise application, built from business classes, database classes, backend database services, external web services, e-commerce facilities etc... The 'code behind' classes must be compiled; this means we get good performance improvements with ASP.NET compared to ASP 3. They are compiled in to a "DLL" (project Assembly) that is simply put in the 'bin' directory of the web server. The great news for deployment purposes is that this "DLL" does not need to be registered, and in addition can even be 'hot' swapped for a new version without bringing the server down! Note, we do have the option of not working in 'code-behind' mode. In this case the ASP code is included inline with the HTML interface code as before, and must therefore be interpreted at runtime.


A Demonstration...

When the ASP code is separate to the HTML how can we control it? ASP.NET allows us to refer to the HTML tags within the document from within the events. To illustrate, type something in this box, and watch what happens when you click outside...

Enter anything here :

Here is ASP.NET code to do this.

private void otxt_field_TextChanged(object sender, System.EventArgs e)
{
    ohdr_text.InnerText += otxt_field.Text + " " + otxt_field.Text + " ";
}

Simple.. in the ASP.NET 'text_changed' event we write back to the innerText property of our header tag. Obviously this could have been done simply with DHTML, not needing a trip to the server. But, if the server needed to process the text for some reason then this is useful. Also this method works in most browsers, DHTML code may not.

Web Controls and HTML Controls

For the previous example to work, we must have created this tag within the separate HTML document with the setting "runat=server":

  <h1 id="ohdr_text" runat="server"></h1>

This is called a ASP.NET "HTML control" ! It is different to a regular HTML tag because our ASP.NET 'code behind' file needs to access it. The control is accessed as an object, in exactly the same way as we access items in the DOM (Document Object Model) in client-side script (DHTML). So not only can we change the content but we can also change any other properties relating to that HTML tag. ASP.NET HTML control objects are closely related to the underlying HTML element (tag) - just like the DHTML objects and their associated HTML elements.

ASP.NET also gives us another group of controls to work with, named ASP.NET "Web Controls". In the previous exampe the text box is a Web Control :

  <asp:textbox id="otxt_field" runat="server" autopostback="True"></asp:textbox>

The whole set of HTML control types (button, text box, label, drop-down list etc...) are available as Web Controls, plus a whole host of extended functionality controls - such as Calendar, DataGrid, and Validation Controls. Web Controls expose a different object interface compared to the HTML controls, not necessarily so closely linked to the DHTML object model. Often they need to because of their enhanced functionality. The clever bit about Web Controls is that their rendering engine varies their output dependent on the client browser detected. For example, the more complex web controls may cause DHTML to be included in the page if IE5+ is detected, otherwise the control might be implemented using HTML only forms. It is even possible to get Web Controls to output as WML (for mobile devices) or XML.


User Controls

User Controls ('ascx' files in .NET) are created just like a web form. We design the interface and write what ever event-handling code we want in the code behind file... data access layer, business validation rules etc... We save this ascx file, or we can even convert an existing web form in to an ascx. Now we can drag and drop our custom form on to any other web forms. Thus we have a reusable control. If we need to change it, we change it once and that change is inherent on all pages that the control appears on... (of course, because it is the same code!). If we just want to replicate a static block of HTML, then we can use 'server side includes', but if we want to effect the control's output dynamically or have it react to events then a user control offers much more power.


Web Form Issues

ASP.NET Web Forms can produce impressive results, but it is best to understand them in depth to avoid potential pitfalls. We need to be wary of 'automatic postbacks' and any browser to server round trips for performance / scalability reasons. Do we really want our 80Kb web page to be refreshed everytime the user clicks on a control? Maybe its best to host the interactive part of the page in a HTML IFrame? Maybe we can employ output caching for some pages, or even cache a user control separately (known as 'fragment caching'). Should we use 'Viewstate' for our web forms and if so, what are the security implications (Viewstate is the method by which ASP saves the form's state in the HTML page)?. Given a good level of understanding, ASP.NET web controls do offer the developer a new level of power in the creation of interactive web applications.


 
© Copyright 2003 Mark V Williamson