Frederik Vig - ASP.NET developer

EPiCode.Extensions and ambiguous reference

Frederik Vig — Wed, 28 Jul 2010 13:34:11 +0000

On new projects where I use EPiCode.Extensions I always register the namespace EPiCode.Extensions in my web.config – that way I can use the extension methods in my .aspx and .ascx files without needing to register EPiCode.Extensions in every file.

...
      >
        ...
         namespace="EPiCode.Extensions" />     
      >
    >
...

Sometimes this can cause some problems when you have other extension methods with the same method signature.

In this case it was with EPiServer Composer. To fix it I created a simple web.config file that I placed inside the Dropit\Plugin\Extension folder.

Here’s the code.

 version="1.0"?>
>
  >
      >
          >
               namespace="EPiCode.Extensions" />
          >
      >
  >
>

You can also use the location element of your main web.config file instead.

 path="dropit">
        >
            >
                >
                     namespace="EPiCode.Extensions" />
                >
            >
        >
    >

And that’s it! This will also work for all the sub directories as well.

On a side-note: I’ve been adding a lot of new extension methods lately to the project. I’ve listed them on the project’s wiki-page. Go check them out!Related Posts:

Specify a canonical domain name for your site with IIS 7

Frederik Vig — Tue, 13 Jul 2010 07:57:17 +0000

When setting up new sites in IIS you specify which host names map to your site. Usually this is at least two: www.example.com and example.com, sometimes even more. One great new addition to IIS 7 is the URL Rewriting extension. This allows you to setup a few rules for your URLs.

Let’s start by downloading and installing the URL Rewrite extension. The official IIS site has a download section with some very cool extension that I recommend you check out when you have the time. For now we only need the URL Rewrite extension. This will launch the Web Platform Installer, click Install and Accept. You should now see a new module in IIS.

To setup the rule we need for our canonical domain, just click the Add Rule(s) link and and under Search Engine Optimization (SEO) section choose Canonical domain name. Select a primary host name and you’re done!

What this does is redirect all traffic going to www.frederikvig.com to frederikvig.com, www.frederikvig.com/news to frederikvig.com/news etc, with a 301 (permanent redirect).

The reason this is important for SEO purposes is that search engines treat all URLs differently, so when you have two or more URLs all pointing to the same content your search ranking will suffer. Fortunately we have fixed this now with this rule, next time Google or some other search engine visits your site it will update it’s indexes, making all links point to the same domain name.

There are a lot of other great enhancements (Enforce lowercase URLs, User Friendly URLs etc) that I recommend checking out. Here are a few articles to get you started.Related Posts:

CSS and JavaScript compression and bundling

Frederik Vig — Sat, 19 Jun 2010 22:26:50 +0000

In the last post in Create an EPiServer site from scratch I go through some optimization tips and tricks from YSlow. One of these are CSS and JavaScript compression and bundling of files to create fewer HTTP requests and to send the least amount of data back to the client as possible, removing whitespaces, comments etc, that we don’t need to run our code.

In the past I’ve done this as part of my deployment process, but recently I’ve come across a tool called SquishIt. Which basically is a wrapper for YUI Compressor (you can easily replace it with your compressor of choice). It is dead simple to use, you simply add a reference to SquishIt.Framework.dll in your project, and replace your old CSS and JavaScript links and script tags with code like this.

<%= Bundle.Css()
          .Add("~/Styles/screen.css")
          .Add("~/Styles/print.css")
          .Add("~/Styles/mobile.css")
          .Render("~/Styles/combined-#.css")%>
 
<%= Bundle.JavaScript()
          .Add("~/Scripts/belatedPNG-0.0.8a-min.js")
          .Add("~/Scripts/ie6.js")
          .Render("~/Scripts/ie6combined-#.js") %>

Using a fluent interface makes it easy to add more file references, ending with the Render method that takes a parameter for where to store the combined and minimized file.

It is very easy to toggle SquishIt on and off. Simply set debug=”true” in your web.config file to turn it off and render CSS and JavaScript files as normal, great for when you need to debug your code. Set debug=”false” to enable compression and bundling again.

Best part is that it only took me 2 minutes to setup and add to my current project! Works like a charm so far .Related Posts:

EPiServer Developer Resources

Frederik Vig — Thu, 27 May 2010 13:53:10 +0000

Last updated 05.07.2010

