Using Friendly URLs in ASP.NET Web Forms

Introduction

Websites often need to generate SEO friendly URLs. In ASP.NET Web Forms applications, a URL is tied to a physical .aspx file. This default mapping between a URL and physical file makes it difficult for Web Forms applications to generate SEO friendly URLs. One option available to ASP.NET developers is to use URL routing features. Alternatively they can also use Friendly Urls - a feature that allows you to quickly and easily use SEO friendly URLs in Web Forms applications. This article discusses how.

Overview of Friendly URLs

Suppose that you are developing a blog engine that has a web form, say WebForm1.aspx, for displaying a blog post. Traditionally developers passed blog post ID in the querystring of WebForm1.aspx so that different blog posts corresponding to the post ID passed can be displayed. In this arrangement the URLs for different blog posts will look like this:

http://somewebsite/WebForm1.aspx?postid=1
http://somewebsite/WebForm1.aspx?postid=2
http://somewebsite/WebForm1.aspx?postid=3

Such URLs are obviously not SEO friendly URLs. Wouldn't it be nice if you could generate friendly URLs in the following format?

http://www.somewebsite/WebForm1/2013/03/10/1234

As you can see from the above URL, the WebForm1 is used without any file extension. Additionally, blog post information such as year, month and day of publication is appended to the main URL along with the post ID. This way each blog post gets a unique URL without using any querystring parameters. Such URLs can be easily generated using ASP.NET FriendlyUrls. Moreover, it takes just a few lines of code to generate these URLs.

Installing Friendly Url via NuGet

In order to use ASP.NET FriendlyUrls you need to install the required assemblies using a NuGet package. So, open Visual Studio 2012 and create a blank ASP.NET Web Forms application. Then click on the Project > Manage NuGet Packages menu option. In the resulting dialog search for FriendlyUrls. You should see the Microsoft ASP.NET Friendly URLs entry listed as shown in the following figure.

Microsoft ASP.NET Friendly URLs

Microsoft ASP.NET Friendly URLs

Once you install the necessary NuGet package you will find that a reference is added to the Microsoft.AspNet.FriendlyUrls assembly. Now you are ready to use FriendlyUrls in your application. 

Enabling Friendly Urls

Next, open Global.asax file in Visual Studio and write the following code in its Application_Start event handler.

 protected void Application_Start(object sender, EventArgs e)
{
   RouteTable.Routes.EnableFriendlyUrls();
}

The above code calls the EnableFriendlyUrls() method on the Routes collection. Calling the EnableFriendlyUrls() method enables FriendlyUrls for your application and you can use all the Web Form URLs without the .aspx extension. For example, instead of accessing a web form as /samplewebsite/WebForm1.aspx you can simply say /samplewebsite/WebForm1

Remember that EnableFriendlyUrls() is an extension method and you must import the following namespaces at the top of Global.asax.

using System.Web.Routing;
using Microsoft.AspNet.FriendlyUrls; 

Getting Information about FriendlyUrls

Inside the Web Form you may want to know the path information about a FriendlyUrl. You can easily obtain that information as shown below:

 string path = Request.GetFriendlyUrlFileVirtualPath();
string ext = Request.GetFriendlyUrlFileExtension();
string friendlyurl = FriendlyUrl.Resolve("~/WebForm2.aspx");
string link = FriendlyUrl.Href("~/WebForm1", 2013, 03, 10, 1234);

As you can see from the above code, several extension methods get added to the Request object. The GetFriendlyUrlFileVirtualPath() method returns the virtual path corresponding to the FriendlyUrl being accessed. For example, for a friendly URL http://somewebsite/WebForm1 it will return ~/WebForm1.aspx

The GetFriendlyUrlFileExtension() method returns the physical file extension of a FriendlyUrl. For web form files, it will be .aspx.

You can also generate FriendlyUrls via code using the Resolve() method of the FriendlyUrl class. The Resolve() method accepts a virtual path and resolves that path to the corresponding FriendlyUrl.

The Href() method of the FriendlyUrl class can be used to generate hyperlink URLs. It accepts the virtual path of the FriendlyUrl followed by URL segments (more on that later). For example, if you wish to generate a hyperlink that points to /somewebsite/WebForm1/2013/03/10/1234 then the first parameter will be ~/WebForm1 and URL segments will be 2013, 03,10 and 1234.

Accessing URL Segments in Code

