I’m going to use the Overlook hotel sample site. The goal is of course to make it ultra-fast!

To follow along you should have the overlook site installed and setup. Let’s get started!

Client side performance

I’m using Firefox as my main developer browser, I’ll also be using three great addons for Firefox: Firebug, YSlow, and Page Speed.

If we run YSlow on the front page of overlook hotel we’ll get a score of 66/100 (grade D) with a few suggestions for improvements.

With Page Speed we get a score of 62/100.

I’m going to focus on IIS 7 and above, most of the stuff is also possible with IIS 6, but I’m not going to go through IIS 6.

Compress components with gzip

Read more about the benefits of gzipping your content here: Gzip Components.

In IIS 7 this is very easy. First make sure you have both static and dynamic compression installed.

Next step is enabling both static and dynamic compression in web.config. Go to the <system.webServer> section and add the following:

<urlCompression doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="true" />

Re-run both YSlow and Page Speed. Your score should now be 72 and 78 with an A in gzip.

You can find more information on urlCompression on IIS.NET. By default IIS 7 will actually enable static and dynamic compression for you.

You might have spotted the httpCompression section under <system.webServer>.

<httpCompression>
  <staticTypes>
	<add mimeType="text/*" enabled="true" />
	<add mimeType="message/*" enabled="true" />
	<add mimeType="application/javascript" enabled="true" />
	<add mimeType="application/x-javascript" enabled="true" />
	<add mimeType="*/*" enabled="false" />
  </staticTypes>
  <dynamicTypes>
	<add mimeType="text/*" enabled="true" />
	<add mimeType="message/*" enabled="true" />
	<add mimeType="application/javascript" enabled="true" />
	<add mimeType="application/x-javascript" enabled="true" />
	<add mimeType="*/*" enabled="false" />
  </dynamicTypes>
  <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
</httpCompression>

You don’t actually need this section to enable gzip (IIS will just use it’s default settings), but it’s nice to know about it when you need to tweak your default gzip settings a bit. Basically urlCompression specifies what to compress and httpCompression specifies how. More information on httpCompression: HTTP Compression <httpCompression>.

If we check the applicationHost.config file for IIS 7 you can see the default settings (location: %windir%\system32\inetsrv\config\applicationHost.config):

<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
	<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
	<staticTypes>
		<add mimeType="text/*" enabled="true" />
		<add mimeType="message/*" enabled="true" />
		<add mimeType="application/x-javascript" enabled="true" />
		<add mimeType="application/atom+xml" enabled="true" />
		<add mimeType="application/xaml+xml" enabled="true" />
		<add mimeType="*/*" enabled="false" />
	</staticTypes>
	<dynamicTypes>
		<add mimeType="text/*" enabled="true" />
		<add mimeType="message/*" enabled="true" />
		<add mimeType="application/x-javascript" enabled="true" />
		<add mimeType="*/*" enabled="false" />
	</dynamicTypes>
</httpCompression>

By default httpCompression is set to only gzip files over 2700 bytes, we can fix this by adding the following code:

<httpCompression directory="%SystemDrive%\websites\_compressed" minFileSizeForComp="1024">
	<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
	<staticTypes>
		<add mimeType="text/*" enabled="true" />
		<add mimeType="message/*" enabled="true" />
		<add mimeType="application/javascript" enabled="true" />
		<add mimeType="application/json" enabled="true" />
		<add mimeType="*/*" enabled="false" />
	</staticTypes>
</httpCompression>

Add Expires headers

Adding Expires headers to static and dynamic files like CSS, JavaScript and images tells the client to cache the files locally, lessening the burden on the server (less requests). Making your sites resources/components cache-able. More information: Add an Expires or a Cache-Control Header.

Back in our sites web.config file under the <system.webServer> section, we have the <staticContent> section:

<staticContent>
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00"></clientCache>
</staticContent>

The interesting part here is of course the clientCache element.

UseMaxAge will add CacheControlMaxAge to the HTTP Headers sent to the client, we can then tell the client to cache the static files for 1 year:

<staticContent>
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
</staticContent>

With UseExpires you specify a date instead:

<staticContent>
    <clientCache cacheControlMode="UseExpires" httpExpires="Tue, 19 Jan 2038 03:14:07 GMT" />
</staticContent>

You can only use one of these (if you’re not using the location element) at a time. I usually use MaxAge, it’s simpler and you don’t have to remember to update your settings when the date passes.

The important thing to remember is that if you make any changes to the static files you’ll need to use another name. You can add a querystring, change the name, or in some other way update the path to reflect that the file has changed.

Let’s update it to say that the client should cache the files for 1 year:

<staticContent>
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
</staticContent>

This helped bring the list of components down from 86 to 15. But we’re not quite finished yet.

EPiServer uses the location element to specify access rights and to use EPiServer’s StaticFileHandler for files located in Global Files, Page Files, Documents and other places that use Virtual Path Providers.

<location path="PageFiles">
	<system.webServer>
		<handlers>
			<add name="webresources" path="WebResource.axd" verb="GET" type="System.Web.Handlers.AssemblyResourceLoader" />
			<add name="wildcard" path="*" verb="*" type="EPiServer.Web.StaticFileHandler, EPiServer" />
		</handlers>
	</system.webServer>
	<staticFile expirationTime="365.00:00:00" />
