Learning Curve…

Creating Reusable Page Templates

Posted on: January 17, 2011

Visual Web Developer comes with a great tool to export templates for a number of different file types including ASPX pages, class files, and even CSS files. By creating a custom template, you

define the code or markup that you need in every file once and then create new files based on this template, giving you a jump start with the file and minimizing the code you need to type. The next example shows you how to create your own templates.

In this example you see how to create a template file for all new ASPX pages you add to your site. To avoid conflicts with existing pages in your current site, create a new temporary page and use that for the template. Afterward you can delete the temporary file.

1. Add a new Web Form to the site and call it Temporary.aspx. Make sure it uses Code Behind, uses your programming language, and is based on your master page (if any).

2. Open the Code Behind of this new page (by pressing F7) and change the Inherits line (the colon in C#) so the page inherits from your Base Page(if any) instead of from System.Web.UI.Page. Also rename the class from Temporary to $relurlnamespace$_$safeitemname$:


Partial Class $relurlnamespace$_$safeitemname$

Inherits BasePage

End Class


public partial class $relurlnamespace$_$safeitemname$ : BasePage



Make sure you don’t remove any of the existing code, like the using statements or the Page_Load method in the C# version.

Don’t worries about any compile errors you may get about unexpected characters like $. Once you start adding pages based on this template, $relurlnamespace$_$safeitemname$ will be replaced by the name of the page you’re adding.

3. Switch to Markup View, and change the Inherits attribute from Temporary to


<%@ Page Title=”“ Language=”C#” MasterPageFile=”yourmasterpage.master”

AutoEventWireup=”true” CodeFile=”Temporary.aspx.cs”

Inherits=”$relurlnamespace$_$safeitemname$” %>

You can leave the CodeFile attribute alone; VWD will change it to the right Code Behind file automatically whenever you add a new page to the site.

4. Optionally, add other code you want to add to your pages by default, like a comment block with a copyright notice.

5. Save all changes and then choose File ➪ Export Template. In the dialog box that follows, select Item Template and choose your programming language from the drop-down list at the bottom of the screen.

6. Click Next and place a check mark in front of Temporary. Click Next again to go to the Select Item References dialog box.

7. If you had a web page referencing specific assemblies (.dll files) you could pick them here, so VWD adds the references for you automatically next time you add a file based on this template. In this case, click Next again to go to the Select Template Options screen. Type MyBasePage as the new template name, and optionally type a short note describing the purpose of the template.

8. Click Finish to create the template. VWD opens a Windows Explorer showing the new template as a ZIP file. You can close that window, because you don’t need it.

9. Back in VWD; delete the temporary file Temporary.aspx you created. Then right-click the web site in the Solution Explorer and choose Add New Item. Note that your custom template now shows up in the list of templates, If you click it, it even shows you the description you gave it earlier.

10. Type a new name for the page such as TestPage.aspx and click Add to add it to your site. Look at the markup and the Code Behind of the file and verify that $relurlnamespace$_$safeitemname$ has been renamed to _TestPage to reflect the new name of the page. If everything looks OK, you can delete TestPage.aspx .


In this way you can create Reusable Page Templates.




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Learning days (Calendar)

January 2011
« Dec   Feb »

Knowledge Bank (Archives)

I am on Twitter

Blog Stats

  • 498,681 hits

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 43 other followers

%d bloggers like this: