Skip to main content

ASP.NET 4.0 Web forms URL Routing

Hi, while working on a ASP.NET project I saw that URLs of the application were quite large and were not much meaningful to the user. Also they were showing the actual folder structure in the project that I found a bit unsecured. So, here I get the requirement to configure application to accept URL of webpages which are meaningful and short.

To fulfill this requirement I used URL routing feature of ASP.NET. URL routing lets you to configure your application to accept URL which do not point to physical files. Instead of this we can show some semantically meaningful URL to user.

For example -

Initial URL -
http://www.yoursite.com/products.aspx?category=laptop

Using routing you can configure your application render same page using following URL -
http://www.yoursite.com/products/laptop

You can also find that new URL is SEO - friendly and can help in search engine optimization (SEO).


Implementing URL routing in ASP.NET web forms

In the implementation part of routing we need to do mapping of URL using ASP.NET. For this, include "System.Web.Routing" in Global.asax.cs. Here is an example -


void Application_Start(object sender, EventArgs e)

        {

            // Code that runs on application startup

            RouteTable.Routes.MapPageRoute("Product", "Product/{Name}", "~/Product.aspx");

        }

Below is the hyperlink present on the ProductList.aspx page. By clicking this hyperlink user is redirected to the Product.aspx page. 


     <asp:HyperLink ID="hyper" runat="server" NavigateUrl='<%# "Product/laptop"%>'  Text='<%# Bind("ProductName") %>' ></asp:HyperLink>



or

Using following code in ProductList.aspx.cs  -

  Response.RedirectToRoute("Product", new { Name = "laptop" });

On clicking the hyperlink or executing above code the effective URL becomes -
http://www.yoursite.com/Product/laptop

Now the application is configured to map above URL to Product.aspx. 

We can get the name of Product using following code -


string name = Page.RouteData.Values["name"].ToString();


After mapping the URL I found an issue related to path of the images present on Web Page. Some of the images were not displayed after mapping of URL for that web page. Following syntax was used  for images -

 <img src="Styles/Images/Product.jpg" width="65px" height="65px" />



I found that after mapping the URL effective value for the "src" attribute of  "img" was changed. Hence value of "src" attribute was not pointing to some physical file. So, I used following syntax to set the value of "src" attribute in "img" -


<img src="<%= Page.ResolveUrl("Styles/Images/Product.jpg") %>" height="65px" width="65px" />

Comments

Post a Comment

Popular posts from this blog

Show Image on canvas HTML5

Here is the sample code to select image from system and display it on html5 canvas and javascript: <input type= "file" id= "selectedImage" /> <canvas id= "myCanvas" width= "500" height= "500" > </canvas> Javascript code: $( "#selectedImage" ).change( function (e) { var URL = window .URL; var url = URL.createObjectURL(e.target.files[ 0 ]); img.src = url; img.onload = function () { var canvas = document .getElementById( "myCanvas" ); var ctx = canvas.getContext( "2d" ); var imgSize = calculateAspectRatioFit(img.width, img.height, canvas.clientWidth, canvas.clientHeight); ctx.clearRect( 0 , 0 , canvas.width, canvas.height); ctx.drawImage(img, 0 , 0 , imgSize.width, imgSize.height); } }); function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { var ratio = Math .min(maxWi

Pass byte array from C# to C++ and vice-versa

Pass byte array from C# to C++                           If you want to pass a byte array to native DLL as parameter, you can use the Intptr to do this, please check the demo below. /C++ API code: TestDLL_API void TestArrayPara (BYTE * pArray, int nSize) { for ( int i= 0 ; i<nSize; i++) printf( "%d\n" , pArray[i]); } //C# code: class TestClass { [DllImport(@"TestDll.dll")] public static extern void TestArrayPara (IntPtr pArray, int nSize); public static void Test () { byte [] array = new byte [ 16 ]; for ( int i = 0 ; i < 16 ; i++) { array[i] = ( byte )(i + 97 ); } int size = Marshal.SizeOf(array[ 0 ]) * array.Length; IntPtr pnt = Marshal.AllocHGlobal(size); try { // Copy the array to unmanaged memory. Marshal.Copy(array, 0 , pnt, array

Display Tooltip for Combo Box item C#.NET Winforms

In windows form combo box control sometimes while adidng items dynamically we have items whose width is greater than width of combox box control. In this case for making UI more user friendly we can show tooltip over such item. Here is the sample C# code to display such tooltip:  Add a Tooltip control on the form.  Add following code : this . combo_box1 . DropDownStyle = System . Windows . Forms . ComboBoxStyle . DropDownList; this . combo_box1 . DrawMode = DrawMode . OwnerDrawFixed; this . combo_box1 . DrawItem += new DrawItemEventHandler(combo_box1_DrawItem); this . combo_box1 . DropDownClosed += new EventHandler(combo_box1_DropDownClosed); this . combo_box1 . MouseLeave += new EventHandler(combo_box1_Leave); void combo_box1_DrawItem( object sender, DrawItemEventArgs e) { if (e . Index < 0 ) { return ; } string text = combo_box1 . GetItemText(combo_box1 . Items[e . Index