Wednesday, October 9, 2013

URL Routing in ASP.Net Web Forms - Pass Parameters in Hyperlink and Anchor tag

When you add hyperlinks to a Web page, if you want to specify a route URL instead of a physical file you have two options:

  1. You can hard-code the route URL.
  2. You can specify the route parameter names and values and let ASP.NET generate the URL that corresponds to them. You can also specify the route name if required in order to uniquely identify the route. If you change route URL patterns later, you would have to update any hard-coded URLs, but if you let ASP.NET generate the URLs, the correct URLs are always automatically generated (unless the parameters in the patterns are changed).

Let's say you have registered following Routes in the global.asax file.

public static void RegisterRoutes(RouteCollection routeCollection)
            routeCollection.MapPageRoute("Home", "home/{city}/{area}", "~/About.aspx", true, new RouteValueDictionary { { "city", "Ahmedabad" }, { "area", "Satellite" } });
            routeCollection.MapPageRoute("Result", "result/{city}/{searchstring}", "~/result.aspx");

Hard Coded URL

In the following procedure you add hyperlinks and anchor tag that use hard-coded URLs to a Web page.

<asp:HyperLink ID="lnkHome" runat="server" NavigateUrl="~/home/Ahmedabad/Paldi">Home</asp:HyperLink>
<a href="~/home/Ahmedabad/Paldi" runat="server" id="lnkAHome">Anchor - Home</a>

The above markup creates HyperLink and anchor tag controls with hard-coded URLs.

Automatically Generate URL from Markup

In the HTML Source Editor, add the following code in NavigateURL for Hyperlink and Href for Anchor Tag:

<asp:HyperLink ID="lnkResult" runat="server" NavigateUrl="<%$RouteUrl:city=Ahmedabad,searchstring=property-brokers-in-ahmedabad,routename=Result%>">Result</asp:HyperLink>
<a href="<%$RouteUrl:city=Ahmedabad,searchstring=property-brokers-in-ahmedabad,routename=Result%>" runat="server" id="lnkAResult">Anchor - Result</a>

The above markup uses RouteUrl expressions to create URL for the route that is named Result.

Create Automatically Generated URLs by using C# code

When you want to generate the URL from the code-behind, you don't need to give value to NavigateURL or href in the HTML source. You need to generate it in the Page_Load event in code-behind as given 


// Step - 1
RouteValueDictionary routeParams = new RouteValueDictionary  
                    { "city", "Surat" }, 
                    { "searchstring", "parle-point" },
                    { "qs", "result" }

// Step - 2

    VirtualPathData vpd = RouteTable.Routes.GetVirtualPath(null, "Result", routeParams);

// Step - 3
    lnkResultUsingCode.NavigateUrl = vpd.VirtualPath;
    lnkAResultUsingCode.HRef = vpd.VirtualPath;

Step - 1: The above code creates an instance of the RouteValueDictionary class that contains three parameters. The third parameter is qs, which is not in the URL pattern. Because it is not in the URL pattern, the category parameter and its value will be rendered as a query-string parameter.

Step - 2: Then, it instantiates a VirtualPathData object by calling the GetVirtualPath method of the RouteCollection class. GetVirtualPath() method takes RouteName and and RouteValueDictionary object as its parameters.

Step - 3: Finally, VirtualPathData object vpd is to be assigned to the NavigateURL and href properties of Hyperlink and Anchor Tag respectively.

Accessing URL Parameter Values in ASP.NET Pages

In an ASP.NET page that has been invoked by ASP.NET routing, you can retrieve the values of URL parameters in markup or in code. We have already seen how to retrieve parameter values in Code in my previous articles. Let's see how we can retrieve the parameter values in the HTML markup itself.

City: <asp:Label ID="Label1" runat="server" Text="<%$RouteValue:city%>"></asp:Label><br />
Searched For: <asp:Label ID="Label2" runat="server" Text="<%$RouteValue:searchstring%>"></asp:Label>

The above markup uses RouteValue expressions to extract and display the values of the URL parameters that are passed to the page.

I hope this article is useful for you. Please provide your inputs or extra information in the comments section.

Thanks & Regards,

No comments:

Post a Comment