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
1 comment so far
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.
Javascript Query Selectors and the Selectors API September 20, 2008
Posted by fofo in Javascript, XHTML.Tags: IE8, Javascript, XHTML
2 comments
When using Javascript one of the most common tasks is to use the DOM to obtain references to the various HTML elements. The only way to accomplish that with the DOM Level 2 API was to use either document.getElementByid or document.getElementsByTagName. With CSS we can have selectors that match HTML elements. Web browsers can see this matching and implement it. So the question was “Why can’t i do that with Javascript?”. The latest development in the DOM world is the W3C Selectors API .
This new selector API defines the querySelector, and querySelectorAll methods that take a CSS selector string and return the first matching element or a StaticNodeList of matching elements, respectively. The methods can be called from the document object.I will demonstrate the new methods of the W3C with an example.
Just copy and paste the 2 HTML code snippets below in 2 different .html files in your desktop. Then open them with IE and hit the button.
Imagine if we have a very simple HTML document and we want to access an HTML element and change its font size by clicking a button.
Using only the APIs from DOM Level 2, we use the getElementById method.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<HTML>
<HEAD>
<TITLE>setFontSize</TITLE>
<SCRIPT TYPE=”text/javascript”>
<!–
function setFontSize(){
document.getElementById(‘test1’).style.fontSize = ‘200px’;
}
//–>
</SCRIPT>
</HEAD>
<BODY>
<p ID=”test”>Hi</p>
<p ID=”test1″>Hello there</p>
<FORM>
<INPUT TYPE=”button” VALUE=”change Size” onClick=”setFontSize()”>
</FORM>
</BODY>
</HTML>
and now using the Selectors API and the querySelector method.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html>
<HEAD>
<TITLE>setFontSize</TITLE>
<SCRIPT TYPE=”text/javascript”>
<!–
function setFontSize(){
var myitem = document.querySelector(‘#test1′);
myitem.style.fontSize=’200px’;
}
//–>
</SCRIPT>
</HEAD>
<BODY>
<p ID=”test”>Hi</p>
<p ID=”test1″>Hello there</p>
<FORM>
<INPUT TYPE=”button” VALUE=”change Size” onClick=”setFontSize()”>
</FORM>
</BODY>
</HTML>
Safari 3.1, Internet Explorer 8 beta and Firefox 3.1 alpha1,support the Selector API.Opera is going to add support for this API very soon.
Javascript Intellisense and debugging in Visual Studio 2008 June 25, 2008
Posted by fofo in C#, Javascript, Visual Studio 2008.Tags: Intellisense, Javascript, Visual Studio 2008
add a comment
Visual studio 2008 is available for some time now. People are hesitant to upgrade to VS 2008 from previous versions of Visual studio. Even though the new features and enhancements of Visual Studio 2008 are well documented elsewhere in the web, I will try to highlight the benefits of using VS 2008. In this post I will talk about Javascript Intellisense and debugging for which are brand new features in VS 2008.
I will try to explain what I am doing with a step-by step example.
1) Launch Visual Studio 2008
2) Create a new asp.net (c#) web application
3) Just below the title section-tag of the .aspx page create this simple javascript script
<head runat=”server”>
<title>Untitled Page</title>
<script type=”text/javascript”>
function displayname(){
return “fofo”;
}
</script>
</head>
4) The moment you hit “F” from the keyboard (to write the word function you have Intellisense). See the picture below
5) We can add a new javascript function that adds two numbers. You can add the following function below the previous one. You can get Intellisense in the function’s body. See the picture below
function addNumbers(a,b)
{
var c = a+b;
return c;
}
6) You can call these javascript scripts with 2 links. see the code below. just place two <a> tags inside the form body.
<form id=”form1″ runat=”server”>
<a href=”javascript:displayname()”> display</a>
<a href=”javascript:addNumbers(5,6)”> Add</a>
7) If you run your application (F5) and click on the Add link you get a page like mine. See the picture below
8) Let’s see now how Intellisense can work with external javascript files. Add a new item to your web application, a Jscript file. You can call it somefunctions.js.
9) In the somefunctions.js file copy and paste the following code
function reversestring(mystring)
{var newString = “”;
var theString =mystring;
var counter = theString.length;
for (counter ;counter > 0 ;counter — ) {
newString += theString.substring(counter-1, counter);}
document.write(theString + ” reversed is ” + “<b>” + newString + “</b>” + ” ! “);
}
It is just a simple function that reverses the word any given word. We need to call it from our .aspx page
10) Go back to the .aspx page and in the javascript area create a new function to call the reverstring function
function externalscript(){
var str= reversestring(‘nikos’);
return str;
}
11) if you try to type this line of code var str= rev… there will be no Intellisense. You need to reference the external javascript file. You can do that by adding the following code just under the <title> tag
<script src=”morefunctions.js” type=”text/javascript”></script>
If you do that and try to reference the external javascript function from the .aspx page you will get Intellisense as the picture below shows.
12) Moreover you can add XML comments in the external javascript file like these below
reversestring(mystring) {
///<summary> Reverse any given string </summary>
///<param name=”mystring” type=”string”>A word to be reversed</param>
///<returns type=”String”></returns>
These notations can be picked up by Intellisense in our .aspx page as the picture below shows
Finally you can place breakpoints in the javascript scripts in the .aspx file and the external .js file
See the picture below
If you want to download the source code for this post please email me at nkantzelis@q-training.gr
Microsoft announced that IE 8 will render in standards mode March 13, 2008
Posted by fofo in Internet Explorer.Tags: CSS, IE7, IE8, Javascript
add a comment
Microsoft had a sudden change of heart (and mind) regarding the way the new IE 8 will render a web page.
Initially MS announced that IE 8 will support version targeting. What MS was proposing in simple words is this:
If a web developer created a well-formed document with a strict DOCTYPE, IE 8 will behave exactly as its predecessor and render it according to IE 7 standards.
Initially the web page would be rendered in IE 8 standards mode and only if the developers explicitly asked in their pages that they wanted the page to be rendered in IE 8 standard mode, the browser would do so.
The tag that should be used is the head area of the document is this:
<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />
The web developers were not impressed.
Now it has been decided that by default, IE 8 will interpret web content in the most standards compliant way it can.
Microsoft listened to the community that voiced its concerns and changed its initial plans and now we are moving towards to a more web standards compliant world.
IE8 is currently in its beta 1 form.
People in the IE developer team have created a product that has much greater support for Cascading Style Sheets (CSS). There is also a significant gain in performance and compatibility with Document Object Model (DOM) standards.
To see a list of all the CSS improvements made in IE 8 click here
There are many more improvements for developers in IE8.
- The IE Developer Toolbar has been greatly enhanced. The toolbar is now built into the browser
- Microsoft has fixed the notorious circular reference memory leak, which drove crazy the javascript developers
- The (DOM) ,is much more standards compliant, bringing it up to the same level found in the other major browsers.
All the imporevements in the IE 8 can be found here
DOT NET RULES 