Wednesday, 6 March 2013

ASP.NET - Simple Example Routing

First, I will crate project with 3 pages without routing.
Then I will convert them to routing.


Watch this example online
1. Create Empty Web Application
2. Add first form - Default.aspx
3. Add second form - Second.aspx
4. Add third form - Third.aspx
5. Add to default.aspx 3 buttons -
- go to second page
- go to third page and pass parameter
- go to third page and pass another parameter


        protected void Button1_Click(object sender, EventArgs e)
        {
            Response.Redirect("Second.aspx");
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            Response.Redirect("Third.aspx?Name=Pants");
        }

        protected void Button3_Click(object sender, EventArgs e)
        {
            Response.Redirect("Third.aspx?Name=Shoes");
        }
6. Read query string on third page
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write(Request.QueryString["Name"]);
        }



Now if you run the program, you will be able to navigate to second and third form.
This is how it used to be.
Let's add routing.

7. Add new item - Global.aspx
        using System.Web.Routing;

        protected void Application_Start(object sender, EventArgs e)
        {
            RegisterRoutes(RouteTable.Routes);
        }
        void RegisterRoutes(RouteCollection routes)
        {
            routes.MapPageRoute(
                "HomeRoute",
                "Home",
                "~/Default.aspx"
            );
            routes.MapPageRoute(
                "SecondRoute",
                "Second",
                "~/Second.aspx"
            );
            routes.MapPageRoute(
                "ThirdRoute",
                "Third/{Name}",
                "~/Third.aspx"
            );
        }
8. In default.aspx modify
        protected void Button1_Click(object sender, EventArgs e)
        {
           // Response.Redirect("Second.aspx");
            Response.Redirect(GetRouteUrl("SecondRoute", null));
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            //Response.Redirect("Third.aspx?Name=Pants");
           Response.Redirect(GetRouteUrl("ThirdRoute", new {Name = "Pants"}));
        }

        protected void Button3_Click(object sender, EventArgs e)
        {
           // Response.Redirect("Third.aspx?Name=Shoes");
            Response.Redirect(GetRouteUrl("ThirdRoute", new { Name = "Shoes" }));
        }
9. Modify page load in third.aspx
        protected void Page_Load(object sender, EventArgs e)
        {
            //Response.Write(Request.QueryString["Name"]);
            Response.Write(RouteData.Values["Name"]);
        }

Run the program, Please note that url looks much cleaner - there are not file extensions in it (Second.aspx becomes just Second)

10. To pass more then one argument
- add new button to default.aspx with the following code:
        protected void Button4_Click(object sender, EventArgs e)
        {
            Response.Redirect(GetRouteUrl("FourthRoute", new { Name = "Shoes" , Sex = "Male"}));
        }
- add the following code to global.asax
            routes.MapPageRoute(
                  "FourthRoute",
                  "Fourth/{Name}-{Sex}",
                  "~/Fourth.aspx"
              );
- create Fourth.aspx page with the following page load:
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write("Name is: " + RouteData.Values["Name"] + " and sex is " + RouteData.Values["Sex"]);
        }


2 comments:

  1. Good Example :)

    But I have a doubt,
    Is there any solution for hues amount pages? (like 100 or 200 pages)?

    ReplyDelete
  2. I would suggest using Microsoft.AspNet.FriendlyUrls

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

    }

    ReplyDelete