Create standards compliant links with EPiServer property

If you are using a strict doctype when developing an EPiServer site which you always should do, then you probably are aware of the validation errors caused by the target attribute on the anchor tag that appears when you are using an EPiServer property if the target is set on the specific page.

As the strict x/html doctype does allow us to use the target attribute on anchors we first have to decide how to deal with it. There is a few solutions but I will show you the one I like the most.

This is how I want my links to render and if the visitor has javascript enabled the result will be the same as if the target attribute had been there.

<a href="http://www.kloojed.com" onclick="window.open('http://www.kloojed.com'); return false;" title="This link will take you to the kloojed blog in a new window">Kloojed</a>

An experienced EPiServer developer will tell you to create your anchor tag manually instead of using the property and that will work just fine but it´s not the best way to do it.

In EPiServer CMS 5 a property consists of two classes, one for holding the data and one for rendering that inherits from one of the classes in the EPiServer.Web.PropertyControls namespace and this is where we can do our changes.

So, let´s make this happen! Create a new class in your project and copy the following code:

1. public class PropertyPageReferenceCtrl : PropertyPageReferenceControl {
2. public override void CreateDefaultControls() {
3. if (PageReference.IsValue(PageLink)) {
4. HyperLink target = new HyperLink();
5. target.Text = "Link";
6. target.NavigateUrl = "#";
7. IPageSource parent = Parent as IPageSource;
8. if (parent != null) {
9. PageData page = parent.GetPage(PageLink);
10. target.Text = HttpUtility.HtmlEncode((string)page["PageName"]);
11. target.NavigateUrl = page.LinkURL;
12. if (page["PageTargetFrame"] != null) {
13. string targetName = ((PropertyFrame)page.Property["PageTargetFrame"]).FrameName;
14. if (targetName == "_blank") {
15. UrlBuilder url = new UrlBuilder(page.LinkURL);
16. Global.UrlRewriteProvider.ConvertToExternal(url, null, System.Text.Encoding.Default);
17. target.Attributes.Add("onclick", "window.open('" + url.Uri + "'); return false;");
18. }
19. }
20. if (target.NavigateUrl == "#") {
21. target.Attributes.Add("onclick", "return false;");
22. target.Style.Add("cursor", "default");
23. }
24. }
25. CopyWebAttributes(target);
26. Controls.Add(target);
27. }
28. }

We inherit from PropertyPageReferenceControl and change the rendering in the CreateDefaultControls method. In this case the code looks exactly like the original property but with the modifications we wanted if the PageTargetFrame is set to _blank.

Now we need to register our class to handle the rendering for all PropertyPageReference properties on our site. This can be done in your global.asax.cs file in the Application_Start method like this:

1. protected void Application_Start(Object sender, EventArgs e) {
2. PropertyControlClassFactory.Instance.RegisterClass( typeof( PropertyPageReference ), typeof( PropertyPageReferenceCtrl ));
3. }

There you have it! Your done and ready to create x/html valid links with the EPiServer property.

• Posted August 28, 2008