</location>
<location path="Documents">
	<system.webServer>
		<handlers>
			<add name="webresources" path="WebResource.axd" verb="GET" type="System.Web.Handlers.AssemblyResourceLoader" />
			<add name="wildcard" path="*" verb="*" type="EPiServer.Web.StaticFileHandler, EPiServer" />
		</handlers>
	</system.webServer>
	<staticFile expirationTime="365.00:00:00" />
</location>
<location path="Global">
	<system.webServer>
		<handlers>
			<add name="webresources" path="WebResource.axd" verb="GET" type="System.Web.Handlers.AssemblyResourceLoader" />
			<add name="wildcard" path="*" verb="*" type="EPiServer.Web.StaticFileHandler, EPiServer" />
		</handlers>
	</system.webServer>
	<staticFile expirationTime="365.00:00:00" />
</location>

More information in EPiServer’s SDK: Caching of static files. This technique uses the Expires header instead of MaxAge, but with the same effect.

You might have noticed the <caching> section:

<caching>
	<profiles>
		<add extension=".gif" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		<add extension=".png" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		<add extension=".js" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		<add extension=".css" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		<add extension=".jpg" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		<add extension=".jpeg" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
	</profiles>
</caching>

The caching setting is used to configure output caching for IIS. You have both output caching for IIS and for ASP.NET. More information: Caching <caching>. By default IIS output caching is turned on.

What EPiServer has done is told IIS to not cache static files like images, CSS and JavaScript and let ASP.NET handle it instead. You can read more about IIS output caching here: Configure IIS 7 Output Caching.

Let’s remove the whole <caching> section and use the default settings instead.

Now we have a score of 78 points in YSlow and 95 in Page Speed. Here you can see how much of the total size is now cached:

On the left we can see the total size and number of requests the first time, on the right is the size and number of requests after that. We’re now down to 3 requests and 16KB. Quite an improvement don’t you think?

Minify JavaScript and CSS

When we’re developing we usually work with multiple JavaScript and CSS files to make it easier to structure and maintain them. However in production we should take care to automatically compress and bundle the files.

It’s important to note the difference between the rule Gzip Components and Minify JavaScript and CSS, which will remove comments, unneeded whitespaces and replace variable/function names with shorter versions.

There are a few tools we can use for this:

• SquishIt – I’ve written about it before: CSS and JavaScript compression and bundling
• Cassette
• ASP.NET 4.5 Optimization

We’re going to use ASP.NET 4.5 Optimization preview. You can easily install it through NuGet.

Note: you’ll need to run .NET 4, so we’ll need to upgrade our solution to use .NET 4 instead of .NET 3.5. This is quite easy thanks to David Knipe. Change the projects target framework in Visual Studio and install the EPiServerCMS6ToNetFour package from nuget.episerver.com.

After that you’ll be able to install ASP.NET 4.5 Optimization successfully.

To enable it we just call the EnableDefaultBundles() method inside Application_Start in Global.asax:

public class Global : EPiServer.Global
{
	protected void Application_Start(object sender, EventArgs e)
	{
		BundleTable.Bundles.EnableDefaultBundles();
	}
}

Next step is updating the way external JavaScript and CSS files are included. By default, everything you refer to in a folder gets bundled together (only for the same type, so JavaScript and CSS files don’t get bundled together even if they’re in the same folder).

<link href="/Templates/DemoSite/Styles/Main/css" rel="stylesheet" type="text/css" />
<script src="/Templates/DemoSite/Scripts/Main/js"></script>

We add the path to the folder followed by either /css or /js.

I had to manually update the code-behind files of site.master and the composer functions and change:

Page.RegisterCSSFile("ComposerFunctions.Teaser.Styles.Teaser.css", UriSupport.ResolveUrlBySettings("/Templates/DemoSite/ComposerFunctions/Teaser/Styles/Teaser.css"));

To:

Page.RegisterCSSFile("ComposerFunctions.Teaser.Styles.Teaser.css", UriSupport.ResolveUrlBySettings("/Templates/DemoSite/ComposerFunctions/Teaser/Styles/css"));

What I did was bundle the different JavaScript and CSS files into folders like components/modules and updated their references to use these folders instead.

There were a few inline scripts that I didn’t compress, but overall this helped a lot. I have now 97/100 points in Page Speed and 79/100 in YSlow.

Make fewer HTTP requests

Modern browsers can send up-to 6 requests at a time to the same domain. Older browsers up-to 2. Combining resource files like JavaScript, CSS and images into as few files as possible not only decreases the sites total size, but also make it load much faster for the client.

For JavaScript and CSS files we can use the technique we learned in the previous step (Minify JavaScript and CSS). For images we can use CSS sprites or embed the images.

What we’re going to do is embed the CSS background images into the stylsheets. I’ve borrowed the code from Mads Kristensen’s presentation on Build – Optimize your website using ASP.NET and IIS8.

using System;
using System.IO;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Hosting;
using Microsoft.Web.Optimization;
 
namespace EPiServer
{
    public class CssWithImagesMinify : CssMinify
    {
        private static readonly Regex url = new Regex(@"url\((([^\)]*)\?embed)\)", RegexOptions.Singleline);
        private const string format = "url(data:image/{0};base64,{1})";
 
        public override void Process(BundleResponse bundle)
        {
            HttpContext.Current.Response.Cache.SetLastModifiedFromFileDependencies();
            base.Process(bundle);
            string reference = HttpContext.Current.Request.Path.Replace("/css", "/");
 
            // When publishing the bundler can be called from "/" causing image reference to be invalid.
            if (reference == "/")
                reference = "/Content/";
 
            foreach (Match match in url.Matches(bundle.Content))
            {
                var file = new FileInfo(HostingEnvironment.MapPath(reference + match.Groups[2].Value));
                if (file.Exists)
                {
                    string dataUri = GetDataUri(file);
                    bundle.Content = bundle.Content.Replace(match.Value, dataUri);
                    HttpContext.Current.Response.AddFileDependency(file.FullName);
                }
            }
        }
 