Report Center
Mobile
Bugs and where to find help
1. FAQ
Subscription
Categories
Import / Export
Content Channels
URL rewriting / friendly URL
TinyMCE / Editor
XForms
Globalization / localization
File system / VPP
Security, Membership and roles
Events
Oracle
SEO
Workflows
Errors, Logging and debugging
1. Logging
2. Errors and Error handling
3. Debugging
Configuration
Getting started guides and tutorials
Checklists
SDK and API documentation
Guides
EPiServer Framework
1. Online Center
  1. Gadgets
2. Dynamic Data Store
  1. Page Objects
  2. Dynamic Data Store
3. Initialization System
Modules
1. Modules and deployment center
2. Open Source Modules
3. EPiServer Composer
4. EPiServer Community
  1. Tech-notes
  2. More resources
5. EPiServer Commerce
6. EPiServer Relate+
7. EPiServer Mail
8. EPiServer CMO
9. EPiServer Connect for CRM
10. EPiServer Connect for SharePoint
Extending EPiServer
1. Plugins
2. Custom Property
3. Dynamic Content
4. Scheduled Jobs
EPiServer Enterprise
1. Load Balancing
2. Server Architecture
3. EPiServer Enterprise
4. Mirroring
5. Page Providers
Developing with EPiServer
1. Web Controls
2. Page Types and PageData
3. Properties / Dynamic Properties
4. Code architecture
5. Searching and filtering
Performance and caching
1. Caching
2. Performance
EPiServer Quick Publishing

Report Center

EPiServer’s Report Center comes with 6 predefined reports.

Not Published Pages
Published Pages
Changed Pages
Expired Pages
Simple Addresses
Link Status

For a short guide to using the existing reports see the guide: EPiServer CMS R2: Report Center.

To get started developing your own reports see: Create Your Own Reports in the Report Center and PageName vs UrlSegment Report.

Mobile

Bugs and where to find help

Often the first thing I do when I’m stuck on a problem is to go to EPiServer’s bug list and do a quick search to see if by problem might be reported in as a bug. Next up after that is Google, if I cannot find an answer there I try to post a clear description of my problem on the forum or create a support ticket.

FAQ

Not sure if it’s still in use but EPiServer World’s FAQ still contains some valuable information.

Subscription

EPiServer Subscription is used for sending email updates to users when new content is published.

These articles should at least give you a little information about EPiServer’s subscription functionality. For some sample code see the Public Templates under Pages and SubscriptionPage.aspx.

Import / Export

EPiServer has built in functionality for importing and exporting pages, files, categories, page types, and more. This creates an .episerverdata file that you can open up with a program like WinRar and see its content, which consists of a bunch of xml files.

Custom Export – Handle your “own” stream

Content Channels

Content Channels are used for pushing external data into EPiServer. This is for instance used by the SharePoint connector for pushing data into EPiServer from SharePoint.

For a nice introduction see: Pushing Data into EPiServer CMS 5 via Content Channels, there is also the video: Content Channel and Custom Page Store in EPiServer CMS 5.

URL rewriting / friendly URL

Both for users and search engines it helps to use friendly urls. Since EPiServer’s URL rewriter is provider based, it is easy to replace it with your own implementation.

Below are a couple of resources for changing the built in functionality of EPiServer’s URL rewriter. I recommend using Reflector to learn more about the inner workings of the URL rewriter (in EPiServer.dll and the EPiServer.Web namespace).

TinyMCE / Editor

With the rich text editor we want to add custom styles to the content and add new functionality and plugins, below are a couple of links that should help you with this.

The default editor for EPiServer CMS 6 is TinyMCE, if you upgrade from EPiServer CMS 5 or use EPiServer CMS 5, EPiServer’s built in editor is used. You can change which editor you wish to use in your web.config file, see: XHTML Editor – PropertyXHTMLString and PropertyLongString for more information.

XForms

EPiServer XForm is used for creating user forms. EPiServer uses an editor for letting the editors of the site build the forms. As developers we can easily extend and attach our self to various events that get triggered when the forms is sent (as an email, stored in the database or both).

A trick to note when using the XForm editor is that ctrl + shift + c and ctrl + shift + v copies/pastes the markup generated by the XForm editor, allowing you to easily change it without needing to attach yourself to various events and change the markup there.

For some sample code on rendering the XForm on your site see the Public Templates and XForm.ascx and the XForm page type.

Globalization / localization

EPiServer has some powerful globalization and localization support, built on ASP.NET’s globalization and localization functionality. I recommend starting out with the Globalization tech-note. EPiServer uses xml files to store the language information inside the lang folder. When installing a new EPiServer site there are quite a few default language files that get installed with it, I recommend deleting all the files you do not use.

Also be sure to check out Manage Languages for keeping language files up to date and TranslateX for sending EPiServer CMS pages to/from a translation service.

File system / VPP

EPiServer uses Microsoft’s Virtual Path Provider for their file system. Each file has a version history and supports meta data properties for storing information like author, copyright and other information, see my post: EPiServer File Manager and File Summary for information on how to add more meta data properties.

There has also been developed a module for storing the files in the database instead of on a file share or on the web server.

Security, Membership and roles

EPiServer uses ASP.NET’s membership and role provider model for their membership and roles. By default these providers ship with EPiServer:

OracleMembershipProvider
WindowsMembershipProvider
SqlServerMembershipProvider
ActiveDirectoryMembershipProvider
MultiplexingMembershipProvider

MultiplexingMembershipProvider forwards requests to the Windows- and SqlServerMembershipProvider, allowing for creating and storing users and roles in EPiServer’s database and using the Windows users and roles (this is the mostly used provider).

Events

Oracle

EPiServer supports Oracle databases and even comes with sample configuration settings in their config files.

SEO

Here are a few blog posts and modules with tips on making EPiServer even more SEO friendly.

Workflows

EPiServer uses Windows Workflow Foundation for their Workflows and even ship with 4 workflows:

Sequential Approval
Parallel Approval
Request for feedback
Ready for translation

See Enabling the EPiServer CMS Workflows for information on how to activate them.

Errors, Logging and debugging

Logging

Errors and Error handling

Debugging

Configuration

EPiServer stores a lot of its configuration settings in various .config files. Below are a few resources that’ll help you navigate through most of what you can configure.

Overview of the default config files that come with EPiServer (containing both ASP.NET and EPiServer settings).

web.config – The main configuration file for the application. Contains configuration for the ASP.NET API and some parts of the EPiServer CMS API.
episerver.config – The main configuration file for the EPiServer CMS API. Contains the basic settings for the EPiServer CMS site (or sites – in an enterprise installation).
episerverFramework.config – Contains mapping information describing which host addresses leads to a particular EPiServer CMS site.
connectionStrings.config – Contains a list of database connection strings

There are two further configuration files located in the application’s root folder. These two configuration files are separate and not related to the files listed above or each other.

episerverLog.config – Contains the log4net settings for the application, please see the log4net homepage for full information on configuration options.
fileSummary.config – An XForm defining the meta data properties attached to files that are uploaded to EPiServer CMS.

Getting started guides and tutorials

Checklists

Checklist for deploying EPiServer sites

SDK and API documentation

Guides

EPiServer Framework

EPiServer Framework consists of:

EPiServer OnlineCenter
Dynamic Data Store
Initialization System

For a good introduction see: Introducing EPiServer Framework.

Online Center

Gadgets

Dynamic Data Store

The Dynamic Data Store is a new feature that came with EPiServer CMS 6 and is essentially a place to store data that might not be best stored in a page property. XForms for instance are stored in the Dynamic Data Store.

Page Objects

Page Objects are .Net objects and collections that are associated with an EPiServer CMS page.

Dynamic Data Store

There are two things you need to read to understand most of the Dynamic Data Store. First the tech-note: Dynamic Data Store, and second the examples referred to in the tech-note: Dynamic Data Store Examples.

More resources

Initialization System

Modules

This section contains how to create module packages for the deployment center, open source modules, and other EPiServer modules.

Modules and deployment center

The deployment center allows us to easily install new packages on existing sites. A package is a zip file with the necessary files that the modules needs along with configuration settings that need to be added to the various configuration files.

Open Source Modules

Most of the open source modules out there are hosted on either EPiCode or CodePlex. Here is a list of the various open source modules that I know about.

Templates

Gadgets

Page Providers

Virtual Page Providers

Google Analytics and SEO

Dynamic Content

Images, Image galleries and slideshows

Google Map

Properties

Language, Globalization and Localization

Reports

Generating Excel reports

Debugging and diagnostics

Frameworks

Performance and caching

RSS and feeds

Edit mode enhancements

Blog

CloudCuckoo for EPiServer

Various modules

Enhancements for editors

Rich Text Editor enhancements

EPiServer Composer

EPiServer’s Composer module is used to add extra functionality to EPiServer CMS pages, allowing editors to drag and drop functionality on predefined placeholders.

