Manipulating the HTML DOM of an asp.net page with Javascript February 24, 2009
Posted by fofo in asp.net, Javascript, XHTML.Tags: Javascript, XHTML
trackback
It has been a while, since I posted anything in my blog. It has been a very busy period for me. Hopefully I will get some time to write about Entity framework and ASP.NET Dynamic data. I will try to cover some of these new buzzwords in my next posts. I want to talk in this post about something that is relevant with the client side of things and more specifically the HTML DOM and how we can manipulate it. I know that some of you might think that this blog is dedicated to the server side logic, based on the .Net platform. Yes that is true but when I feel I need to explain something regarding CSS,Javascript and XHTML, I will do so.
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.
In our scenario we can achieve what we want without sending an HTTP request back to the server. We can achieve this with Javascript and HTML DOM. All modern browsers know how to handle/interpert these technologies.
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”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
click
<asp:HyperLink ID=”mylink” runat=”server”
NavigateUrl=”http://www.microsoft.com” style=”font-weight: 700″>here</asp:HyperLink> to navigate to our website
</div>
</form>
</body>
</html>
5) Add an Html Button to the page. The onclick attribute should be “changelink()”. This is a javascript function that will be called when the user clicks the button. The value attribute could be “Change link”.
<input type=”button” onclick=”changelink()” value=”Change link” />
6) Create an empty javascript file and call it changelink.js. You can do that by adding a new item, a .js file, in your website.
7) Create a link from your asp.net page to the external javascript file. This is the code and should be placed in the head section of the .aspx page.
<script src=”changelink.js” type=”text/javascript”></script>
8) The changelink.js file contents are
function changelink()
{
document.getElementById(‘mylink’).innerHTML = “Visit ASP.NET”;
document.getElementById(‘mylink’).href = “http://www.asp.net”;
document.getElementById(‘mylink’).target = “_blank”;
}
9) With VS 2008 there is built-in support for JavaScript Intellisense. This is enabled in both the free Visual Web Developer 2008 Express edition as well as in Visual Studio, and makes using JavaScript significantly easier.
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
document.getElementById(‘mylink’),
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.
DOT NET RULES 
This iis really interesting, You are a very skilled blogger.
I’ve joine your feed andd look forward to seeking more of your excellent post.
Also, I’ve shared your web siite in my sockal networks!