Facebook uses URL routing

Url routing

  • 8 minutes to read

by Erik Reitan

Download a Wingtip Toys C # sample project () or download an e-book (PDF)

This series of tutorials teaches you the basics of developing an ASP.NET Web Forms application using ASP.NET 4.5 and Microsoft Visual Studio Express 2013 for the web. A Visual Studio 2013 project with C # source code is available for this tutorial series.

In this tutorial, you'll modify the Wingtip Toys sample application to support URL routing. Routing enables your web application to use URLs that are user-friendly, easier to remember, and better supported by search engines. This tutorial builds on the previous Membership and Administration tutorial and is part of the Wingtip Toys tutorial series.

You will learn:

  • How to Register Routes for an ASP.NET Web Forms Application
  • How to add routes to a web page.
  • Selecting data from a database to support routes.

ASP.NET routing overview

URL routing enables you to configure an application to accept request URLs that are not associated with physical files. A request URL is simply the URL that a user types into their browser to find a page on your website. You use routing to define URLs that are semantically meaningful to users and that can help with search engine optimization (SEO).

By default, the Web Forms template contains ASP.NET friendly URLs. Much of the basic routing is done using the friendly urlsimplemented. In this tutorial, however, you will add custom routing functions.

Before customizing the URL routing, the Wingtip Toys sample application can link to a product using the following URL:

By customizing the URL routing, the Wingtip Toys sample application links to the same product using a simpler URL:

Routes

A route is a URL pattern that is associated with a handler. The handler can be a physical file, e.g. b. an ASPX file in a Web Forms application. A handler can also be a class that processes the request. To define a route, you create an instance of the Route class by specifying the URL pattern, handler, and optionally a name for the route.

Add the route to the application by adding the object to the static property of the class. The Routes property is an object that stores all routes for the application.

Url pattern

A URL pattern can contain literal values ​​and variable placeholders (called URL parameters). The literals and placeholders are in segments of the URL separated by a forward slash ().

When a request is made to the web application, the URL is parsed into segments and placeholders, and the variable values ​​are provided to the request handler. This process is similar to parsing the data in a query string and passing it to the request handler. In both cases, variable information is contained in the URL and transmitted to the handler in the form of key-value pairs. For query strings, both the keys and the values ​​are in the URL. For routes, the keys are the placeholder names defined in the URL pattern, and only the values ​​are in the URL.

In a URL pattern, you define wildcards by enclosing them in curly braces (and). You can define more than one placeholder in a segment, but the placeholders must be separated by a literal value. For example, this is a valid route pattern. however, it is not a valid pattern because there is no literal value or separator between the placeholders. Therefore, routing cannot determine where the value for the language placeholder should be separated from the value for the country placeholder.

Mapping and registering routes

Before you can include routes to pages in the Wingtip Toys sample application, you must register the routes when you start the application. To register the routes, change the event handler.

  1. Look in Solution Explorerfrom Visual Studio the file Global.asax.cs and open it.

  2. Add the code highlighted in yellow as follows to the Global.asax.cs -Add file:

When the Wingtip Toys sample application starts, the event handler is called. At the end of this event handler, the method is called. The method adds each route by calling the object's method. Routes are defined using a route name, a route URL, and a physical URL.

The first parameter ("") is the route name. It is used to call up the route when it is needed. The second parameter ("") defines the friendly replacement URL, which can be dynamic based on the code. This route is used when you populate a data control with links that are generated based on data. A route is shown as follows:

The second parameter of the route contains a dynamic value indicated by curly braces (). In this case it is a variable with which the correct routing path is determined.

grade

Optional

You may find it easier to manage your code by moving the method to a separate class. In the folder " Logic "a separate class. Move the above method out of the Global.asax.cs File in the new class. Using the class and method as an example of how to get the method from the Global.asax.cs File.

You may also have noticed the method invocation using the object at the beginning of the event handler. This is called to implement the standard routing. It was included as standard code when you built the application using the Visual Studio Web Forms template.

Get and use route data

As already mentioned, routes can be defined. The code that you add to the event handler in the Global.asax.cs -File, loads the definable routes.

Establishing routes

You need to add additional code for routes. In this tutorial, you will use model binding to get an object that will be used when creating the routes using data from a data control. The object contains a list of product names that belong to a specific product category. A link will be created for each product based on the data and route.

Activate routes for categories and products

Next, update the application so that it uses the one used to determine the correct route for each Product Category link. Also refresh the page " productList. aspx "so that there is a routing link for each product. The links appear as they were before the change, but the links now use URL routing.

  1. Open in Solution Explorerthe page Site. master if it isn't already open.

  2. Update that ListView -Control named "" with the changes highlighted in yellow so the markup looks like this:

  3. Open in Solution Explorerthe page productList. aspx .

  4. Update the element of the productList. aspx -Page with the updates highlighted in yellow so the markup looks like this:

  5. Open the code behind productList.aspx.cs , and add the following namespace as highlighted in yellow:

  6. Replace the code-behind method (productList.aspx.cs) with the following code:

Adding code for product details

Now update the code behind (ProductDetails.aspx.cs) for the page ProductDetails. aspx to use route data. Note that the new method also accepts a query string value in case the user has a bookmark that uses the older non-friendly, non-forwarded URL.

  1. Replace the code-behind method (ProductDetails.aspx.cs) with the following code:

Run the application

You can now run the application to view the updated routes.

  1. Press F5 to run the Wingtip Toys sample application.
    The browser opens and shows the page default. aspx at.
  2. Click the link at the top of the page Products .
    All products are listed on the " productList. aspx The following URL (using your port number) is displayed to the browser:
  3. Then click in the top Area of ​​the page on the category category.
    Only vehicles are on the page " productList. aspx The following URL (using your port number) is displayed to the browser:
  4. Click the link with the name of the first vehicle that appears on the page ("convertible") is listed to view the product details.
    The following URL (using its port number) is displayed to the browser:
  5. Next, enter the following undirected URL (using your port number) into the browser:

    The code still recognizes a URL that contains a query string when a user has a bookmarked link.

Summary

In this tutorial, you added routes for categories and products. You learned how routes can be incorporated into data controls that use model binding. In the next tutorial, you will implement global error handling.

Additional resources

ASP.net friendly urls
Deploy a secure ASP.NET Web Forms app with membership, OAuth, and SQL database to Azure App Service
Free trial version of Microsoft Azure