EPiServer Community

EPiServer Community is a framework for building online communities and consists of modules for user management, video galleries, chat, blogs etc.

The EPiServer Community SDK has a great howto section that covers a lot of the topics you as a developer will come across when working with EPiServer Community.

Joel Abrahamsson has also written a great series on creating new modules for EPiServer Community:

Tech-notes

More resources

EPiServer Commerce

Before trying to install EPiServer Commerce read the release notes and the section “Known Limitations”.

EPiServer Relate+

EPiServer Relate+ consists of a set of templates that builds on EPiServer Community and EPiServer CMS, and gets you started with a sample site.

EPiServer Mail

EPiServer Mail is used for sending emails and newsletters and is used by EPiServer Community and EPiServer Relate+.

EPiServer CMO

EPiServer CMO is used for monitoring and optimizing pages on your website by learning about your users’ behavior and helping your editors easily create A/B tests.

EPiServer Connect for CRM

EPiServer Connect for SharePoint

Extending EPiServer

One of EPiServer’s biggest strengths in my humble opinion is how easy EPiServer is to extend. Take a look at this picture by Deane Barker for a great overview of what is possible.

Plugins

Custom Property

Dynamic Content

Scheduled Jobs

EPiServer Enterprise

Load Balancing

Server Architecture

Server Architecture Options for EPiServer

EPiServer Enterprise

Mirroring

Page Providers

Developing with EPiServer

Web Controls

Page Types and PageData

Properties / Dynamic Properties

Code architecture

Searching and filtering

Performance and caching

EPiServer has some great performance and caching out of the box (usually 90-95% of pages are served from the cache!). Below are some resources for improving it even more. For client side performance I recommend checking out YSlow as well.

Caching

Performance

EPiServer Quick Publishing

Related Posts:

EPiServer Custom Property with Custom Settings

Frederik Vig — Fri, 14 May 2010 20:44:07 +0000

I was brushing up on custom properties and came across Allan Thræn’s post Custom Property: Category Drop Down. The code is simple and works great, but one thing I didn’t like is that you need to give the property the same name as the root category that you use to populate the drop down.

In EPiServer CMS 6 we now have the ability to add settings to the properties. Linus Ekström wrote a great post on how to use the new settings functionality: Settings for properties. After reading both Allan’s and Linus’ post I decided to give the EPiServer administrator the ability to choose which category should be the root category in the settings tab of the property.

Custom Property

using System;
using EPiServer.Core.PropertySettings;
using EPiServer.PlugIn;
 
namespace EPiServer.Templates.Properties
{
    [Serializable]
    [PageDefinitionTypePlugIn]
    [PropertySettings(typeof(CategoryDropDownSettings), true)]
    public class CategoryDropDown : EPiServer.Core.PropertyString
    {
 
        public override EPiServer.Core.IPropertyControl CreatePropertyControl()
        {
            return new CategoryDropDownControl();
        }
    }
}

The code is almost identical to Allan’s except for the PropertySettings attribute.

using System.Web.UI.WebControls;
using EPiServer.DataAbstraction;
 
namespace EPiServer.Templates.Properties
{
    public class CategoryDropDownControl : EPiServer.Web.PropertyControls.PropertyTextBoxControlBase
    {
 
        public override bool SupportsOnPageEdit
        {
            get
            {
                return false;
            }
        }
 
        protected DropDownList ddl;
 
        public override void CreateEditControls()
        {
            ddl = new DropDownList();
            CategoryDropDownSettings settings = (CategoryDropDownSettings)base.PropertyData.GetSetting(typeof(CategoryDropDownSettings));
 
            Category main_c = Category.Find(settings.RootCategory);
            ddl.Items.Add(new ListItem("", ""));
            foreach (Category c in main_c.Categories)
            {
                ListItem li = new ListItem(c.LocalizedDescription, c.Name);
                li.Selected = (((string)CategoryDropDown.Value) == c.Name);
                ddl.Items.Add(li);
            }
 
            this.ApplyControlAttributes(ddl);
            Controls.Add(ddl);
        }
 
        public override void ApplyEditChanges()
        {
            SetValue(ddl.SelectedValue);
        }
 
        public CategoryDropDown CategoryDropDown
        {
            get
            {
                return PropertyData as CategoryDropDown;
            }
        }
    }
}

Only difference to Allan’s code here is in the CreateEditControls method.

...
CategoryDropDownSettings settings = (CategoryDropDownSettings)base.PropertyData.GetSetting(typeof(CategoryDropDownSettings));
 
