Creating User Friendly URL in Asp.net

Introduction

Enhance your web application's user experience by transforming mundane URLs into user-friendly ones. This article delves into the step-by-step process of converting standard URLs into easily comprehensible links, promoting better navigation and accessibility.

Understanding User-Friendly URLs:

User-friendly URLs are essential for ensuring that both tech-savvy and non-tech-savvy users can understand and interpret your web addresses. This tutorial will illustrate this concept using a login and profile page scenario.

Pages in Focus: Login and Profile:

For demonstration purposes, we'll focus on two pages: the Login Page and the Profile Page. The Login Page prompts users for their credentials, redirecting them to the Profile Page upon successful login. The Profile Page, in this example, displays the username via a URL parameter.

Login Page URL:
http://localhost:8763/Login.aspx

Profile Page URL:
http://localhost:8763/Profile.aspx?Username=FreshersCoder

Convert Profile Page URL to User-Friendly:

The goal is to convert the Profile Page URL from a standard format to a user-friendly one, making it more intuitive and readable.

User-Friendly Profile Page URL:
http://localhost:8763/Profile/FreshersCoder

HTML Markup: Login Page Design:

Implement a straightforward login page with basic HTML markup and styling. This design includes CSS styles for clarity and organization.

<style type="text/css">
        #tbLogin {
            border-collapse:collapse;
        }
            #tbLogin th, td {
                border: 1px solid #999;
                padding:5px;
            }
            #tbLogin th {
                background-color:#0094ff;
                color:#212121;
            }
    </style>



<table id="tbLogin">
         <tr>
             <th colspan="2">Login :</th>             
         </tr>
         <tr>
             <td> Username :  </td>
             <td>
                 <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
             </td>
         </tr>
         <tr>
             <td> Password : </td>
             <td>
                 <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
             </td>
         </tr>
         <tr>
             <td colspan="2">
                 <asp:Button ID="btnLogin" runat="server" OnClick="btnLogin_Click" Text="Login" />
             </td>
         </tr>
     </table>

Design for Profile Page

 <h1>Welcome <asp:Label ID="lblUsername" runat="server"></asp:Label></h1>

C# Coding: Normal Login Button Click:

In the normal login button click event, the entered username is passed to the Profile Page via the standard query string.

 protected void btnLogin_Click(object sender, EventArgs e)
 {
  if (txtUsername.Text != "" && txtPassword.Text != "")
  {
   Response.Redirect("Profile.aspx?Username="+txtUsername.Text);
  }
  else
  {
   Response.Write("Invalid Username and Password");
  }
 }

C# Coding: Normal Profile Page Load Event:

The Profile Page retrieves the username from the query string and displays it on the page.

  lblUsername.Text = Request.QueryString["Username"].ToString();

User-Friendly URL Implementation: Global.ascx:

Introduce the Global.ascx file to your project and import the necessary routing namespaces. Define the RegisterRoutes method to set up routing for user-friendly URLs.

 //Namespaces
 using System.Web.Routing;
 
 //C# Coding
 protected void Application_Start(object sender, EventArgs e)
 {
   RegisterRoutes(RouteTable.Routes);
 }

 void RegisterRoutes(RouteCollection routes)
  { 
    routes.MapPageRoute("RouteForProfile",
                        "Profile/{userID}",
                       "~/Profile.aspx");
 }

C# Coding: User-Friendly URL Login Button Click:

Modify the login button click event to redirect users to the Profile Page using the user-friendly URL.

 protected void btnLogin_Click(object sender, EventArgs e)
 {
  if (txtUsername.Text != "" && txtPassword.Text != "")
  {
     // Instead of this code i'm going to show you how to get customize url from Global.ascx by passing userID value
    //Response.Redirect("Profile.aspx?Username="+txtUsername.Text);
 
    Response.Redirect(GetRouteUrl("RouteForProfile", new { userID = txtUsername.Text }));

  }
  else
  {
   Response.Write("Invalid Username and Password");
  }
 }

C# Coding: User-Friendly URL Profile Page Load Event:

In the Profile Page load event, retrieve the username from the route data instead of the query string for user-friendly URL support.

  //lblUsername.Text = Request.QueryString["Username"].ToString();
 
   //Retrieve userID Value from RegisterRoute Method
   lblUsername.Text = RouteData.Values["userID"].ToString();

Conclusion:

With these steps, you've mastered the art of creating user-friendly URLs in your ASP.NET web applications. Elevate the user experience, enhance navigation, and make your URLs more appealing and accessible. Implement these techniques to showcase your commitment to user-centric design and seamless web interactions.