        private string GetDataUri(FileInfo file)
        {
            byte[] buffer = File.ReadAllBytes(file.FullName);
            string ext = file.Extension.Substring(1);
            return string.Format(format, ext, Convert.ToBase64String(buffer));
        }
    }
}

For all the images we want to embed we just add ?embed behind their name:

background: url('../Images/abuse.png?embed') no-repeat scroll 0 0 transparent;

We also need to update Global.asax and tell BundleTable to use our CSS Minifier instead.

protected void Application_Start(object sender, EventArgs e)
{
	var css = new DynamicFolderBundle("css", typeof(CssWithImagesMinify), "*.css");
	var js = new DynamicFolderBundle("js", typeof(JsMinify), "*.js");
 
	BundleTable.Bundles.Add(css);
	BundleTable.Bundles.Add(js);
}

The CSS files now have their background images embedded automatically!

background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA5IAAAAFCAYAAAA3+tN0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGFJREFUeNrs1zEKg1AQRdE/VgYN4uZcZDYXxEDSfd8W0gmeA5fpp3vVWpvSmB5pTs+0pLX3/moAAADcTlVtOe+0pyN90jf9Bu8BAADgH4YkAAAAhiQAAACGJAAAABdxCjAAa0EKFYXT/VsAAAAASUVORK5CYII=") repeat-y scroll 0 0 transparent;

There’s also a nice extension for Visual Studio that let’s right-click a folder inside Visual Studio and optimize all the images inside that folder: Image Optimizer.

I now have 99/100 in Page Speed and 95/100 in YSlow.

Further improvements

• Use a CDN – See Use a Content Delivery Network and Virtual Path Provider for Amazon S3
• Remove whitespaces and comments from HTML markup
• Optimize CSS selectors and placement of stylesheets
• Optimize JavaScript code, especially jQuery, remove inline code and update the placement of the JavaScript code
• Reduce DNS Lookups and consider using a service like Amazon’s Route 53 for faster DNS lookups

Resources

• Best Practices for Speeding Up Your Web Site
• jsPerf — JavaScript performance playground
• WebPageTest – Test a website’s performance
• Spritemapper – CSS Spritemap Generator
• Page Speed Online
• ASP.NET CSS Sprites

Related Posts:

• CSS and JavaScript compression and bundling
• Adding CSS and JavaScript files dynamically to your ASP.NET page
• Part 8: Preparing for launch – Create an EPiServer site from scratch
• Transparent PNGs
• Installing EPiServer Live Monitor on IIS 7 running .NET 4

So what is injection?

Injection flaws, such as SQL, OS, and LDAP injection, occur when untrusteddata is sent to an interpreter as part of a command or query. The attacker’s hostile data can trick the interpreter into executing unintended commands or accessing unauthorized data.

What this means is that evil input data (from querystrings, form data, HTTP Headers etc) cause your applications queries or commands to change (in a way not designed by you as the developer of the application).

The most common form is SQL injection. Eg:

string query = "SELECT * FROM customers WHERE ID='" + Request["id"];

The attacker can then simple modify either the querystring, form data or the HTTP header collection.

http://example.com/customers?id=’ or ’1′=’1

This allows the attacker to view the customer information they like, or even go as far as deleting the table (if they run in a user context that has enough database rights).

One way to fix this is to either use parameters or stored procedures:

string query = "SELECT * FROM customers WHERE ID=@id";
SqlCommand command = new SqlCommand(query, connection);
SqlParameter idParameter = new SqlParameter("@id", SqlDbType.Int) { Value = Request["id"] };
 
command.Parameters.Add(idParameter);

This is better, now when someones tries to run http://example.com/app/accountView?id=’ or ’1′=’1 they’ll get an error (since we’ve defined that id is an integer, ADO.NET takes care of sanitizing the input).

Validate all input

First rule is to always code defensively. An attacker can easily modify everything sent to you, without needing a HTML form. HTTP proxies like Fiddler make this easy. It is much safer for us to whitelist input (specify what we consider valid input), than to blacklist input (specify what is not allowed). The reason for this is simple, you know what is accepted and valid and can make sure that the input matches that pattern. With blacklisting there is a infinitive number of different patterns we’d need to validate against.

In the case above where we accept an ID, which in our case only consists of integers. We can use the int.TryParse() method to validate the input:

int id;
 
if(!int.TryParse(Request.QueryString["id"], out id)
{
  lblMessage.Text = "Invalid customer id.";
  return;
}
 
// valid integer number

Notice that we now only check the querystring (I’m not using Request["id"] anymore), We also validate and make sure that this is a number. Taking this a step further we could make sure that the number follows a pattern that we’ve defined for customer IDs (at least 4 digits, only positive numbers etc), by using a regular expression.

Dynamic Data Store

With EPiServer CMS 6 came the Dynamic Data Store, (more information on Dynamic Data Store). EPiServer has a factory class for accessing the dynamic data store: DynamicDataStoreFactory. We then use LINQ and Lambda to query the data. If you’ve used ORM tools like NHibernate, LINQ to SQL, Entity Framework etc before this should be familiar. The LINQ and Lambda code then gets translated to SQL code by both using parameters and stored procedures (which protect us against SQL-injections). If you’re curious how this code looks, take a look at the SqlServerDataStoreProvider class in EPiServer.Data.dll.

Always, always use EPiServer’s API when accessing EPiServer data. Not only does it protect against security vulnerbilities like SQL-injection, it also adds smart caching, event notifications and other goodies.
Related Posts:

• Extending search field with suggestion box
• Using multiple forms on an ASP.NET web forms page
• Part 5: Creating the search page – Create an EPiServer site from scratch
• How to add support for iframes (and other elements) to TinyMCE in EPiServer CMS
• Detecting Ajax requests on the server

1. Injection
2. Cross-Site Scripting (XSS)
3. Broken Authentication and Session Management
4. Insecure Direct Object References
5. Cross-Site Request Forgery (CSRF)
6. Security Misconfiguration
7. Insecure Cryptographic Storage
8. Failure to Restrict URL Access
9. Insufficient Transport Layer Protection
10. Unvalidated Redirects and Forwards

In this series I’m going to explain the 10 security risks and how we as EPiServer developers (or ASP.NET) can protect us against exposing them in our web applications, we’ll also look at tools for analyzing web applications to find security flaws and how we as developers should think about security when developing.

Hope you’ll enjoy this series. Feedback is as always welcome.

Related Posts:

• Part 1: Injection – OWASP Top 10 for EPiServer Developers
• Links for EPiServer Developers – #1
• Links for EPiServer Developers – #2
• Introduction – Create an EPiServer site from scratch
• Part 8: Preparing for launch – Create an EPiServer site from scratch

Security

• web.config Security Analyzer – onlien and offline tool for checking your sites web.config for security vulnerabilities

ASP.NET

• Create PDF document using iTextSharp in ASP.Net 4.0 and MemoryMappedFile
• RazorEngine – use the powerful Razor template engine in your project. I’ve used this for newsletter templates with great success.

Performance

• ASP.NET Sprite and Image Optimization – Easily generate CSS sprites. Works for both ASP.NET Webforms and MVC
• Isis – great new tool for cache management

Tools

• User Agent-Switcher addon for Firefox – great for when developing for Mobile devices or just seeing what Google sees when it indexes your site

EPiServer

• EPiCode Extensions – over 80 extension methods for EPiServer
• Customising the EPiServer UI – nice post by David Knipe that shows how powerful EPiServer’s customization and plugin system is
• ElencySolutions.MultipleProperty v1.1 Released
• Typed “Find” method in Dynamic data store
• Getting started with EPiServer CMS development – great post by Joel Abrahamsson for new developers to EPiServer
• New stuff in EPiServer CMS 6 R2 – nice overview by Fredrik Haglund
• Container pages – new type of page in EPiServer CMS 6 R2
• Changes to the EPiServer CMS Globalization
• Checklist for setting up Windows Authentication in EPiServer on a development machine
• Relate Intranet Demo Site – Demo templates for a social intranet

Videos

• ASP.NET Tips and Tricks on dnrTV – Steve Smith goes through a lot in this video, from tracing and caching to performance optimizing ASP.NET MVC 3 applications

HTML, CSS, JavaScript

• Syncing Content With HTML5 Video – excellent article that gives you a taste for what is possible with HTML5 Video and interactions on your web page (interacting with Google Maps or similar at certain points in the video for instance)
• Popcorn.js – HTML5 Video event Framework, with a lot of plugins for Google Maps, Wikipedia, Flickr etc
• Butter – Popcorn.js authoring tool
• Flexible height vertical centering with CSS, beyond IE7
• HTML5 Boilerplate – great start for new projects
• Web.config for HTML5 Boilerplate
• Internet Explorer 9 Guide for Developers
• CSS Compatibility and Internet Explorer
• Search for jQuery plugins – search engine that’ll help you find jQuery plugins
• JavaScript Garden – JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language.

Mobile

• 51 Degrees Mobile Device Detection and Redirection – Based on the WURFL project. Setup rules for mobile devices visiting your site

Web

• What should a developer know before building a public web site?

Related Posts:

• Links for EPiServer Developers – #1
• Backup plan when loading the jQuery library from CDN
• Creating a mobile version of a web site
• Transparent PNGs
• ASP.NET web forms and jQuery Thickbox plugin

Security

• Web Application Configuration Security Revisited – useful security checklist to go through before launching new sites (or existing)
• JavaScript Captcha – good post that discusses the problems with todays approach to securing against spam bots, and that suggest another approach using JavaScript and timing instead.

Deployment

• You’re deploying it wrong! TeamCity, Subversion & Web Deploy part 1: Config transforms
• Automated database releases with TeamCity and Red Gate

Performance

• Boomerang – JavaScript library developed by Yahoo! for measuring the performance of a website from a client (end user’s) point of view. Along with YSlow (also from Yahoo!) and Page Speed this is a very useful tool to have.
• C#/.NET Little Wonders: The Useful But Overlooked Sets – good post that explains Sets collections (and their changes in .NET 4) and when to use them.
• Performance improvements in EPiServer CMS6R2

Tools

• NuGet – very useful tool developed by Microsoft and the community for easily adding open source modules to your project. Mark Everard wrote a nice post where he goes through adding Page Type Builder as a NuGet package (anyone up for creating an EPiServer NuGet feed? )
• Microsoft Web Farm Framework 2.0
• Web Deploy 2.0

EPiServer

• Dynamic Data Store and new properties on Types – very useful extension method by Anders Hattestad for the dynamic data store. Remapping is something that most get wrong the first time they work with DDS.
• Creating classes for PageTypeBuilder in an existing project – just because it is so awesome and alot of people don’t know about it .
• FilteredPageReference v1.1 Released
• Starting CMS 6 sites faster after build – very useful tips – especially when working with EPiServer Community
• Developing a custom workflow in EPiServer – nice 4 part series on how to develop workflows for EPiServer

Code

• 5 Helpful DateTime Extension Methods

Database

• The unnecessary evil of the shared development database

HTML, CSS, JavaScript

• ASP.NET and HTML5 Local Storage – HTML local storage is one of the coolest new features of HTML 5. Here you’ll get a nice introduction and how to use it in your ASP.NET application.
• Building Large-Scale jQuery Applications – When you start using jQuery and JavaScript in larger scale your code can become very messy after a while. This post has some nice pointers on structuring your code, testing and other goodies.

ReSharper

• Easier Debugging with ReSharper and the Clipboard

Related Posts:

• Links for EPiServer Developers – #2
• Introduction – OWASP Top 10 for EPiServer Developers
• Part 8: Preparing for launch – Create an EPiServer site from scratch
• EPiServer Mail 5 R2: The stored procedure ‘spEPiServerMailSampleRecipientSourceGetMailingLists’ doesn’t exist
• Backup plan when loading the jQuery library from CDN

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

Removing the X-Powered-By Header

Open up IIS Manager, choose your site and go to HTTP Response Headers. Here you’ll see X-Powered-By being inherited. You can either remove it only for this site or for all sites on this server (select the server name in IIS Manager and HTTP Response Headers).

You can also do this in your sites web.config.

<system.webServer>
...
<httpProtocol>
    <customHeaders>
        <remove name="X-Powered-By" />
    </customHeaders>
</httpProtocol>
...
</system.webServer>

Removing the Server Header

To remove this HTTP Header we need to create a custom HTTP Module.

using System;
using System.Web;
 
namespace MyNamespace
{
    public class HttpHeadersCleanup : IHttpModule
    {
        public void Init(HttpApplication context)
        {
            context.PreSendRequestHeaders += PreSendRequestHeaders;
        }
 
        private static void PreSendRequestHeaders(object sender, EventArgs e)
        {
            HttpContext.Current.Response.Headers.Remove("Server");
        }
 
        public void Dispose()
        {
        }
    }
}

You also need to register the HTTP Module in your sites web.config.

<system.webServer>
...
    <modules runAllManagedModulesForAllRequests="true">
        <add name="HttpHeadersCleanup " type="MyNamespace.HttpHeadersCleanup, MyAssembly"/>
    </modules>
...
</system.webServer>

Removing the ETag Header

For more information on ETag see: HTTP ETag.

To remove ETag you need to add the code below to the HTTP Module described previously.

HttpContext.Current.Response.Headers.Remove("ETag");

Removing the X-Aspnet-Version Header

To remove this HTTP Header you simply set enableVersionHeader to false in your sites web.config.

<system.web>
...
    <httpRuntime enableVersionHeader="false" />
...
</system.web>

Or by removing it in the HTTP Module:

HttpContext.Current.Response.Headers.Remove("X-AspNet-Version");

Here’s how the HTTP Headers look now:

Related Posts:

• Detecting Ajax requests on the server
• Part 8: Preparing for launch – Create an EPiServer site from scratch
• Faster EPiServer sites – client side performance
• Part 1: Setting up the development environment – Create an EPiServer site from scratch
• Getting the Page and EPiServer CurrentPage object from HttpContext

Web Services

In the WebMethod attribute you need to set the property EnableSession to true (told you it was simple).

using System.ServiceModel;
using System.Web.Script.Services;
using System.Web.Services;
 
namespace Coop.Web.Templates.WebServices.MegaStore
{
    [WebService(Namespace = "http://schema.company.com")]
    [XmlSerializerFormat]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [ScriptService]
    public class Manager : WebService
    {
        [WebMethod(EnableSession = true)]
        public string MyMethod()
        {
            // you can now use the session collection: Session
        }
    }
}

Generic Handlers

For Generic Handlers you need to implement the interface IReadOnlySessionState, located in System.Web.SessionState.

using System.Web;
using System.Web.SessionState;
 
namespace Playground
{
    public class MyGenericHandler: IHttpHandler, IReadOnlySessionState
    {
        public void ProcessRequest(HttpContext context)
        {
            // you can now use the session collection: context.Session
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Related Posts:

• Removing HTTP Headers for ASP.NET sites
• Part 8: Preparing for launch – Create an EPiServer site from scratch
• Removing duplicates from a PageDataCollection
• Tags version 0.2 released for EPiServer CMS
• ASP.NET Validation and jQuery

EPiCode Extensions is a library with over 75 extension methods that are really useful to us as EPiServer developers. The project has grown rapidly in short time, with new extension methods being added every week.

The goal of the library is to help out with the most used tasks during development of an EPiServer site and make them easy and fun to use and extend.

Note: this blog post is a work in progress and will be updated as the library progresses.

Encoding

ToWebString

This extension method will remove all HTML code except for what is specified as allowed under your sites UISafeHtmlTags (located in episerver.config under sitesettings).

Method signature

public static string ToWebString(this object obj){...}

Example

Example 1: This example uses Page Type Builder to first check if the property Heading as any value, if so return that, if not, return PageName and then ToWebString encode it to escape HTML code that isen’t specified in UISafeHtmlTags (typically everything except for: b,i,u,br)

[PageTypeProperty(Searchable = true, SortOrder = 10, Tab = typeof(Tabs.Information), Type = typeof(PropertyString))]
public virtual string Heading
{
    get { return (this.GetPropertyValue(page => page.Heading) ?? PageName).ToWebString(); }
}

Example 2: This time we use ToWebString() inside a Repeater, encoding the property Name’s value.

<asp:Repeater runat="server">
<ItemTemplate><h2><%# Eval("Name").ToWebString() %></h2></ItemTemplate>
</asp:Repeater>

ToHtmlEncoded

This method calls HttpUtility.HtmlEncode().

HTML encoding makes sure that text is displayed correctly in the browser and not interpreted by the browser as HTML. For example, if a text string contains a less than sign (<) or greater than sign (>), the browser would interpret these characters as the opening or closing bracket of an HTML tag. When the characters are HTML encoded, they are converted to the strings < and >, which causes the browser to display the less than sign and greater than sign correctly.

HttpUtility.HtmlEncode method

Method signature

public static string ToHtmlEncoded(this string text){...}

Example

Here I store the zip code that the user typed in, but HtmlEncode before to escape potential harmful code.

this._stateManager.StoreValue("zipcode", txtZipCode.Text.ToHtmlEncoded());

ToJavaScriptEncoded

This method uses EPiServer’s ClientScriptUtility.ToScriptSafeString().

Make a string safe to be embedded into a script block, by replacing any characters that would invalidate the script with script-safe characters.

EPiServer’s ClientScriptUtility.ToScriptSafeString method

Method signature

public static string ToUrlEncoded(this string text){...}

Example

ToUrlEncoded

This method calls HttpUtility.UrlPathEncode().

The UrlPathEncode() method converts each space character into the string “%20″, which represents a space in hexadecimal notation. Use the UrlPathEncode() method when you encode the path portion of a URL in order to guarantee a consistent decoded URL, regardless of which platform or browser performs the decoding.

HttpUtility.UrlPathEncode method

Method signature

public static string ToJavaScriptEncoded(this string text){...}

Example

Here I UrlPathEncode the CurrentPages external URL.

http://www.facebook.com/widgets/like.php?href=<%= CurrentPage.GetExternalUrl().ToUrlEncoded() %>

HTML markup

Extension methods that help us produce good, clean semantic HTML markup.

HtmlImage

Method signature

public static string HtmlImage(this PageData page, string imagePropertyName) {...}
public static string HtmlImage(this PageData page, string imagePropertyName, object attributes) {...}
public static string HtmlImage(this PageData page, string imagePropertyName, string altTextPropertyName) {...}
public static string HtmlImage(this PageData page, string imagePropertyName, string altTextPropertyName, object attributes) {...}
 
public static string HtmlImage(this PageData page, Func<PageData, string> imagePath) {...}
public static string HtmlImage(this PageData page, Func<PageData, string> imagePath, object attributes) {...}
public static string HtmlImage(this PageData page, Func<PageData, string> imagePath, string altText) {...}
public static string HtmlImage(this PageData page, Func<PageData, string> imagePath, string altText, object attributes) {...}
public static string HtmlImage(this PageData page, Func<PageData, string> imagePath, Func<PageData, string> altText) {...}
public static string HtmlImage(this PageData page, Func<PageData, string> imagePath, Func<PageData, string> altText, object attributes) {...}
 
public static string HtmlImage(this string imagePath){...}
public static string HtmlImage(this string imagePath, string altText){...}
public static string HtmlImage(this string imagePath, object attributes){...}
public static string HtmlImage(this string imagePath, string altText, object attributes){...}

Example

Example 1: Here we use Page Type Builder with the property type PropertyImageUrl.

<p><%= CurrentPage.FeaturedImage.HtmlImage() %></p>
Result: <p><img alt="" src="/Global/LogoTypes/logo.png" /></p>
 
<p><%= CurrentPage.FeaturedImage.HtmlImage("My featured image") %></p>
Result: <p><img alt="My featured image" src="/Global/LogoTypes/logo.png" /></p>
 
<p><%= CurrentPage.FeaturedImage.HtmlImage(new{@class = "featured"}) %></p>
Result: <p><img alt="" class="featured" src="/Global/LogoTypes/logo.png" /></p>

Example 2: Same as the previous example, only without using Page Type Builder.

<p><%= CurrentPage.HtmlImage("FeaturedImage") %></p>
Result: <p><img alt="" src="/Global/LogoTypes/logo.png" /></p>
 
<p><%= CurrentPage.HtmlImage(p => p.PropertyValue<string>("FeaturedImage"), "My featured image")%></p>
Result: <p><img alt="My featured image" src="/Global/LogoTypes/logo.png" /></p>
 
<p><%= CurrentPage.HtmlImage("FeaturedImage", new{@class = "featured"}) %></p>
Result: <p><img alt="" class="featured" src="/Global/LogoTypes/logo.png" /></p>

If the property has no value no img tag will render.

HtmlLink

Method signature

public static string HtmlLink(this PageData page){...}
public static string HtmlLink(this PageData page, string linkText){...}
public static string HtmlLink(this PageData page, Func<PageData, string> linkText){...}
public static string HtmlLink(this PageData page, object attributes){...}
public static string HtmlLink(this PageData page, string linkText, object attributes){...}
public static string HtmlLink(this PageData page, Func<PageData, string> linkText, object attributes){...}

Example

For examples see: Extending PageData with some cool Html Helpers.

StripHtml

Method signature

public static string StripHtml(this PageData page){...}
public static string StripHtml(this PageData page, int maxTextLength){...}
public static string StripHtml(this PageData page, string propertyName){...}
public static string StripHtml(this PageData page, string propertyName, int maxTextLength){...}
public static string StripHtml(this PageData page, Func<PageData, string> htmlText){...}
public static string StripHtml(this PageData page, Func<PageData, string> htmlText, int maxTextLength){...}
 
public static string StripHtml(this string htmlText, int? maxTextLength){...}

Example

In this example we remove all HTML markup and strip the text (if it’s to long) to a specified length.

<p><%= CurrentPage.MainIntro.StripHtml(255) %></p>
<p><%= CurrentPage.StripHtml("MainIntro", 255) %></p>
 
Result: <p>255 characters of text...</p>

This is usually used in lists.

FormatHtml

Method signature

public static string FormatHtml(this PageData page, string propertyName, string startTag, string endTag){...}
public static string FormatHtml(this PageData page, string propertyName,string format){...}
 
public static string FormatHtml(this string text, string startTag, string endTag){...}

Example

<%= CurrentPage.Author.FormatHtml("<p>", "</p>") %>
 
Result: <p>Frederik</p>

If the property has no value nothing will get rendered.

PageData and PageDataCollection

GetExternalUrl

Method signature

public static string GetExternalUrl(this PageData page){...}
 
public static string GetExternalUrl(this PageReference pageReference){...}

Example

<%= CurrentPage.GetExternalUrl() %>
 
Result: http://playground/en/Test/

GetDescendants

This method will return either all the descending pages or all the descending pages down to a certain level. Very useful when creating lists.

Method signature

public static IEnumerable<PageData> GetDescendants(this PageData rootPage){...}
public static IEnumerable<PageData> GetDescendants(this PageData rootPage, int levels){...}

HasChildren

Method signature

public static bool HasChildren(this PageData pageData){...}

GetChildren

This method returns the children of the page.

Method signature

public static PageDataCollection GetChildren(this PageData page){...}
 
public static PageDataCollection GetChildren(this PageReference pageReference){...}

GetPage

This method returns a PageData object

Method signature

public static PageData GetPage(this PageReference pageReference){...}

GetAncestorAtLevel

Gets the ancestor at a given level from a root page. If the page provided is at this level, it is returned.

This method is especially useful when finding the root page for a secondary navigation structure.

Method signature

public static PageData GetAncestorAtLevel(this PageData page, PageReference rootPage, int offset){...}

GetAncestors

Get all the ancestors of a page or get all the ancestors of a page up to a given root page.

Method signature

public static IEnumerable<PageData> GetAncestors(this PageData page){...}
public static IEnumerable<PageData> GetAncestors(this PageData page, PageReference rootPage){...}

GetParent

Gets the parent PageData object, returns null if no parent is found or if the page is in the recycle bin.

Method signature

public static PageData GetParent(this PageData page){...}

PropertyValueWithDefault

Returns the EPiServer property value. If null or empty returns default value.

Method signature

public static T PropertyValueWithDefault<T>(this PageData page, string propertyName, T defaultValue){...}

Example

<%= CurrentPage.PropertyValueWithDefault("MainBody", "Nothing to see..") %>

PropertyValue

Get EPiServer property value. You’ll be using this method a lot if you don’t have Page Type Builder.

Method signature

public static T PropertyValue<T>(this PageData page, string propertyName){...}

Example

Example 1: Here we simply get the value of the MainIntro property.

<%= CurrentPage.PropertyValue<string>("MainIntro") %>

Example 2: Here we get the value of the MyPage property (which is a Page property) and then we get the PageData object with the GetPage extension method.

<%= CurrentPage.PropertyValue<PageReference>("MyPage").GetPage()

ToPageDataCollection

Method signature

public static PageDataCollection ToPageDataCollection (this IEnumerable<PageData> pages){...}
 
public static PageDataCollection ToPageDataCollection(this LinkItemCollection linkItemCollection){...}

Example

Example 1: Here we convert the collection to a PageDataCollection so that we can use EPiServer’s filter methods.

CurrentPage.GetDescendants()
                .ToPageDataCollection()
                .FilterForVisitor();

Example 2: Here we convert a LinkItemCollection to a PageDataCollection which makes it easier to work with the objects in the collection.

CurrentPage.MyLinkItemCollection.ToPageDataCollection()
                                             .FilterCount(2);

GetProperty

Sometimes we need to work with the PropertyData object of a property.

Method signature

public static PropertyData GetProperty(this PageData page, string propertyNames){...}

IsEPiServerPage

Checks that this is a valid EPiServer page.

Method signature

public static bool IsEPiServerPage(this PageData page) {...}

IsSelected

Method signature

public static bool IsSelected(this PageData page, PageData currentPage){...}

Example

See The SelectedTemplate and duplicate code

IsPublished

Method signature

Checks that the page is published.

public static bool IsPublished(this PageData page){...}

IsValue

Very useful for checking if the property has any value (the one that ships with EPiServer only checks for CurrentPage, not for any PageData object).

Method signature

public static bool IsValue(this PageData page, string propertyName){...}

Example

if (ParentPage.IsValue("MegaMenuLinksInColumn"))
{
    this.Menu.GroupItemCount = (int)ParentPage["MegaMenuLinksInColumn"];
}

ToPresentationString

Method signature

public static string ToPresentationString(this PropertyXhtmlString propertyData, PageBase page){...}

Categories

GetActiveSubCategories

Method signature

public static CategoryCollection GetActiveSubCategories(this CategoryList allActiveCategoryIds, string parentCategoryName){...}
public static CategoryCollection GetActiveSubCategories(this CategoryList allActiveCategoryIds, int parentCategoryId){...}
public static CategoryCollection GetActiveSubCategories(this CategoryList allActiveCategoryIds, Category parentCategory){...}

Example

See Extending EPiServer Categories

Filters

FilterForVisitor

Method signature

public static PageDataCollection FilterForVisitor(this PageDataCollection pageDataCollection){...}

Example

CurrentPage.GetChildren().FilterForVisitor();

FilterAccess

Method signature

public static PageDataCollection FilterAccess(this PageDataCollection pageDataCollection, AccessLevel accessLevel){...}

Example

CurrentPage.GetChildren().FilterAccess(AccessLevel.Edit);

FilterCompareTo

Method signature

public static PageDataCollection FilterCompareTo(this PageDataCollection pageDataCollection, string propertyName, string propertyValue){...}

Example

Filters out all pages that don’t have Visible in menu set to true (checked).

CurrentPage.GetChildren().FilterCompareTo("PageVisibleInMenu", "true");

FilterCount

Method signature

public static PageDataCollection FilterCount(this PageDataCollection pageDataCollection, int count){...}

Example

CurrentPage.GetChildren().FilterCount(3);

FilterPropertySort

Method signature

public static PageDataCollection FilterPropertySort(this PageDataCollection pageDataCollection, string propertyName){...}
public static PageDataCollection FilterPropertySort(this PageDataCollection pageDataCollection, string propertyName, FilterSortDirection filterSortDirection){...}

Example

CurrentPage.GetChildren().FilterPropertySort("PageSortIndex");

FilterSkipCount

Method signature

public static PageDataCollection FilterSkipCount(this PageDataCollection pageDataCollection, int skipCount){...}

Example

Great for pagination.

CurrentPage.GetChildren().FilterSkipCount(5)
                                  .FilterCount(10);

FilterSort

Method signature

public static PageDataCollection FilterSort(this PageDataCollection pageDataCollection, FilterSortOrder sortOrder){...}

Example

CurrentPage.GetChildren().FilterSort(FilterSortOrder.Alphabetical);

Globalization

Translate

Method signature

public static string Translate(this object obj, string xpath) {...}

Working with Server Controls

RenderToString

Method signature

public static string RenderToString(this Control control){...}

Example

FindChildControls

Find all child controls matching a predicate.

Method signature

public static IEnumerable<T> FindChildControls<T>(this Control parentControl, Predicate<Control> predicate) where T : Control{...}

Example

Example 1: Here we find all the TextBox controls on the page.

Page.FindChildControls<TextBox>(c => c is TextBox);

Example 2: Here we find the a button on the page with the ID btnSubmit.

Page.FindChildControls<Button>(c => c.ID == "btnSubmit").First();

AddToHeader

Moves a control up to the head section if it exists.

Method signature

public static bool AddToHeader(this Control control){...}

AddToParent

oves a control up to the first element that exists with the FindControl method .

Method signature

public static bool AddToParent(this Control control, string path){...}

Working with Strings

IsNullOrEmpty

Method signature

public static bool IsNullOrEmpty(this string text){...}

Example

Do something if MainIntro is null or empty.

if (CurrentPage.MainIntro.IsNullOrEmpty()) {...}

IsNotNullOrEmpty

Method signature

public static bool IsNotNullOrEmpty(this string text){...}

Example

Do something if MainIntro is not null or empty.

if (CurrentPage.MainIntro.IsNotNullOrEmpty()) {...}

Get started

Head over to EPiCode and download the latest release. Reference EPiCode.Extensions in your project, and you’re all set! We also recommend registering the namespace in your web.config file for easy access.

<pages>
    <namespaces>
        <add namespace="EPiCode.Extensions"/>
    </namespaces>
</pages>

Happy coding!Related Posts:

• Extending PageData with some cool Html Helpers
• EPiServer Link Collection Property
• Creating a Custom EPiServer Paging Control
• Adding CSS and JavaScript files dynamically to your ASP.NET page
• EPiServer web controls: NewsList

Examples

Simply copy the URL.

Add a new dynamic content and paste in the URL

And the result. Pretty cool huh?

This works for a lot of popular services and makes it so much easier than manually copying/pasting the embed code. I encourage you to take a peek at the source code, especially the oEmbedResponse.cs class to see what you get back.

Get started

To get started simply download Geta.oEmbed.dll and add it to your sites bin folder (note that you need to unblock it). Then you need to register the dynamic content in episerver.config:

<dynamicContent>
    <controls>
      ...
      <add description="Displays an oEmbed object on the page" name="oEmbedPlugin" type="Geta.oEmbed.DynamicContent.oEmbedPlugin, Geta.oEmbed" />
    </controls>
  </dynamicContent>

That’s it! You can now use oEmbed both as a dynamic content plugin and as a custom property.

Resources

• oEmbed
• oohEmbed

Related Posts:

• SlideShare Dynamic Content
• CSS3 buttons and EPiServer editor stylesheet
• ASP.NET web forms and jQuery Thickbox plugin
• Avoiding conflicts when using jQuery and EPiServer Composer
• Creating a simple image gallery with EPiServer