Category main_c = Category.Find(settings.RootCategory);
...

Custom Settings

using EPiServer.Core.PropertySettings;
 
namespace EPiServer.Templates.Properties
{
    [PropertySettingsUI(AdminControl = typeof(CategoryDropDownSettingsUI))]
    public class CategoryDropDownSettings : PropertySettingsBase
    {
        public int RootCategory { get; set; }
 
        public override IPropertySettings GetDefaultValues()
        {
            return new CategoryDropDownSettings { RootCategory = 0 };
        }
    }
}

I’m setting the default rootCategory to be 0 (root).

using System.Linq;
using System.Web.UI.WebControls;
using EPiServer.Core;
using EPiServer.Core.PropertySettings;
using EPiServer.Web.WebControls;
 
namespace EPiServer.Templates.Properties
{
    public class CategoryDropDownSettingsUI : PropertySettingsControlBase
    {
        private InputCategoryTree _categoryTree;
 
        protected override void CreateChildControls()
        {
 
            base.CreateChildControls();
 
            _categoryTree = new InputCategoryTree {ID = "CategoryTree"};
 
            Label label = new Label { Text = "Root Category", AssociatedControlID = "CategoryTree" };
 
            Controls.Add(label);
 
            Controls.Add(_categoryTree);
 
        }
 
        public override void LoadSettingsUI(IPropertySettings propertySettings)
        {
 
            EnsureChildControls();
 
            _categoryTree.SelectedCategories = new CategoryList(new[] {((CategoryDropDownSettings)propertySettings).RootCategory});
        }
 
        public override void UpdateSettings(IPropertySettings propertySettings)
        {
 
            EnsureChildControls();
 
            // We only want the first selected category
            ((CategoryDropDownSettings)propertySettings).RootCategory = int.Parse(_categoryTree.SelectedCategories.ElementAt(0).ToString());
        }
    }
}

When we add a new property we now have the option, under custom settings, to choose the root category for our drop down.

Which gives our editors these options.

Related Posts:

Creating a contact form with ASP.NET MVC

Frederik Vig — Thu, 13 May 2010 15:37:07 +0000

We’re going to create a contact form in ASP.NET MVC 2.0, that uses Ajax to send the form data and that uses client side validation to improve the user experience for our users.

Start by creating a new ASP.NET MVC 2.0 web application project in Visual Studio.

This will create a new project with the default ASP.NET MVC 2.0 sample code.

Inside the Models folder create a new class, and give it the name: Contact.cs. The class is very simple with just some properties for Name, Email and Comment.

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
 
namespace ContactForm.Models
{
    public class Contact
    {
        [Required(ErrorMessage = "You need to fill in a name")]
        [DisplayName("Name")]
        public string Name { get; set; }
 
        [Required(ErrorMessage = "You need to fill in an email address")]
        [DataType(DataType.EmailAddress, ErrorMessage = "Your email address contains some errors")]
        [DisplayName("Email address")]
        public string Email { get; set; }
 
        [Required(ErrorMessage = "You need to fill in a comment")]
        [DisplayName("Your comment")]
        public string Comment { get; set; }
    }
}

Notice the Required, DisplayName and DataType attributes. This is called DataAnnotations, and is a new feature in ASP.NET MVC 2.0, which helps us add validation logic to our models.

Next step is creating the /home/contact URL and the contact view. Open up HomeController.cs, and add the following method.

public ActionResult Contact()
{
    return View();
}

Place your cursor inside View() and press Ctrl+M, Ctrl+V, or just right-click and choose Add View. Check the “Create a strongly-typed view” and type in: ContactForm.Models.Contact.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Contact
asp:Content>
 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 
    <h2>Contacth2>
 
asp:Content>

We can now create the form markup.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
 
<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
	Contact us
asp:Content>
 
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <% Html.EnableClientValidation(); %> 
    <% using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "Post", OnComplete = "Contact.onComplete"}))
        { %>
        <%: Html.ValidationSummary(true, "A few fields are still empty") %>
        <fieldset>
            <legend>Contact uslegend>
            <div class="editor-label">
                <%: Html.LabelFor(m => m.Name) %>
            div>
            <div class="editor-field"><%: Html.TextBoxFor(m => m.Name) %>
                <%: Html.ValidationMessageFor(m => m.Name) %>
            div>
            <div class="editor-label">
                <%: Html.LabelFor(m => m.Email) %>
            div>
            <div class="editor-field">
                <%: Html.TextBoxFor(m => m.Email) %>
                <%: Html.ValidationMessageFor(m => m.Email) %>
            div>
            <div class="editor-label">
                <%: Html.LabelFor(m => m.Comment) %>
            div>
            <div class="editor-field">
                <%: Html.TextAreaFor(m => m.Comment, 10, 25, null) %>
                <%: Html.ValidationMessageFor(m => m.Comment) %>
            div>
            <p>
                <input type="submit" value="Submit" />
            p>
        fieldset>
        <p id="result"><%: TempData["Message"] %>p>
    <% } %>
asp:Content>

<%: … %> is just a shortcut for HTML encoding the data, a new feature in ASP.NET 4.0. <% Html.EnableClientValidation(); %> enables client side validation for us, and must be included right before the start of the form. Ajax.BeginForm is a helper method that generates the form tag for us and attaches a little JavaScript code for sending the form data with Ajax, if the client supports it, otherwise the form data will be sent like normal.

Lets create the JavaScript method that gets called when the form is finished. Create a new JavaScript file inside the Scripts folder and give it the name: Site.js. Add the Contact object with the property function onComplete.

var Contact = {
    onComplete: function (content) {
        var result = eval(content.get_response().get_object());
 
        var textNode = document.createTextNode(result.message);
 
        document.getElementById("result").appendChild(textNode);
    }
};

I take the JSON result from the server and add the message to the result paragraph.

If you press F5, the site should open up in your default browser. If you add Home/Contact behind the URL, you should be taken to the Contact Us page.

For the client side validation to work we need to reference a few JavaScript files. Open up Site.master (located in the shared folder), and add the following code right before the closing body tag.

...
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="../../Scripts/Site.js" type="text/javascript"></script>
</body>
</html>

You should now receive some friendly error messages when you click the submit button without filling out the form properly.

Next step is adding the action method to HomeController.cs that will handle the form data.

[HttpPost]
public ActionResult Contact(Contact model)
{
        string message = "There are a few errors";
 
	if (ModelState.IsValid)
	{
                message = "Thanks! We'll get back to you soon.";
	}
 
	if (Request.IsAjaxRequest())
	{
		return new JsonResult { ContentEncoding = Encoding.UTF8, Data = new { success = true, message = message } };
	}
 
        TempData["Message"] = message;
 
	return View();
}

Notice that I check if the request is an Ajax request, if it is I return a JSON object with the result, otherwise I return the whole view with the message.

You would also add some other logic here for saving the message in some way.

That’s it!Related Posts:

Backup plan when loading the jQuery library from CDN

Frederik Vig — Tue, 20 Apr 2010 18:30:12 +0000

In most of my project I load the jQuery library from a CDN, either Google or Microsoft. This ensures that my page will load faster for my visitors, since the jQuery file will get sent to them from their nearest location, gzipped and compressed. When the visitor visits another site that use the same jQuery version from the same CDN, they don’t need to wait for their browser to download the library since it’s already in their temporary Internet files.

One of the drawbacks to this approach is when the CDN goes offline or becomes unavailable. Fortunately this has not happened to me – we should however have a backup plan! While reading through Rick Strahl’s presentations on jQuery I came across a great little snippet that will use a local copy of the jQuery library if the CDN is down or in some way unavailable.


