In-Depth

Simplify Updates With Templates

ASP.NET developers often use a base class inherited from the root class Page as a template to make their Web sites look consistent. However, the HTML is often embedded in the base class, preventing the template from being previewed or edited. Learn to work around this problem by separating the template and the base class.

• By Yue Xu
• 08/01/2004

ASP.NET developers often use a base class inherited from the root class Page as a template to make their Web sites look consistent. However, the HTML code is often embedded in the base class, preventing you from easily previewing or editing the layout of the template. You can work around these problems by separating the template and the base class.

You store the template that contains HTML and PlaceHolder controls in a user control file (see Listing 1). By default, a user control created by VS.NET doesn't have HTML and BODY tags because it is only part of a page. The good thing is that VS.NET doesn't complain when you add these two tags to the file manually. The advantage of storing the template in a user control file is that you can clearly preview and/or change the layout of the template from VS.NET's Design View (although I personally prefer editing the HTML code directly).

Take a look at the base class code in VB.NET (see Listing 2). In the Page_Init event, you load the template control by using the LoadControl and Add methods. You can reference the PlaceHolder controls in the template by using the FindControl method. The main content is loaded during the Page_Load stage and coded within the Web page class, but other controls (Header, Footer, and so on) are loaded during the Page_PreRender stage.

For any Web page that uses the template, set its class behind to inherit from the base class. The HTML code of the page is wrapped by a Panel control. At the end of the Page_Load, let the parent class (MyBase) load this Panel control. This is a critical step to get rid of a separate user control file (see Listings 3 and 4).

Once the Web page is finished, Web editors can update the content in two ways. For dynamic Web pages, they update content stored in a database by a separate program, and the changes are reflected on the Web page automatically. For manual Web pages, they work on them directly using an HTML editor to change the content as well as the layout.

Don't use subfolders for user control files unless you have a subfolder for the Web pages as well. When these the ASPX files and ASCX files exist in different levels within the Web root directory, the path of the image (or maybe other including) files will be different at design time than run time, making the Web page design and content editing inconvenient. Of course, you can use the full path, such as /folder1/folder2/aimage.jpg, to resolve this issue, but I always use the relative path whenever possible because it's simpler. You can prefix the filename with "uc" to better indicate a file is a user control.

I'm reluctant to set the base page for all the Web pages in the Web.Config file. Most of the Web pages use the same template, but some might not. They either use another template or don't use any template.