Introduction To FriendlyUrls in ASP.Net

Introduction

Today we'll learn the use of FriendlyUrls in the ASP.NET Web Application. Now you can make your URL pretty with the use of a FriendlyUrl. If you want your URL to not contain the extension (.aspx), this article is useful for you. You simply change it with the use of Routes.MapPageRoute(). Howerver, managing Routing Tables is a little tedious and most WebForms folks are not accustomed to the concept and don't want to invest the time.

In that context, the new ASP.NET feature, FriendlyUrls, makes URLs prettier. You can simply have it from the NuGet Packages or the Package Manager Console. One more good news is that, this feature is included in both ASP.NET 4.5 and ASP.NET 4 framework.

So, now let's get started with the following procedure.

Example of FriendlyUrls

In this section, we'll create the application and use the FriendlyUrls in the application to make the URL prettier. Just follow the procedure below.

Step 1: Open Visual Studio and click on "New Project".

Step 2: Select the ASP.NET Web Application and enter the app name as FriendlyUrlWebApp as in the following:

Create ASP.NET Web Application

Step 3: Select the WebForms Project Template to create the application.

WebForms Project Template

Visual Studio creates the WebForms application and generates the files and folders that are associated with the project template.

Step 4: Now just right-click on the project and open the Manage NuGet Packages.

Manage NuGet Pacakages

Step 5: Search for the friendlyurls and ensure that the "Include Prerelease" is selected.

FriendlyUrl NuGet Package

Step 6: In the Global.asax file, modify your Application_Start() with the following highlighted code:

void Application_Start(object sender, EventArgs e)

{

    // Code that runs on application startup

    RouteConfig.RegisterRoutes(RouteTable.Routes);

    BundleConfig.RegisterBundles(BundleTable.Bundles);

}

Step 7: Now run the application and see when I open the existing page by entering an URL like: About.aspx, the GET request for the /About.aspx turned into a 301 redirect to the /About.

Url Writing

Creating Sample WebForm

In this section we'll create the sample WebForm named Hello. Add a new WebForm and add the following code to it:

<form id="form1" runat="server">

<div>

    Hi this is FriedlyUrl Demo Web Application.

</div>

</form>

We can simply import the namespace of FriendlyUrls by adding the following code:

<%@ Import Namespace="Microsoft.AspNet.FriendlyUrls"%>

Application Mobile View

In the project, when you add the NuGet Package, you will also get the Site.Mobile.Master. If we open the project in the iPhone simulator, the default page will open.

Default Page in IPhone Simulator

We can open the webform in the iPhone simulator.

WebForm in iPhone simulator

If we click on the Desktop View in the last, the following screenshot will open:

Application Desktop View in Mobile

If we create the content page of Site.Mobile.Master and add some content then it'll open in the simulator as shown in the following screenshot:

Opening Mobile Page in iPhone Simulator

Summary

This article described the use of FriendlyUrls in ASP.NET Web Applications. We can also create the WebForms and mobile WebForms and open it in the simulators. Thanks for reading.

Up Next
    Ebook Download
    View all
    Learn
    View all