Creating Automatic User Friendly URL in Asp.net


In this article i'm going to explain how to convert site url into user friendly url. User Friendly URL is nothing but a who're familiar with tech or non-tech people also can understand by seeing your URL.

for explaining purpose i'm using two pages i.e { Login Page and Profile Page }
Login Page is a general login which contain username and password which user enter their username and password to login if the user credential is true then redirect to Profile Page.

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

Profile Page is used to display user details but here in this example i'm not going for lengthy programming, simply i'm going to display Username by using URL.

 Profile Page Url  :
 http://localhost:8763/Profile.aspx?Username=DotnetProgrammer

Convert this Profile URL into UserFriendly URL

 Convert Profile Page User Friendly Url  :
 http://localhost:8763/Profile/DotnetProgrammer

 Username will display after Page/username

HTML Markup : Create Login Page

i'm using simple design by using css style you can use this code just copy and paste on Login.aspx Page

CSS : Style

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

Design for Login Page

<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 this button click event i'm not using any database and validation data, simply whatever Username enter in Textbox1 passing that values to Profile page throug QueryString and after wards i'll show how to convert normal url to user friendly url.

 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

In this Profile page load event i'm retrieving values from QueryString and assign to lblUsername, normally in this way we are going to display data

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

User Friendly URL Code Start From Here

Add Global.ascx file in your project and import Routing Namespaces in it.

C# Coding : Adding Namespace in Global.ascx

 using System.Web.Routing;

Declare RegisterRoutes(RouteTable.Routes) method in Application_Start method and after implement that method in separately like as i shown in below code block.

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

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

MapPageRoute contains three parameters i.e
"RouteForProfile" is nothing but a RouteName in MapPageRoute which is used for key purpose based on this key we are going to do perform some action.
"Profile/{userID}" is nothing but a RouteURL in MapPageRoute, by using this RouteUrl we are replacing our physicalURL that is our 3rd parameter which you can see in RegisterRoute Method "~/Profile.aspx".

 http://localhost:8765/Profile.aspx?Username=DotnetProgrammer

 Replacing Our URL to
 http://localhost:8765/Profile/DotnetProgrammer

//Profile/{userID} we are passing Username and assigning in RouteUrl = {userID=Username}

C# Coding : User Friendly URL Login Button Click

In this button click event we are redirecting Profile page through Global.ascx file passing through userID values

 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 this Profile page load event i'm retrieving values from QueryString and assign to lblUsername, normally in this way we are going to display data

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

Tag : ASP.NET, URL
0 Komentar untuk "Creating Automatic User Friendly URL in Asp.net"

Back To Top