[ASP.NET MVC] Routing with Web Forms

New routing system is the core part of ASP.NET MVC and we developers love the way how it works. But unfortunately, it is not easy to migrate your legacy web form applications to MVC applications. What if you can at least mimic the routing system in you web form applications? Wouldn’t it be wonderful?

 

1. Routing with Web Forms

You can easily use routing with web forms if you are already use ASP.NET 4 for your web form applications. In this article, I only illustrate the case for ASP.NET4. If you are using ASP.NET 3.5, please refer to the following MSDN page: “http://msdn.microsoft.com/en-us/library/cc668202(v=vs.90).aspx

 

2. MapPageRoute Method

Instead of the “MapRoute()” method, you need to use the “MapPageRoute()” method of the “System.Web.Routing.RouteCollection” class.

  • public static Route MapPageRoute(string routeName, string routeUrl, string physicalFile)
  • public static Route MapPageRoute(string routeName, string routeUrl, string physicalFile, bool checkPhysicalUrlAccess)
  • public static Route MapPageRoute(string routeName, string routeUrl, string physicalFile, bool checkPhysicalUrlAccess, RouteValueDictionary defaults, RouteValueDictionary constraints)

The main difference between “MapRoute()” and “MapPageRoute()” is that you need to specify the “physical file” in the “MapPageRoute()”. It makes sense because web forms do not have controllers so you need to specify which aspx file should take care of matched requests.

The “checkPhysicalUrlAccess” parameter (true by default) is used to determines whether ASP.NET should validate that the user has authority to access the physical URL. This parameter sets the “PageRouteHandler.CheckPhysicalUrlAccess” property.

Finally, just like MVC, you can specify default values and constraints.

 

3. Global.asax

When you create a MVC applicaiton, basic routing code is already present in the “Global.asax” file. In a web forms application, you need to do it by yourself.

  • Add “using System.Web.Routing;”
  • Create a static “RegisterRoutes()” method
  • Call the “RegisterRoutes()” method in the “Application_Start()” method
void Application_Start(object sender, EventArgs e)
{
  RegisterRoutes(RouteTable.Routes);
}

static void RegisterRoutes(RouteCollection routes)
{
}

 

4. Add Routes

Let’s add a route by calling the “MapPageRoute()” method in the “RegisterRoutes()”.

static void RegisterRoutes(RouteCollection routes)
{
  routes
    .MapPageRoute("productinfo", "products/info/{productname}", "~/ProductInfo.aspx");
}

 

5. Reading Route Parameters in a Web Form

When you type “…/products/info/tv” in the address box, the control is redirected to the “ProductInfo.aspx” page. In a web form page, you can access the route parameters using the “Page.RouteData” property.

  • public System.Web.Routing.RouteData RouteData { get; }

The “RouteData” class has a “Values” property to get a collection of parameter values.

  • public RouteValueDictionary Values { get; }
<div>
  Product Name: <asp:Label ID="productNameLabel" runat="server" />
</div>

 

protected void Page_Load(object sender, EventArgs e)
{
  string productName = Page.RouteData.Values["productname"] as string;
  productNameLabel.Text = Server.HtmlEncode(productName);
}

Another way to bind the data is to use “$ Expression” or “Expression Builder” syntax.

<div>
  Product Name: <asp:Label ID="productNameLabel" runat="server" Text="<% $RouteValue:productname %>" />
</div>

 

6. Generating Outgoing URLs

You can create a link to the page using the defined routes. The “Page.GetRouteUrl()” method is to create an outgoing URL.

  • GetRouteUrl(string routeName, RouteValueDictionary routeParameters)
<asp:HyperLink ID="toyLink" runat="server">
  Link to the Toy Product.
</asp:HyperLink>

 

toyLink.NavigateUrl = Page.GetRouteUrl("productinfo", new { productname = "toy" });

The corresponding “Expression Builder” syntax is like this:

<asp:HyperLink ID="toyLink" runat="server" NavigateUrl="<% $RouteUrl:productname=toy %>">
  Link to the Toy Product.
</asp:HyperLink>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s