Objective

URL Routing is new feature in ASP.Net 4.0. This article will give a walkthrough on how to work with URL Routing and an introduction of that.

URL Routing

ASP.Net 4.0 URL Routing enables mapping between search engines optimized URL to physical web Form pages.

For example

http://localhost:36774/Products/All URL will be mapped to http://localhost:36774/AllProduct.aspx

Here the first URL is more search engine optimized. Using the routing engine ASP.Net 4.0 perform URL mapping.

Follow the below steps to see how to work with URL routing

Step 1

• Open Visual studio
• Create new project
• Select ASP.Net Web Application from Web tab
• Give any name of the project. I am giving RoutingDemo for purpose of this article.

Step 2

• Right click on the project
• Add a new folder
  
  
  
• Give any name of your choice to the folder. I am giving name Model for purpose of this article
  
  

So after creating a new folder, you can see Model folder in solution explorer.

Step 3

• Right click on Model folder and select Add new item
  
  
  
• From Data tab select Linq to SQL classes . Give any name of your choice. I am giving name here NorthWindProduct for purpose of this article
  
  
  
• Click on Server Explorer
  
  
  
• From the Server Explorer , right click on Data Connections and select add connection
  
  
  
• Below pop window will come.
  
  

Give data base server name at first. Select the authentication mode, you use to connect to your database and then select NorthWind data base. After giving these three fields click OK.

• From Server explorer, expand the NorthWind database connection. From table tab select Product and drag it in design surface
  
  
  
• After dragging on the design surface NorthWindProduct.dbml file as below
  
  
  
• In solution explorer you can see inside Model folder three files. There is a NorthWindProductDataContext class inside RoutingDemo.Model name space , we will be using as data context
  
  

Step 4

We want to navigate to two different pages.

• Select all Products(AllProduct.aspx) : This page will display all the Products
• Select a particular product on basis of Product name. (ParticularProduct.aspx): This page will display product detail of given product name.

Step 4a

• Right click on site.master in solution explorer. And add a content page
  
  
  
• Now in solution explorer , you can notice you have WebForm.aspx
  
  
  
• Right click on WebForm.aspx and rename this to AllProduct.aspx
  
  
  
• After renaming the name, you will have AllProduct.aspx in solution explorer.
  
  
  

Step 4B

Follow the steps exactly the same as step 4A and add one more web form. Give name of this form as ParticularProduct.aspxinstead of AllProduct.aspx. So now in solution explorer you can see two web forms has been added.

Step 4C

• Open AllProduct.aspx
• Drag GridView from Data tab of tool box and put it on AllProduct.aspx
  
  

So, in design AllProduct.aspx will look as below,

AllProduct.aspx will look like below,

<%@PageTitle=""Language="C#"MasterPageFile="~/Site.Master"AutoEventWireup="true"CodeBehind="AllProduct.aspx.cs"Inherits="RoutingDemo.WebForm1"%>
<asp:ContentID="Content1"ContentPlaceHolderID="HeadContent"runat="server">
</asp:Content>
<asp:ContentID="Content2"ContentPlaceHolderID="MainContent"runat="server">
<asp:GridViewID="GridView1"runat="server">
</asp:GridView>
</asp:Content>

Now we need to write code to fetch data from LINQ to SQL class

AllProduct.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using RoutingDemo.Model;

namespace RoutingDemo
{
	publicpartialclassWebForm1 : System.Web.UI.Page
	{
		protectedvoid Page_Load(object sender, EventArgs e)
		{
			GridView1.DataSource = Products;
			GridView1.DataBind();
		}

		privateList _Product= null ;
		protectedList Products
		{
			get
			{
				if (_Product == null)
				{
					NorthWindProduct_DataContext context = newNorthWindProduct_DataContext();
					return context.Products.ToList(); 
				}
				return _Product; 
			}
		}
	}
}

Explanation of Code

1. Put the namespace
   

   using RoutingDemo.Model;

