How can I change the look of an ASP.NET page without recompiling code?

Question

I am looking at taking on a new web development project and the customer has two big specifications the first is that they want it developed in .NET and the second is that they want to be able to change the look and feel of the page without having to recompile code. While I am new to ASP.NET I am familiar with the concept of Model View Controller, will ASP.NET MVC allow the customer to avoid compiling all together or just avoid compiling the business logic? Are there any good books or resources you can recommend so that I can learn more? It is still really early in the project and I am not the one talking this over with the customer, but I will be the one doing the work and I am wondering about the possibilities.

Answer 1

Here is a great book at getting started with ASP.NET MVC 1.0.

http://weblogs.asp.net/scottgu/archive/2009/03/10/free-asp-net-mvc-ebook-tutorial.aspx

Answer 2

Probably the best way of changing the look of web pages without changing code would be via the style sheet. Here's one of the best examples of that.

EDIT: Here's some information on CSS Editors that are available.

Answer 3

If you're changing the HTML in the view, you don't need to recompile it every time, even when you add code to it (as long as anything it uses outside the view is already in the compiled code).

If on the other hand, you're just changing things like colours and layout, then all this can be done in CSS, which doesn't even need to be in the project.

Answer 4

Asp.Net Webforms support Themes and Profiles. Both of which would allow you to configure multiple looks for the website and switch through them using the controls on the page.

Answer 5

Design the pages so that you can easily apply styles to the different sections of the page. Do this by breaking the areas of the page up into 'div's, you can then give these divs class names and ids. Once you have this in place you can write stylesheets in CSS and apply these to the page. One thing many sites offer is the ability to apply a theme to a site. Themes are simply collections of related stylesheets and images that give the site a particular look. Place each theme in a separate directory, you can then change the look and feel just by changing the directory the them gets loaded from.

Be prepared to learn (and battle with CSS) it's a black art at first.

Don't use table elements unless you really have a table

Answer 6

As was mentioned, CSS style sheets are the best way to change how a webapp looks without any recompilation, and csszengarden is a fantastic example of how you can change a webpage so much.

But, you will also want to only use tables for tabular data, not for laying out components.

I tend to use the element often to put a label to a form element, such as a textbox.

You will also want to set the id attribute on the divs, spans form elements to make it easier for those to be changed. It is possible to change based on the element type and what was before them, but I find it safer to be able to tell it to change the footerdiv, regardless of what else was changed in the application, as the html may change, a div may have been changed to a span, and then my assumption in the css file is wrong, and their html change leads to a css change, needlessly.

But, as Kevin Jones mentioned, you will need to battle CSS at first, as laying out without tables requires more thinking about how to get CSS to do what you want.

Answer 7

CSS can defintely help alot here. Another good trick is to swap masterpages dynamically--really not too hard to do, just set the MasterPageFile property in the page during the PreInit event.

Insofar as speaking to the dynamically switched masters, you can make them implement a common interface or descend from a common base class and have the pages reference that.

Answer 8

How about using themes (WebForms) and changing them dynamically?

This starter kit has a simple example

You could also use jQuery to change style sheet settings on the fly from classes to specific css properties. (This is suitable for ASP .NET MVC and WebForms also)

Answer 9

If you are familiar with MVC, I'd look into ASP.NET MVC. However, you can also use plenty of built in features that have been in place since ASP.NET 2.0 such as MasterPages to control templates and Themes to control and switch between page layouts, color schemes, etc. Both can use CSS which would ultimately change the way your code looks. Even standard ASP.NET web form controls contain a CssClass property that can be set and used for formatting the web form controls.