June 5, 2011

Access anchor link from code-behind

Html anchor links are a way to navigate within a page. The anchor can be considered as a bookmark within a page, which when clicked takes the user to that section of a page. An anchor to a certain section of a page can be set in the following way.

  1. <a name=”anchor”></a><div>content</div>

The name attribute of the “a” element determines the anchor / bookmark to the page. The anchor can be accessed by setting the link like below.

  1. <a href=”#anchor”>Anchor</a>

However, the anchor link is a client side thing and cannot be accessed from server-side. In this post, I am going to show how the anchor link can be accessed from server-side using hidden field and javascript. The following is the code for the aspx page.

aspx page
  1. <body>
  2.     <form id="form1" runat="server">
  3.     <div>
  4.     <a name="anchor"></a>
  5.     <div>Some content <a href="#anchor" onclick="SetUrl('anchor')">click here</a></div>
  6.     <asp:HiddenField ID="HF1" runat="server" />
  7.     <asp:Button ID="B1" runat="server" Text="Check Anchor" OnClick="GetAnchor" />
  8.     <asp:Literal ID="L1" runat="server"></asp:Literal>
  9.     </div>
  10.     <script type="text/javascript">
  11.         SetUrl("");
  12.     </script>
  13.     </form>
  14. </body>

The page is simple, contains a HiddenField, Button and Literal control to display the anchor, if any. At the bottom of the page, before the closing form tag is a javascript method, SetUrl(“”) that sets the anchor in the hidden field. The code for javascript method is below.

JavaScript code
  1. <script type="text/javascript">
  2.     function SetUrl(val) {
  3.         if (val == "" && location.href.indexOf("#") > -1) {
  4.             document.getElementById('<%= HF1.ClientID %>').value = location.href; //set value of HiddenField
  5.         }
  6.         else if (val == "" && location.href.indexOf("#") == -1) {
  7.             document.getElementById('<%= HF1.ClientID %>').value = "";
  8.         }
  9.         else {
  10.             document.getElementById('<%= HF1.ClientID %>').value = val;
  11.         }
  12.         alert(val);
  13.     }    
  14. </script>

The javascript method, checks if there is a value for the anchor when the link is clicked. If not and if it does not contain the “#” character in the url, it does not set the value of the anchor in the HiddenField. Otherwise, it either sets the value when clicked or sets the url if it contains “#” character.

Once the HiddenField value is set, the value can be accessed from the server side. In this example, when the button is clicked, the value is obtained and set as the Text property of the Literal control. Here is the code for Button click event.

Button click event
  1.     protected void GetAnchor(object sender, EventArgs e)
  2.     {
  3.         string anchor = HF1.Value;//get url from hidden field
  4.         if (anchor.Contains("#"))//check if it an anchor
  5.         {
  6.             string[] list = anchor.Split(new char[] { '#' });
  7.             L1.Text = "anchor name is :" + list[1];
  8.         }
  9.         else if (anchor != "")
  10.             L1.Text = anchor;
  11.         else
  12.             L1.Text = string.Empty;
  13.     }
  14. }

The code finds the value of the HiddenField and displays it in the Literal control.


Reference: Shahed Kazi at AspNetify.com