2. Crated a protected property. In getter, I am checking for data member. If it is null, then I am creating instance of NorthWindProduct and fetching all the products.
   

   privateList _Product= null ;
   protectedList Products
   {
   	get
   	{
   		if (_Product == null)
   		{
   			NorthWindProduct_DataContext context = newNorthWindProduct_DataContext();
   			return context.Products.ToList(); 
   		}
   		return _Product; 
   	}
   }

3. On page load putting the property as data source of grid view.
   

   protectedvoid Page_Load(object sender, EventArgs e)
   {
   	GridView1.DataSource = Products;
   	GridView1.DataBind();
   }

Step 4D

1. Open ParticularProduct.aspx
2. Drag GridView from Data tab of tool box and put it on ParticularProduct.aspx

So, in design ParticularProduct.aspx will look as below,

ParticularProduct.aspx will look like below,

<%@PageTitle=""Language="C#"MasterPageFile="~/Site.Master"AutoEventWireup="true"CodeBehind="ParticularProduct.aspx.cs"Inherits="RoutingDemo.WebForm2"%>
<asp:ContentID="Content1"ContentPlaceHolderID="HeadContent"runat="server">
</asp:Content>
<asp:ContentID="Content2"ContentPlaceHolderID="MainContent"runat="server">
<asp:GridViewID="GridView1"runat="server">
</asp:GridView>
</asp:Content>

Now we need to write code to fetch data from LINQ to SQL class.

ParticularProduct.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using RoutingDemo.Model; 

namespace RoutingDemo
{
    publicpartialclassWebForm2 : System.Web.UI.Page
    {
	protectedvoid Page_Load(object sender, EventArgs e)
        {

            GridView1.DataSource = new Model.Product[]{ Products };
            GridView1.DataBind();

        }

	privateProduct _Product = null;
	protectedProduct Products
        {
            get
            {
		if (_Product == null)
                {
		    string prdName = Page.RouteData.Values["Name"] as string; 
		    NorthWindProduct_DataContext context = newNorthWindProduct_DataContext();
		    return context.Products.Where(prd => prd.ProductName.Equals(prdName)).SingleOrDefault();
                }
		return _Product;
            }
        } 
    }
}

Explanation of Code

1. Put the namespace
   

   using RoutingDemo.Model;
   

2. Created a protected property. In getter, I am checking for data member. If it is null, then I am creating instance of NorthWindProduct and fetching product with the given name
   

   privateProduct _Product = null;
   protectedProduct Products
   {
   	get
   	{
   		if (_Product == null)
   		{
   			string prdName = Page.RouteData.Values["Name"] asstring; 
   			NorthWindProduct_DataContext context = newNorthWindProduct_DataContext();
   			return context.Products.Where(prd => prd.ProductName.Equals(prdName)).SingleOrDefault();
   		}
   		return _Product;
   	}
   } 
   

   
   

   If you see the above code, I am using

   string prdName = Page.RouteData.Values["Name"] as string;
   

   Here Name is the parameter name in the Route URL.

Step 5

Now open Global.asax

When you click on Global.ascx.cs . You will get below default code

public class Global : System.Web.HttpApplication
{
    void App1ication_Start(obect sender, EventArgs e)
    {
        // Code that runs on application startup        
    }

    void Application_End(obect sender, EventArgs e)
    {
        // Code that runs on application shutdown
    }

    void Application_Error(obect sender, EventArgs e)
    {
        // Code that runs when an unhandled error occurs
    }

    void Sessaon_Start(obect sender, EventArgs e)
    {
        // Code that runs when a new session is started
    }

    void Session_End(obect sender, EventArgs e)
    {
        // Code that runs when a session ends
	// Note: the Session_End event is raised only when the sessionstate node
	// is set to InProc in the Web.con±ig file. If session mode is set to StateServer
	// or SQLServer, the event is not raised
    }
}

Now we need to add

1. Name space
   
   

   using System.Web.Routing;
   

   
   