FriendlyUrls features are not limited to generating extensionless URLs. You can also pass data to the underlying Web Form through URL segments. In the blog engine example we discussed earlier, the year, month and day of publication is passed to the Web Form along with the post ID. These pieces of information are passed as URL segments as shown below:

http://www.somewebsite/WebForm1/2013/03/10/1234

The URL segments that you pass along with a FriendlyUrl can be retrieved inside the Web Form code-behind file as shown below:

IList<string> segments = Request.GetFriendlyUrlSegments();
            
BlogPost post = new BlogPost();
post.Year = int.Parse(segments[0]);
post.Month = int.Parse(segments[1]);
post.Day = int.Parse(segments[2]);
post.PostId = int.Parse(segments[3]);

As you can see, the code-behind uses the GetFriendlyUrlSegments() extension method on the Request object. The GetFriendlyUrlSegments() returns an IList of string. Once retrieved you can access and parse the individual segment and assign to a class named BlogPost. The BlogPost class is a simple class with four public properties, viz. Year, Month, Day and PostId.

public class BlogPost
{
  public int Year { get; set; }
  public int Month { get; set; }
  public int Day { get; set; }
  public int PostId { get; set; }
}

FriendlyUrls and ValueProviders

It is also easy to use FriendlyUrls with data bound controls such as GridView and FormView. Consider, for example, that the Web Form that displays a blog post houses a FormView control to do so. The FormView control can use SelectMethod and ItemType properties to specify a method returning the data to be bound and type of the data being returned respectively.

<asp:FormView ID="FormView1" runat="server" ItemType="FriendlyUrlsDemo.BlogPost" SelectMethod="GetBlogPost">
  <ItemTemplate>
     ...
  </ItemTemplate>
</asp:FormView>

As you can, see the ItemType property points to the BlogPost class you created earlier and the SelectMethod property points to a public method named GetBlogPost(). The GetBlogPost() method is shown below:

public BlogPost GetBlogPost([FriendlyUrlSegments(0)]int year, 
                            [FriendlyUrlSegments(1)]int month, 
                            [FriendlyUrlSegments(2)]int day, 
                            [FriendlyUrlSegments(3)]int postid)
{
   //you may add some custom processing here
   BlogPost post = new BlogPost();
   post.Year = year;
   post.Month = month;
   post.Day = day;
   post.PostId = postid;

   return post;
}

As you can see the GetBlogPost() method has four parameters, viz. year, month, day and postid. These parameter values will be passed through the URL segments as discussed earlier. You need to map the URL segments with the appropriate method parameters. You can do this using the [FriendlyUrlSegments] attribute. The [FriendlyUrlSegments] attribute is a value provider and is applied to various parameters of the GetBlogPost() method. It takes an index of the URL segment you wish to bind with a method parameter. In the above example, if you have URL like this:

http://www.somewebsite/WebForm1/2013/03/10/1234

Then year, month, day and postid parameters will be 2013, 03,10 and 1234 respectively. Although the above example simply constructs a BlogPost object based on the URL segment values you can add any custom processing here.

Summary

FriendlyUrls allow you to generate SEO friendly URLs quickly and easily. In order to use FriendlyUrls you need to add Microsoft ASP.NET FriendlyUrls NuGet package to your project. Once added you can enable extensionless URLs for your Web Forms by enabling the FriendlyUrls feature in the Global.asax. You can also access URL segments and even bind them to method parameters.



Related Articles

Comments

  • How to turn off mobile site master page?

    Posted by Chris on 12/20/2013 07:48pm

    Is there a way to turn OFF the friendlyURL Site.Mobile.Master? I already have a responsive design, and I DO NOT want separate mobile master file, but for the life of me cannot figure out how to turn this feature OFF?!??

    Reply
  • User friendly url

    Posted by meena damwani on 06/22/2013 03:39am

    this article is very useful for beginners.

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: May 7, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT This eSeminar will explore three popular games engines and how they empower developers to create exciting, graphically rich, and high-performance games for Android® on Intel® Architecture. Join us for a deep dive as experts describe the features, tools, and common challenges using Marmalade, App Game Kit, and Havok game engines, as well as a discussion of the pros and cons of each engine and how they fit into your development …

  • The relentless growth of digital data, combined with the need to preserve much of that data for years, has created a dilemma for enterprises hoping to manage their limited IT budgets. While a multi-tier approach to storage can help significantly, the costs of current storage solutions, especially those that are disk-based, are misaligned with tiering needs. Read this white paper to learn about a new approach to data storage - hardware and software coming together through open standards to fundamentally change …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds