RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Skin Your Web Apps Using MVC

The Model-View-Controller architecture, built into ASP.NET, lets you drive a different look to your ASP.NET pages using the same code base.

VC, 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. I'll show you how to take advantage of that to provide skinning or themes capability to your Web sites.

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
The easiest way to explain MVC 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.

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

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:

   <%@ Page  Language="CS" AutoEventWireup="false"
      Inherits="MyNamespace.MyPage" %>

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, 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 as the Web Form, with .cs or .vb or another extension (depending on the language) appended to the end. So a Web Form named MyPage.aspx would have a corresponding code-behind file called MyPage.aspx.cs for C# or MyPage.aspx.vb for VB .NET.

At compile time, the compiler actually creates a class from the ASPX page and that class inherits from the code-behind class defined in the Inherits= argument.

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

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date