2. Method
   
   

   void RegisterRotes(RouteCo11ection routes)
   {
       routes.MapPageRoute (“All Product”, “Products/All”, “~/AllProduct.aspx");
       routes.MapPageRoute (“Selected Product”, “Products/Selected/{name}”, “~/Particu1arProduct.aspx”);
   }
   
   

   In first mapPageRoute
   All Product -> name of the rule in Global.ascx
   Products/All ->Routing URL
   ~/AllProduct.aspx -> Name of the physical aspx file.
   
   In second mapPageRoute
   
   Selected Product -> name of the rule in Global.ascx
   Products/Selected/ {name} -> Routing URL where name is the parameter
   ~/ParticularProduct.aspx -> name of the physical file
3. Call the above created method in application start.

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

Global.ascx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;
using System.Web.Routing;

namespace RoutingDemo
{
    publicclassGlobal : System.Web.HttpApplication
    {

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

        void Application_End(object sender, EventArgs e)
        {
            //  Code that runs on application shutdown
        }

        void Application_Error(object sender, EventArgs e)
        {
            // Code that runs when an unhandled error occurs
        }

        void Session_Start(object sender, EventArgs e)
        {
            // Code that runs when a new session is started
        }

        void Session_End(object sender, EventArgs e)
        {
            // Code that runs when a session ends. 
            // Note: The Session_End event is raised only when the sessionstate mode
            // is set to InProc in the Web.config file. If session mode is set to StateServer 
            // or SQLServer, the event is not raised.
        }

        void RegisterRoutes(RouteCollection routes)
        {
            routes.MapPageRoute("All Product", "Products/All", "~/AllProduct.aspx");
            routes.MapPageRoute("Selected Product", "Products/Selected/{name}", "~/ParticularProduct.aspx");
        }

    }
}

Step 6

Step 6a

Now open default.aspx

1. Drag two buttons from tool box and put on the page
2. Drag a text box and put on the page
3. Attach button click handler for both the button

   Default.aspx

   <%@PageTitle="Home Page"Language="C#"MasterPageFile="~/Site.master"AutoEventWireup="true"
   CodeBehind="Default.aspx.cs"Inherits="RoutingDemo._Default"%>
   <asp:ContentID="HeaderContent"runat="server"ContentPlaceHolderID="HeadContent">
   </asp:Content>
   <asp:ContentID="BodyContent"runat="server"ContentPlaceHolderID="MainContent">
   <h2>
           Welcome to ASP.NET 4.0 Routing Feature 
   </h2>
   <asp:ButtonID="btnAllProducts"runat="server"Text="All Products"
   Width="129px"onclick="btnAllProducts_Click"/><br/>
   <asp:ButtonID="btnSelectedProduct"runat="server"Text="Select Product"
   onclick="btnSelectedProduct_Click"/>
   <asp:TextBoxID="txtSearch"runat="server"Width="167px"></asp:TextBox>
   </asp:Content>
   

Step 6b

On click event of btnAllProducts

protected void btnAllProducts_Click(object sender, EventArgs e)
{
    Response.RedirectToRoute(”A11 Product”);
}

There is no input parameter.

On click event of btnSelectedProduct

protected void btnSelectedProduct_Click(object sender, EventArgs e) 
{
    Response.RedirectToRoute("Selected Product", new { name = txtSearch.Text ));
}

Here input parameter to navigate is in txtSearch text box.

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace RoutingDemo
{
    publicpartialclass_Default : System.Web.UI.Page
    {
        protectedvoid Page_Load(object sender, EventArgs e)
        {
            txtSearch.Text = "";
        }

        protectedvoid btnAllProducts_Click(object sender, EventArgs e)
        {
            Response.RedirectToRoute("All Product");
        }

        protectedvoid btnSelectedProduct_Click(object sender, EventArgs e)
        {

            Response.RedirectToRoute("Selected Product", new { name = txtSearch.Text });
        }
    }
}

Run the application

If you notice the above output and URL in address bar, it is

http://localhost:36774/Default.aspx

Now on clicking of All Products

Now if you see the URL in address bar

http://localhost:36774/Products/All

And this URL is search engine optimized URL.

In the same way when you click on Select Product button it will navigate to

http://localhost:36774/Products/Selected/Chai

Chai is the product name.

Conclusion

In this article, we saw what Routing mapping feature of ASP.Net 4.0. I hope this article was useful. Thanks for reading. Happy coding.