At Geta we have a set of guidelines and best practices that we follow in our projects. For instance we turn off ViewState and EventWireUp. The reason for turning off EventWireup is because of performance. When it’s turned on (default), ASP.NET uses reflection to look for special methods like Page_Load. What we do instead is override the OnLoad method. We also inherit from base classes and use master pages. Our user controls and web forms usually look something like this:

<%@ PageLanguage="C#" MasterPageFile="~/Templates/MasterPages/Site.Master" AutoEventWireup="false" EnableViewState="false" CodeBehind="WebForm1.aspx.cs" Inherits="Web.WebForm1" %>
 
<asp:Content runat="server" ContentPlaceHolderID="ContentRegion">
 
</asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using PageTypes;
using Web.Templates.Base;
 
namespace Web
{
    public partial class WebForm1 : TemplatePageBase<BasePageData>
    {
 
    }
}

<%@ Control Language="C#" AutoEventWireup="false" EnableViewState="false" CodeBehind="WebUserControl1.ascx.cs" Inherits="Web.WebUserControl1" %>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using PageTypes;
using Web.Templates.Base;
 
namespace Web
{
    public partial class WebUserControl1 : UserControlBase<BasePageData>
    {
 
    }
}

To convert this item to a item template go to File -> Export Template. Choose Item template and select the web form and user control, click next and give it a name and description.

When we now create a new item we can choose from our newly created item templates.

Related Posts:

• Creating an EPiServer Plugin
• Part 7: Creating the Sitemap page – Create an EPiServer site from scratch
• EPiServer Custom Property with Custom Settings
• A developer’s guide to Page Type Builder
• Part 2: Creating a foundation – Create an EPiServer site from scratch

To test the snippets out, simply type the shortcut (eg. ‘a’ or ‘table’) and press tab.

This is a simple, but very cool feature. Imaging all the typing you can get rid off!

Creating your own snippets

In Visual Studio 2010, under the Tools menu, you’ll find the Code Snippets Manager (ctrl+k, ctrl+b).

Here you can add new folders that contain your custom snippets, or check out the other snippets added by Microsoft. You’ll also see the path to the snippets folder (C:\Program Files (x86)\Microsoft Visual Studio 10.0\Web\Snippets\HTML\1033\ in my case). If you open up that folder in Windows Explorer you should see at least two folders there, ASP.NET and HTML. Inside both of these folders you’ll find the snippets for the ASP.NET web controls and for HTML elements. We can open up one of the files and take a look at the code.

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <Header>
    <Title>image</Title>
    <Author>Microsoft Corporation</Author>
    <Shortcut>image</Shortcut>
    <AlternativeShortcuts>
      <Shortcut>imagebutton</Shortcut>
      <Shortcut Value="image">asp:image</Shortcut>
      <Shortcut Value="imagebutton">asp:imagebutton</Shortcut>
    </AlternativeShortcuts>
    <Description>Markup snippet for a control that contains an image</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>imageurl</ID>
        <ToolTip>imageurl</ToolTip>
        <Default>imageurl</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[<asp:$shortcut$ imageurl="$imageurl$" runat="server" />$end$]]></Code>
  </Snippet>
</CodeSnippet>

Very easy and readable XML markup, that we easily can tweak to our needs. Say we’re working on a project where 90% of the tables we create should have a class of “products”. Lets create a snippet for this, so that we don’t have to type the same thing every time.

Create a new snippet called table-products.snippet, open it up in your favorite code editor and add this code.

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <Header>
    <Title>table</Title>
    <Author>Frederik Vig</Author>
    <Shortcut>tablep</Shortcut>
    <Description>Markup snippet for a table with class products</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>cellspacing</ID>
        <ToolTip>cellspacing</ToolTip>
        <Default>0</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[<table cellspacing="$cellspacing$" class="products">
    <tr>
        <td>$selected$$end$</td>
    </tr>
</table>]]></Code>
  </Snippet>
</CodeSnippet>

I’ve saved table-products.snippet directly in the HTML snippet folder (C:\Program Files (x86)\Microsoft Visual Studio 10.0\Web\Snippets\HTML\1033\HTML in my case), but you can save it anywhere, just remember to add the snippet folder with the Code Snippets Manager in Visual Studio.

We can now test the snippet by typing tablep and pressing tab.

Simple example, I know, but you get the idea!.

EPiServer

Naturally, one of the first things I did was add the EPiServer Property web control to the snippet manager . This turned out to be very easy! So I continued on adding snippets for the other EPiServer web controls as well. Here is the list of snippets with their shortcut.

• EPiServer Calendar – shortcut: ec
• EPiServer CategoryDataSource – shortcut: ecd
• EPiServer FileSystemDataSource – shortcut: efsd
• EPiServer LanguageDataSource – shortcut: eld
• EPiServer MembershipUserDataSource – shortcut: emud
• EPiServer MenuList – shortcut: eml
• EPiServer NewsList – shortcut: enl
• EPiServer OnPageEditControl – shortcut: eopec
• EPiServer PageDataSource – shortcut: epd
• EPiServer PageDefinitionDataSource – shortcut: epdd
• EPiServer PageDefinitionTypeDataSource – shortcut: epdtd
• EPiServer PageList – shortcut: epl
• EPiServer PageListData – shortcut: epld
• EPiServer PageTree – shortcut: ept
• EPiServer PageTreeData – shortcut: eptd
• EPiServer PageVersionDataSource – shortcut: epvd
• EPiServer Property – shortcut: ep
• EPiServer PropertyCriteriaControl – shortcut: epcc
• EPiServer SearchDataSource – shortcut: esd
• EPiServer SoftLinkDataSource – shortcut: esld
• EPiServer SubscriptionDataSource – shortcut: esds
• EPiServer TabDefinitionDataSource – shortcut: etdd
• EPiServer ThemeImage – shortcut: eti
• EPiServer Translate – shortcut: et

Download the snippets

Related Posts:

• Starting out with XSLT in Umbraco
• Creating a simple image gallery with EPiServer
• Part 1: Setting up the development environment – Create an EPiServer site from scratch
• Creating a contact form with ASP.NET MVC
• EPiServer code walkthrough #1 – 404 handler