Defining Custom Item Templates in Web Projects with VS 2005

One of the cool new features in VS 2005 that I was playing with a little today is the ability to export and then re-use project item templates.  This enables developers to easily define common templates that they can re-use over and over when adding new pages/classes/controls into web projects or class libraries, and avoid repetitively typing standard content or code.

 

Below is a simple tutorial on how you can use this with web projects to automate creating a standard page template that inherits from a common page base class (in this example: “ScottGu.Test.MyBasePage”), is defined within a common code namespace (in this example: "ScottGu.Test"), and which has a common CSS stylesheet and Javascript script reference pre-set (note: you should probably use the new ASP.NET 2.0 Masterpage feature for the common CSS and Javascript file – but I thought I’d show it here nonetheless).

 

Note: I’m pretty sure this didn’t work with Beta2 builds of VS 2005 – but it is supported with the final release and probably the more recent August CTP builds.

 

Step 1: Define the page you want to become a template

 

The below two files are a sample page I added into a web project.  Note that the page derives from a base-page called “MyBasePage”, lives in the “ScottGu.Test” namespace, has two custom namespaces defined with using blocks in the code-behind, and has a stylesheet and client-side javascript file already added to it.

 

The only change I’ve made from the standard page markup is that I’ve replaced the class name of the code-behind file to have the marker name of “$safeitemname$”, and updated the Inherits attribute of the .aspx file to also point to the “$safeitemname$” class.  VS 2005 will then use this marker to set an appropriate classname based on the filename selected in the Add New Item dialog below (if you don't set a marker, then VS 2005 will default to just using the same classname as what was defined in the template).

 

Default.aspx

------------------------------------------

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFileBaseClass="ScottGu.Test.MyBasePage" CodeFile="Default.aspx.cs" Inherits="ScottGu.Test.$safeitemname$ " %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>My Sample Page</title>

    <link href="Common.css" rel="stylesheet" type="text/css" />

    <script src="ScriptLibrary/AtlasCore.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <h1>My Template Page</h1>

    </div>

    </form>

</body>

</html>

 

Default.cs.aspx

------------------------------------------

 

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

 

using MyCustomNamespace;

using MyCustomNamespace2;

 

namespace ScottGu.Test

{

    public partial class $safeitemname$: MyBasePage

    {

        protected void Page_Load(object sender, EventArgs e)

        {

 

        }

    }

}

 

Step 2: Export the Page as a Template

 

To export and re-use the above page, go to the File menu in VS and select the “Export Template” menu item.  This will then walk you through the below wizard, where you can choose which project and then which file in the project you want to use as a template:

 

 

 

Once you select an item, you can then provide a name for what this template will show up as in the “Add New Item” dialog, an optional icon for the dialog, as well as a help text string.  In this example I am going to create a new template I’ll call “MyCustomTemplatePage”.

 

 

VS will then generate a .zip file containing the item you selected and optionally add it automatically to your current Add New Item dialog (note: this dialog is populated from the C:\Documents and Settings\UserName\My Documents\Visual Studio 2005\Templates\ItemTemplates directory):

 

 

Step 3: Create a new Page using the Template

 

You can now create new items in your project based on the template you defined (or which you picked up from someone else or downloaded online). 

 

To-do this, just choose the usual New File or “Add New Item” menu item in your project to pull up the “Add New Item” dialog.  This dialog will include all the standard VS 2005 file items provided by the particular project type you are working on, as well as expose a new “My Templates” section beneath the standard items.  Included in the “My Templates” section are all the item templates you've either created yourself (see step 2 above) or imported from others.

 

For example, I can now select the “MyCustomTemplatePage” item, and name the page I want to create (based on the template) “UsingTheTemplate.aspx”. 

 

 

When I select OK, VS 2005 will then add two new files into my project – UsingTheTemplate.aspx and UsingTheTemplate.aspx.cs.  These files are based on the template we defined earlier and look like this:

 

------------------------------------------

UsingTheTemplate.aspx

------------------------------------------

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFileBaseClass="ScottGu.Test.MyBasePage" CodeFile="UsingTheTemplate.aspx.cs" Inherits="ScottGu.Test.UsingTheTemplate " %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>My Sample Page</title>

    <link href="Common.css" rel="stylesheet" type="text/css" />

    <script src="ScriptLibrary/AtlasCore.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <h1>My Template Page</h1>

    </div>

    </form>

</body>

</html>

 

------------------------------------------

UsingTheTemplate.aspx.cs

------------------------------------------

 

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

 

using MyCustomNamespace;

using MyCustomNamespace2;

 

namespace ScottGu.Test

{

    public partial class UsingTheTemplate : MyBasePage

    {

        protected void Page_Load(object sender, EventArgs e)

        {

 

        }

    }

}

 

Note that they look just like my original template – the only difference is that the classname has been automatically set by VS 2005 to match the filename I entered in the Add New Item dialog, and the CodeFile attribute in the .aspx has automatically been updated to point to the new code-behind filename.

 

I can now quickly work on the page without the hassle of setting my common settings up.

 

Hope this proves useful and saves you some time,

 

Scott

Published Friday, September 9, 2005 11:31 PM by ScottGu

Comments

# re: Defining Custom Item Templates in Web Projects with VS 2005

Saturday, September 10, 2005 6:10 AM by Darwin
Are there other markers, like the $safeitemname$ marker, that one can use?

# re: Defining Custom Item Templates in Web Projects with VS 2005

Saturday, September 16, 2006 8:39 AM by Mike
Hi Scott, Click File -> Export Templates Any idea on how to make the Export Templates option visible? I'm running vs2005 Professional Thanks Mike

# re: Defining Custom Item Templates in Web Projects with VS 2005

Saturday, September 16, 2006 9:37 AM by Mike
Making the Export Template option visible I got this option to show its self by selecting the "Reset all settings" option in the Import and Export Settings Wizard, which I found in: Tools->Import and Export Settings...->click the "Reset all settings" radio button. ->NEXT to save your current setting or No to just reset...this is what I did. ->Next to select which collection of settings to reset...I just selected the cs settings. I was expecting never be able to log on to this box again, but I'm happy to see that all is not lost and I can see this darn Export Template option. :0) Happy Happy Happy!!

# re: Defining Custom Item Templates in Web Projects with VS 2005

Friday, September 29, 2006 12:11 AM by Dav Evans
Hi Scott, I'm trying to add a sql script as an item template for a SQL 2005 database project. When I open the "Export TempLate" dialogue, I select my Project from within my solution, but on the next screen there are no files to select. The project in question has many folders and files in it. Any idea how to get these files to show up so I can create a sql script template of my own? Thanks

# re: Defining Custom Item Templates in Web Projects with VS 2005

Saturday, September 30, 2006 2:02 PM by ScottGu

Hi Dav,

If you can send me email I can connect you with someone on the VS team who might know how to-do this.

Hope this helps,

Scott

# re: Defining Custom Item Templates in Web Projects with VS 2005

Tuesday, December 19, 2006 5:45 AM by Sven Cipido

Txs for the great article.  I just have created a multiple project template.  It seems that when using this, you cannot assign another name to your projects then defined in the projectcollection.  

I ask this because we have a naming guideline that all projects are in the format :

<Companyname>.<Project>.BL.  I want to dynamicly change the projectname when creating the solution.

Do you know if there's a way to do this ?

Thanks.

# re: Defining Custom Item Templates in Web Projects with VS 2005

Tuesday, December 19, 2006 1:22 PM by ScottGu

Hi Sven,

Any chance you could send me an email with this question in it?  I don't know the answer off the top of my head - but can loop you in with someone who might be able to help.

Thanks,

Scott

# re: Defining Custom Item Templates in Web Projects with VS 2005

Friday, March 9, 2007 12:00 PM by Raghavan

Thanks U very much .