Introduction of the URL routing in ASP.NET 4.0

No.of Views1991
Bookmarked1 times
Downloads 
Votes0
By  Dhananjay Kumar   On  20 Aug 2010 11:08:02
Tag : ASP.NET , URL Routing
URL Routing is new feature in ASP.Net 4.0. This article will give a walk through on how to work with URL Routing and an introduction of that.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

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

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

Image Loading

Step 2

a.    Right click on the project
b.    Add a new folder

Image Loading

c.    Give any name of your choice to the folder. I am giving name Model for purpose of this article

Image Loading

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

Step 3

a.    Right click on Model folder and select Add new item

Image Loading

b.    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

Image Loading

c.    Click on  Server Explorer 

Image Loading

d.    From the Server Explorer ,  right click on Data Connections  and select add connection

Image Loading

e.    Below pop window will come.

Image Loading

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.

f.    From Server explorer, expand the NorthWind database connection. From table tab select Product and drag it in design surface

Image Loading

g.    After dragging on the design surface NorthWindProduct.dbml file as below

Image Loading

h.    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 

Image Loading

Step 4

We want to navigate to two different pages.

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

Step 4a

a.    Right click on site.master in solution explorer.  And add a content page

Image Loading

b.    Now in solution explorer , you can notice you have WebForm.aspx

Image Loading

c.    Right click on WebForm.aspx and rename this to AllProduct.aspx

Image Loading

After renaming the name, you will have AllProduct.aspx in solution explorer.

Image Loading

Step 4B

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

Image Loading
 

Step 4C

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

Image Loading

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

Image Loading

AllProduct.aspx will look like below,

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="AllProduct.aspx.cs" Inherits="RoutingDemo.WebForm1" %><asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"><asp:GridView ID="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
    {public partial class WebForm1 : System.Web.UI.Page
        {protected void Page_Load(object sender, EventArgs e)
            {
                GridView1.DataSource = Products;
                GridView1.DataBind();

            }private List<Product> _Product= null ;protected List<Product> Products
            {get{if (_Product == null)
                    {
                        NorthWindProduct_DataContext context = new NorthWindProduct_DataContext();return context.Products.ToList(); 

                    }return _Product; 
                }
            }
        }
    }

 Explanation of Code

1.    Put the namespace

Image Loading

 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.

Image Loading

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

Image Loading

Step 4D

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

Image Loading

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

Image Loading

 ParticularProduct.aspx will look like below,

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ParticularProduct.aspx.cs" Inherits="RoutingDemo.WebForm2" %><asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"><asp:GridView ID="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
{public partial class WebForm2 : System.Web.UI.Page
    {protected void Page_Load(object sender, EventArgs e)
        {

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

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

                }return _Product;
            }
        } 
    }
}

 Explanation of Code

1.    Put the namespace

Image Loading

 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 product with the given name

Image Loading

 If you see the above code, I am using

Image Loading

 Here Name is the parameter name in the Route URL.

Step 5

Now open Global.asax

Image Loading

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

Image Loading

 Now we need to add

1.    Name space

Image Loading

 2.    Method

Image Loading

 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

Image Loading

 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
{public class Global : 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

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

Step 6b

On click event of btnAllProducts

Image Loading

There is no input parameter.
On click event of btnSelectedProduct 

Image Loading

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
{public partial class _Default : System.Web.UI.Page
    {protected void Page_Load(object sender, EventArgs e)
        {
            txtSearch.Text = "";
        }protected void btnAllProducts_Click(object sender, EventArgs e)
        {
            Response.RedirectToRoute("All Product");
        }protected void btnSelectedProduct_Click(object sender, EventArgs e)
        {

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

Run the application

Image Loading

If you notice the above output and URL in address bar, it is
http://localhost:36774/Default.aspx
Now on clicking of All Products

Image Loading

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.

 
Sign Up to vote for this article
 
About Author
 
Dhananjay Kumar
Occupation-Software Engineer
Company-Infosys Technolgies,Pune
Member Type-Gold
Location-India
Joined date-20 Jul 2009
Home Page-http://dhananjaykumar.net/
Blog Page-http://dhananjaykumar.net/
Dhananjay Kumar is Microsoft MVP on connected system. He blogs at http://dhananjaykumar.net/ . You can follow him http://twitter.com/debugmode_/ and reach him at dhananjay.25july@gmail.com
 
 
Other popularSectionarticles
Comments
By:RRaveenDate Of Posted:8/20/2010 11:07:50 AM
Excellent Article
This is great composing. you have to tune more and more like this.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top