<script type="text/javascript">
if (typeof jQuery == 'undefined')
	document.write(unescape("%3Cscript src='/scripts/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
script>

Exactly what we need!Related Posts:

ListControl AppendDataBoundItems and DataBind

Frederik Vig — Mon, 19 Apr 2010 11:23:51 +0000

By default when using code like this, the list item will be cleared when data binding is performed.

<asp:DropDownList runat="server" ID="ddlCategories">
    <asp:ListItem>Please chooseasp:ListItem>
asp:DropDownList>

protected override void OnLoad(EventArgs e)
{
	base.OnLoad(e);
 
	string[] categories = new[] { "C#", "ASP.NET", "EPiServer", "Umbraco", "jQuery" };
 
	ddlCategories.DataSource = categories;
	ddlCategories.DataBind();
}

Will give us.

 <select name="ctl00$MainContent$ddlCategories" id="MainContent_ddlCategories">
	<option value="C#">C#</option>
	<option value="ASP.NET">ASP.NET</option>
	<option value="EPiServer">EPiServer</option>
	<option value="Umbraco">Umbraco</option>
	<option value="jQuery">jQuery</option>
</select>

As you see “Please choose” is not there any more.

However if you set the AppendDataBoundItems property to true (default is false), the list items will be added before data binding is performed.

protected override void OnLoad(EventArgs e)
{
	base.OnLoad(e);
 
	...
	ddlCategories.AppendDataBoundItems = true;
	...
}

The markup is now correct.

<select name="ctl00$MainContent$ddlCategories" id="MainContent_ddlCategories">
	<option value="Please choose">Please choose</option>
	<option value="C#">C#</option>
	<option value="ASP.NET">ASP.NET</option>
	<option value="EPiServer">EPiServer</option>
	<option value="Umbraco">Umbraco</option>
	<option value="jQuery">jQuery</option>
</select>

Related Posts:

Detecting Ajax requests on the server

Frederik Vig — Tue, 06 Apr 2010 19:27:47 +0000

If you use jQuery or ASP.NET AJAX you can easily detect Ajax requests on the server by simply checking for the HTTP_X_REQUESTED_WITH HTTP Header. Both libraries automatically add this to the HTTP Header when they send a request.

Here’s a little code snippet that returns true for Ajax requests.

public static bool IsAjaxRequest()
{
    return HttpContext.Current.Request.Headers["X-Requested-With"] != null && HttpContext.Current.Request.Headers["X-Requested-With"] == "XMLHttpRequest";
}

The cool thing about this is that you can use this in a base page or a HTTP Module, and customize the returned data. You could for instance return JSON or XML.

using System;
using System.Web.UI;
 
namespace MyWebApplication
{
    public class BasePage : Page
    {
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
 
            if (Helper.IsAjaxRequest())
            {
                Response.Headers.Clear();
                Response.ContentType = "application/json";
                Response.Write(json output);
                Response.End();
            }
        }
    }
}

Related Posts:

Creating a simple image gallery with EPiServer

Frederik Vig — Sat, 03 Apr 2010 12:23:45 +0000

If you have visited sites like Smashing Magazine chances are high that you’ve seen articles with titles like “40 most used jQuery plugins”, or something similar to that. I find articles like that to be great for inspiration. You usually have a section for galleries/slideshows/carousels etc, I thought I’d implement one of those plugins in EPiServer, just to show you have simple it is.

jQuery GalleryView

GalleryView is a jQuery plugin for displaying a gallery of images. The plugin is easy to use and setup, simply download the files and include them in your project.

Dynamic Content

We’re going to create a dynamic content plugin that our editors can use to add a gallery to a page. Start by creating a new class and give it the name Gallery.cs. Make sure it implements the IDynamicContent interface.

I’m using the custom property Folder Browser Property from EPiCode to let the editor choose a root folder for the images. I’ve also added a user control for displaying the result to the users of the site.

The complete class looks like this.

using EPiServer.Core;
using EPiServer.DynamicContent;
using Meridium.FolderBrowserProperty.Web.UI.PropertyControls;
 
namespace EPiServer.Templates.Public.Plugins
{
    public class Gallery : IDynamicContent
    {
        protected PropertyFolderBrowser MediaFolder; 
 
        public Gallery()
        {
            MediaFolder = new PropertyFolderBrowser {Name = "Media folder"};
        }
 
        public System.Web.UI.Control GetControl(PageBase hostPage)
        {
            var gallery = hostPage.LoadControl("~/Templates/Public/Units/Gallery.ascx") as Units.Gallery;
 
            if (gallery == null)
            {
                return null;
            }
 
            gallery.Root = this.State;
 
            return gallery;
        }
 
        public PropertyDataCollection Properties
        {
            get
            {
                return new PropertyDataCollection {MediaFolder};
            }
        }
 
        public string Render(PageBase hostPage)
        {
            return string.Empty;
        }
 
        public bool RendersWithControl
        {
            get { return true; }
        }
 
        public string State
        {
            get
            {
                return MediaFolder.ToString();
            }
            set
            {
                MediaFolder.ParseToSelf(value);
            }
        }
    }
}

After you register it in episerver.config (web.config for CMS 5), you’ll be able to choose it in your sites WYSIWYG-editor.

>
    >
      ...
       description="Gallery" name="Gallery" type="EPiServer.Templates.Public.Plugins.Gallery, EPiServer.Templates.Public" />
    >
>

Gallery View Mode

The user control that displays the actual gallery to the users of the site.

<%@ Control Language="C#" AutoEventWireup="false" CodeBehind="Gallery.ascx.cs" Inherits="EPiServer.Templates.Public.Units.Gallery" %>
<link href="/galleryview-2.1.1/galleryview.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">script>
<script src="/galleryview-2.1.1/jquery.easing.1.3.js" type="text/javascript">script>
<script src="/galleryview-2.1.1/jquery.timers-1.2.js" type="text/javascript">script>
<script src="/galleryview-2.1.1/jquery.galleryview-2.1.1.js" type="text/javascript">script>
 
<asp:Repeater runat="server" ID="rptGallery">
    <HeaderTemplate>
        <ul class="gallery">
    HeaderTemplate>
    <ItemTemplate>
    <%# SetImage(Container.DataItem) %>
 
        <li><img src="<%# Image.VirtualPath %>" alt="<%# Image.Summary.Title %>" />
            <div class="panel-overlay">
				<h3><a href="<%= Image.Summary.Dictionary["Website"] %>"><%= Image.Summary.Author %>a>h3>
				<p><%# Image.Summary.Dictionary["Description"] %>
			div>
        li>
    ItemTemplate>
    <FooterTemplate>
        ul>
    FooterTemplate>
asp:Repeater>
 
<script type="text/javascript">
    $('.gallery').galleryView({
        panel_width: 800,
        panel_height: 300,
        frame_width: 100,
        frame_height: 100
    });
script>

using System;
using EPiServer.Web.Hosting;
 
namespace EPiServer.Templates.Public.Units
{
    public partial class Gallery : UserControlBase
    {
        public string Root
        {
            get; set;
        }
 
        protected UnifiedFile Image
        {
            get; private set;
        }
 
        protected string SetImage(object dataItem)
        {
            this.Image = dataItem as UnifiedFile;
 
            return string.Empty;
        }
 
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
 
            if (string.IsNullOrEmpty(this.Root))
            {
                return;
            }
 
            var rootFolder = System.Web.Hosting.HostingEnvironment.VirtualPathProvider.GetDirectory(this.Root) as UnifiedDirectory;
 
            if (rootFolder == null)
            {
                return;
            }
 
            this.rptGallery.DataSource = rootFolder.Files;
            this.rptGallery.DataBind();
        }
    }
}

Result

Note on Folder Browser Property

I’ve added an EPiServer CMS 6 version of Folder Browser Property to EPiCode.

Usage

SVN Checkout https://www.coderesort.com/svn/epicode/Meridium.FolderBrowserProperty/6.x/ (requires registration on EPiCode)
Open up the project in Visual Studio and build
Copy Meridium.FolderBrowserProperty.dll to your sites bin folder (remember to add a reference in your Visual Studio project as well)
Create the folders “\Meridium\FolderBrowserProperty\Dialogs”, and copy the file FolderBrowserDialog.aspx into it

Hope this helps.Related Posts:

Frederik Vig - ASP.NET developer

EPiCode.Extensions and ambiguous reference

Specify a canonical domain name for your site with IIS 7

CSS and JavaScript compression and bundling

EPiServer Developer Resources

Table of Contents

Report Center

Mobile

Bugs and where to find help

FAQ

Subscription

Categories

Import / Export

Content Channels

URL rewriting / friendly URL

TinyMCE / Editor

XForms

Globalization / localization

File system / VPP

Security, Membership and roles

Events

Oracle

SEO

Workflows

Errors, Logging and debugging

Logging

Errors and Error handling

Debugging

Configuration

Getting started guides and tutorials

Checklists

SDK and API documentation

Guides

EPiServer Framework

Online Center

Gadgets

Dynamic Data Store

Page Objects

Dynamic Data Store

More resources

Initialization System

Modules

Modules and deployment center

Open Source Modules

Templates

Gadgets

Page Providers

Virtual Page Providers

Google Analytics and SEO

Dynamic Content

Images, Image galleries and slideshows

Google Map

Properties

Language, Globalization and Localization

Reports

Debugging and diagnostics

Frameworks

Performance and caching

RSS and feeds

Edit mode enhancements

Blog

Various modules

Enhancements for editors

Rich Text Editor enhancements

EPiServer Composer

EPiServer Community

Tech-notes

More resources

EPiServer Commerce

EPiServer Relate+

EPiServer Mail

EPiServer CMO

EPiServer Connect for CRM

EPiServer Connect for SharePoint

Extending EPiServer

Plugins

Custom Property

Dynamic Content

Scheduled Jobs

EPiServer Enterprise