Code-Behind Model: The Second UI Layer

In the above classic ASP style example, we noticed that the code and HTML were separated but still present on the same ASPX page. ASP.NET introduced further separation using the principle of code-behind classes, by pulling all of the code out from the ASPX into a separate class and compiling it to a separate DLL. (Note that a DLL is not really required either, if the developer wishes to deploy the code-behind into the web directory. ASP.NET will compile the code "Just-In-Time" into a temporary DLL, so "pre-compiling into a DLL" is not required either.) This allowed the programmers to debug their applications more efficiently and also introduced further loose coupling in the UI layer, introducing another layer into the above 1-tier architecture.

Here is a diagrammatic representation of the above style:

The partial class compilation model was introduced with ASP.NET 2.0. Partial classes help us break up a main class into sibling classes, which can be merged later into one single class by the compiler. We can see that now instead of having a single ASPX file, we have three separate files for a webform—an ASPX file containing HTML UI elements, a code-behind file containing logical code, and an extra designer class file which is auto-generated by the VS and has the declaration of all of the server controls used in the ASPX form. At runtime, the code-behind class is compiled together with the designer.cs class (containing protected control declarations), and this merged class is used as the base class for the ASPX form class. This approach helped separate the UI code from the HTML elements, and this logical separation in terms of code-behind classes was the second layer style.