How To Get The Friendly Url From Url Property in EPiServer 9

In Episerver, we have a number of different ways of allowing content editors to add and set links on a website.  In today’s guide, I’m going to cover how to add an Episerver.Url property to a page-type or block, and then how to render that Url on your website so it uses the friendly Url and not the ugly internal Episerver identifier.

Add a Url property to a page

First, to add Episerver.Url to a page is extremely simple:

[BackingType(typeof(PropertyUrl))]
public virtual Url Link { get; set; 

You set the type of property to Url and set the BackingType attribute, to PropertyUrl

Displaying the UFriendly Url

Not assuming the Url the content editor add is an internal Episerver link to another page and not an external link, if you try to render the property out of the box, your link will look something like this:

episerver_unfriendly_url

Obviously, SEO wise and usability wise this is a bit of a fail, especially from a business perspective.  Instead, we want to display the friendly Url.  One way to do this is to use the Url.ContentUrl extension from your Razor view, like so:

@Url.ContentUrl(CurrentPage.Link)

My personal issue with this approach is that it breaks a fundamental aim of MVC.  MVC’s main purpose is to separate your business logic from your presentation.  For me, having a helper in your view that takes in the internal Url and converts it to a friendly Url, reeks of adding business logic in the presentation layer.

Instead, a better approach is to keep your concerns separated and to create a friendly Url property into your page types/blocks view model.  As an added bonus with this approach, you can then create a unit test for the property to make sure that the conversion occurs as well.  With that in mind, we need to use the MVC Url helper:

var urlHelper = ServiceLocator.Current.GetInstance<UrlHelper>();
var friendlyUrl = urlHelper.ContentUrl(currentPage.Link);

ContentUrl is a custom extension provided by Episerver that can take a ContentReference, or, an EPiServer.Url and will give you back the friendly Url.

If you are reading this and you want to create a friendly Url but instead of the Episerver.Url property you have a ContentReference, then you can use exactly the same bit of code as ContentUrl has two overloads, one that takes a Url and one that takes a ContentReference.

Conclusion

In today’s guide, we’ve covered how to render a friendly Url from the Episerver Url property from a view.  Even though information around this area is quite limited, the actual code is pretty easy.  I advise that you do the conversion from internal to friendly URL in your view models rather than your view.

To do it, you need to use the UrlHelper’s ContentUrl() method.  This method can take a Url or a content reference depending on your situation.  If you have to, or, just disagree with me and want to create your links within your view, then I recommend reading this guide, Generating a friendly URL within your EPiServer MVC View

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *