Web Forms Code Model

Introduction

Traditional ASP pages are written with HTML elements, interspersed with server side code in <% %> code blocks. The web page is contained in a single file. ASP.NET introduces a new programming model for Web Forms to separate the code and visual elements in different files. Let us look at the options for organizing code available with ASP.Net and their advantages and disadvantages.

Two Models for Web Forms Pages

Web Forms consist of two parts: visual elements and code logic. Web Forms pages support two models : Code-behind Web Forms and Single File Web Forms.

In the Single File Web Forms model, the code and the visual elements are included in the same file. The code is contained in <script> blocks in the same file that contains the visual elements. This is similar to the ASP programming model where the HTML elements and <% %> tags containing server side code are contained in the same file.

In the code-behind programming model, the visual elements are contained in a .aspx file and the code is included in a separate class file. This results in a separation of code and UI resulting in web pages which are easy to maintain. This programming model is similar in some ways to the model used by Visual Basic.

Details of Single-File Web Forms Model

The Single-File Web Forms are created as .aspx pages containing both the HTML layout elements and the server-side code in <script> blocks. The .aspx file derives from the Page class. The Single-File Web Form is functionally similar to Code-Behind Web Forms and you can use the same controls and code as for Code-Behind pages. The user browses to the Web Forms page and the page is run using server side code and returns HTML to the client. When the page is deployed, the source code is deployed along with the page, however the source code is not visible to the user as only the results are rendered when the page runs.

This programming model has limited support in Visual Studio .Net

Compilation Process for Code-Behind pages

A single Web Forms page consists of 2 files when created using the Code-Behind model : a .aspx file containing the UI elements and a .aspx.vb or .aspx.cs file which contains the server side code for the .aspx page.

Visual Studio.Net uses the Code-Behind model by default.

The code behind file derives from the Page class which is indicated in code as follows:

public class WebForm1 : System.Web.UI.Page

The .aspx file derives from the code-behind file and this is indicated using the Inherits attribute of the @Page directive. The Src attribute of the @Page directive indicates the class file to dynamically compile when the page is requested.
Visual Studio.Net does not use the Src attribute. Instead, it precompiles the code-behind classes and then uses the Inherits attributes.

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication1.WebForm1" %>

The code-behind files for all Web Forms in the project are compiled into the dll file produced by the project. The first time a user requests for a Web Forms page, ASP.Net automatically generates a .Net class that represents the page and compiles it into a second dll file. Whenever the Web Forms page is subsequently requested, the same dll is executed. The Web Forms page is deployed without any source code.

The important difference to note between code-behind Web Forms model and the Single-File Web Form model is that to access and manipulate any server-side controls, you need to declare them as protected or public members of your page class.
For example if you have a text box in your aspx page as follows:

<asp:textbox id="Text1" runat="server" />

You must first declare the textbox as a protected or public class

protected TextBox Text1;

This step is automatically implemented by Visual Studio.Net

How to use Single-File Web Forms in Visual Studio .Net

1. In your Visual Studio.Net project, click on the Project menu and click on "Add HTML page"
2. Name the new page with a .aspx extension
3. Add an @Page directive at the top of the page
4. After the @Page directive , add a <script runat="server"> block containing server-side code
5. Inside the <BODY> tags, encapsulate your controls within <form runat=server> tags.
6. You will need to bind to event handlers manually inside the <script> blocks.

How to convert Single-File Web Pages to Code-Behind Web Pages in Visual Studio.Net.

You can convert your existing Single-File Web Pages to Code-Behind Web Pages as follows

1. Click on the Project menu and select Add Existing Item.
2. Add your aspx page to the project
3. You will be prompted to add a code-behind file for the web page. Click on Yes. Visual Studio will create a class file and link it to the .aspx page
4. Make sure that the controls are encapsulated within <form runat="server"> tags.
5. If the file contains calls to COM components, add the ASPCompat attribute to the Page directive.
6. Manually move the code from the .aspx page to the class file.

How to use Code-Behind Web Pages in text editor

If you are using an editor other than Visual Studio .Net, it is easier to create pages using the Single File Web Forms model. However, you can also use the code-behind model and split the UI elements and the code in different files.
You need to ensure that the @Page directive has the Src attribute set to be equal to the code-behind file name and the Inherits attribute to the class name of the code-behind class.

Advantages of Single-File Web Forms model:

• Easy deployment

Advantages of Code-Behind Web Forms model:

• Separation of code and visual layout- This makes the pages more maintainable. It also allows web designers to design the page layout and web programmers to code the logic for the page at the same time.
• The same code behind class can be re-used directly or inherited and re-used for multiple Web Forms with similar functionality.
• This model has default support in Visual Studio.Net and many features like Intellisense and automatic binding to event handlers are available in Visual Studio.Net when you use this model.