I had a seminar the past days and many people were asking how to manipulate various elements of an asp.net page with server side code. More specifically how to change the clickable text of a hyperlink (server side control), change the target link and make the link when clicked to open in a new window. You can do that with server side logic, using an asp.net language like C# or VB.Net. You must write the appropriate code in an event-handler routine, like button click event (we assume that there is also a button in the .aspx page) . Of course this triggers a post back to the server and all the logic is executed on the server. We do not want to do that, in this case.
The server does all the heavy lifting for us. We send along the wire an HTTP request and the server (in the case of an asp.net page) calls the asp.net engine and sends through an HTTP response back to the client pure XHTML, which the client can render easily.
There is no need for unecessary traffic back and forth from the server and the client. We want our application to be as responsive as possible and we can execute some of the logic above in the client.
So we have in our asp.net page a hyperlink and a button. Originally the link points to the microsoft website, “http://www.microsoft.com”. The text of the link is “here” and when we click the button it shoud be changed to “Visit ASP.NET”
Also, when we click on the button we need to change the target of that link to the main ASP.Net site “http://www.asp.net”
1)Launch Visual Studio 2008/2005 or Visual Web developer express edition
2) Create an asp.net web site using the filesystem and C#. Name it “manipulatethedom”, or any other name you like it
3) You have an empty Default.aspx page. Just type the text “click here to navigate to our website” in the Design View. The word here will be our link in our example.
4) Drag and Drop an asp.net hyperlink server control on the page. Change the id attribute to “mylink”. Change the NavigateUrl attribute to “http://www.microsoft.com”
so your page should look like this now
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<form id=”form1″ runat=”server”>
<asp:HyperLink ID=”mylink” runat=”server”
NavigateUrl=”http://www.microsoft.com” style=”font-weight: 700″>here</asp:HyperLink> to navigate to our website
<input type=”button” onclick=”changelink()” value=”Change link” />
8) The changelink.js file contents are
document.getElementById(‘mylink’).innerHTML = “Visit ASP.NET”;
document.getElementById(‘mylink’).href = “http://www.asp.net”;
document.getElementById(‘mylink’).target = “_blank”;
10 ) In this very simple file, I use the Document object which represents the entire HTML document and can be used to access all elements in a page.
11) Then I use the getElementById() method which returns a reference to the first object with the specified ID.Please remember that the value of the id attribute of my link in the asp.net page is “mylink”. So by typing
I get a reference of my link object on the page.
12) Then I use the innerHTML property which sets the text of the link to what I like.Similarly I use the href property sets the URL to the “http://www.asp.net”.Last, I use the target property to open the Url in a new window.
13) Run your application by hitting F5 and click on the button. Hopefully you will see all the changes that we have been discussing about.
So one must understand what kind of functionality can be achieved with client-side code and maybe shift the server side logic to the client.
Hope it helps!!! If you need any help, just email me.