User Friendly URL in ASP.NET WebForms

 24-Aug-2014   nityaprakash     ASP.NET  WebForm    Comments  0

I haven't used user friendly urls (similar to MVC url) in asp.NET WebForms like (http://localhost:57570/Person/Edit/1). This might be a year and half old technology introduced with ASP.NET 4.0. Earlier it was used with NuGet package. We had to install before we start using it. But now it comes install with the framework.

In Visual Studio 2013, when we create new WebForm project with default template it creates folder structure as shown above. It suggest to create folder structure similar to MVC application. It also add App_Start method with BundleConfig, RouteConfig and Startup.Auth files. Startup.Auth.cs is required with we are using third party like Facebook, google or twitter for authentication and login.

Enabling Routing

RouteConfig class is where routing is enables. Below code in the file is just do the magic:

        public static void RegisterRoutes(RouteCollection routes)
            var settings = new FriendlyUrlSettings();
            settings.AutoRedirectMode = RedirectMode.Permanent;

When we run the application, Url will look like below without extension:

Same routing engine working behind the seen which is also working on MVC. Go to any page it will look like this only(without extension).

Generating Friendly Url

There is method FriendlyUrl.Href(string virtualPath, Params[] params) is which need to generate the url. For example below:

Microsoft.AspNet.FriendlyUrls.FriendlyUrl.Href("~/Person/Edit", 1);

In this example above Virtual path is consists of folder and Page where Person is the Folder at root level and Edit is the Edit.aspx page inside Person folder and second parameter is the Person ID which we want to modify.

When I try to access this url http://localhost:9894/Person/ it automatically search for Default.aspx and display the list of Person.

Below code generates above response:

    <asp:GridView ID="grdPerson" runat="server" AutoGenerateColumns="false" SelectMethod="GetPersion" ItemType="UserFriendlyUrlDemo.Models.Person">
            <asp:BoundField DataField="FirstName" HeaderText ="First Name" />
            <asp:BoundField DataField="LastName" HeaderText ="Last Name" />
            <asp:TemplateField HeaderText="Edit">
                    <a href="/Person/Edit/<%#:Item.PersonID %>">Edit</a>


In Visual Studio 2012 and later we can replace Eval with Item.Property strong type property. To access property through intellisense we have specify Type in ItemType. It help to bind right property and reduce the chance of error.

Binding Model With Controls

Here is a difference model binding from MVC. We can only bind model to control directly instead of page, so you need DataBinding control to use this feature. In this example, I have returning model in Page.aspx.cs, while we can create it into separate libraray (DLL) so it can also be used with MVC. That is useful when Solution has multiple project and combination of Webforma and MVC project.

        public UserFriendlyUrlDemo.Models.Person GetPerson([FriendlyUrlSegments(0)]int id)

            return UserFriendlyUrlDemo.Models.Person.AllPersons.Where(p => p.PersonID == id).FirstOrDefault();

In above code FriendlyUrlSegments(n) tells method that which is the parameter of User Friendly Url. You can have multiple parameters in your URL which can be access via 0 base index. I am using FormView to display Person detail and using SelectMethod property to specify the method to get data to bind with this control.

Hope this might help who willing to implement user friendly url in WebForms.

Nitya Prakash Sharma has over 10 years of experience in .NET technology. He is currently working as Senior Consultant in industry. He is always keen to learn new things in Technology and eager to apply wherever is possible. He is also has interest in Photography, sketching and painting.

My Blog
Post Comment