By the Skin of Your App

Enable advanced skinning in your Web applications using an MVC pattern. MVC, or Model-View-Controller, is a design architecture that promotes separation among parts of an application, with particular focus on the presentation tier. The concept of MVC is inherent in the ASP.NET architecture and I'll show you how to take advantage of that in order to provide skinning or themes capability to your Web sites.

This article assumes knowledge of standard three-tier separation as well as the ASP.NET code-behind model. The techniques shown here will only work when working with server-side code-behind classes and not with in-line code between <script runat=server> tags.

The transition from ASP to ASP.NET has brought forward an entirely new design paradigm for applications. No longer do Web developers include scripting code directly embedded within their HTML code. ASP.NET has a code-behind model that allows you to drop controls on your Web Form and attach code for their events in a separate code module. This design paradigm allows you to apply design patterns to your Web pages that were not possible in the past. While this article is about skinning, the technique taught requires a little bit of understanding about the MVC design pattern, which I'll show you how to use.

An MVC Primer

Model-View-Controller (MVC) is a paradigm that promotes the further separation of parts of the presentation tier. The easiest way to explain this is show you how it applies to ASP.NET. As I stated above, the very architecture of ASP.NET promotes an MVC design. The Model is the business layer, which of course provides all the data and objects required to make an application work. I have no doubt that most of you have seen and used this in your standard three-tier or N-tier designs. The View and the Controller parts of the architecture are the ASPX page and the code-behind class. The ASPX page contains the HTML code and the ASP.NET Web server controls that provide your page with the look you desire?basically the View portion of the model. The code-behind class provides the Control portion of the model by driving the Web server controls on the ASPX pages. This class uses the business layer, or Model, to fill the ASPX page's Web server controls with the data they need to display. It also reads the user inputs on some of the page controls and handles any events that the controls may raise.

I hope this comparison gives you an understanding of the concepts behind the MVC architecture or pattern. The purpose of this article is not to teach you the various implementations of the MVC pattern but instead, having explained how this pattern appears in the ASP.NET architecture, I'll show you how to use it to provide themes and skins to your Web applications.

Let's take a closer look at how a Web Form connects with its code-behind class and then I'll review the concept of themes and skins. Later, I'll put everything together as I show you how you can add extensive skinning and theme capability to your Web applications and truly bring out the MVC architecture that is already part of the ASP.NET architecture. Note that some of the information in the first part is stuff that you may already be familiar with, so bare with me for the benefit of those that may not be as familiar; besides I may show you a tidbit or two that you may have not known about.

The @Page Directive

I'm not going to get into all the details of how ASP.NET works, but it is important to understand how the two sides of a page connect. You may have noticed that if you switch the view of your Web Form to HTML, you'll find a series of directives at the top. The main directive here is the Page directive. This is the line that may look this:

This directive contains several attributes noted in a 'name=value' notation. The two attributes I want to concentrate on here are the CodeBehind and the Inherits attributes.

The Inherits attribute tells the Web Form what class to use as its controller. This class will hold declarations for the Web server controls the page contains as well as all the code to handle events raised by any Web controls. The value of the Inherits attribute is the full qualifier for the controlling class, or code-behind class.

The CodeBehind attribute contains the physical file name of the file item containing the code-behind class. This attribute is not required and merely tells Visual Studio where to find the code-behind file when the developer either clicks on the 'view code' button on the Solutions Explorer or double-clicks on one of the server controls on the Web Form (or even the Web Form itself). You can remove this attribute if you wish, but you would have to go hunting for the code-behind class manually. Though most of the time you want to leave it there, later I will show a situation where you may actually want to remove it. The Inherits attribute, however, you definitely need; as without it your Web Form would not know where to go for its controlling code.

When you create a new Web Form, the code-behind file is created automatically with the same name of the Web Form, with a .cs or .vb appended to the end. So a Web Form named MyPage.aspx would have a corresponding code-behind file called MyPage.aspx.cs for C# and MyPage.aspx.vb for VB .NET.

Now that you have a pretty good understanding of how ASP.NET makes the connection, let's talk about skinning.

By: Miguel Castro

Miguel is an architect with IDesign who specializes in architecture consulting and building .NET solutions. He is a Microsoft MVP and INETA speaker and has been a software developer for over 22 years. With a Microsoft background that goes all the way back to VB 1.0 (and QuickBasic in fact), Miguel jumped on .NET as soon as the first public Beta was released and has provided .NET solutions for clients around the country in a variety of industries. He considers himself to be a .NET Developer and Architect and has equal love for both VB and C#, and no tolerance for language bigotry. He’s spoken at numerous user groups around the country as well as developer conferences.

He’s the author of the CodeBreeze code-generator, which among things can be found on his Web site:

www.steelbluesolutions.com

Miguel currently lives in Lincoln Park, NJ with his wife Elena and his daughter Victoria.

subscriptions@infotekcg.com