This is the second in the three part series looking at “AJAXing” technologies for .NET developers.
Post 1:
- Example #1 – Plain ASP.NET Page with PostBacks
- Example #2 – ASP.NET AJAX with UpdatePanels
Post 2 (this post):
- Example #3 – Standard HTML and JavaScript
- Example #4 – ASP.NET AJAX Framework and JavaScript
Post 3 (this post):
- Example #5 – Nikhil Kothari’s Script#
- Example #6 – Microsoft Labs Live Volta
In these two examples, we’ll take a look at the differences of JavaScript programming—between “standard” JavaScript and using the methods and objects provided by the ASP.NET AJAX Framework, but without using the actual server-side controls.
#3. Standard HTML and JavaScript
The next example is a classic—clean HTML and a JavaScript function. This is a standard HTML page without any “fancy” .NET or framework technologies. How does this compare to .NET?
In our header, there’s a simple JavaScript function to handle the OnChange event of the drop down list:
<script type=”text/javascript” language=”javascript”>
function LoadPhoto()
{
PhotoPreview.style.display = ‘block’;
PhotoPreview.src = ‘Images/‘ + PhotoList.value;
}
</script>
Next, our HTML.
<select id=”PhotoList” onchange=”LoadPhoto()”>
<option label=”ABCs - Blocks” value=”abc_blocks.jpg” />
<option label=”ABCs - Chalkboard #1″ value=”abc_board.jpg” />
<option label=”ABCs - Chalkboard #2″ value=”abc_board2.jpg” />
<option label=”Graduation” value=”capandgown.jpg” />
</select>
<br /><br />
<img id=”PhotoPreview” style=”display: none;“ src=”" />
As we can see from the Fiddler capture, the HTML, of course, is EXTREMELY thin here and, since postback events are not firing, the page ever reloads, simply loads the resources (in this case, images) as necessary. In addition, the images are cached, so additional downloading isn’t necessary..
- HTML Code: 8 +
2 4 JavaScript function lines (see below).
- I may be a bit older, but this is how it “used” to be done, so it’s readable to me. For those unfamiliar with JavaScript may be turned off by it.
- IE 7 and Safari (*shocked*) work, however, Opera and FireFox are broken. See details below.
- As you’ll read below, managing compatibility between JavaScript functionality on each platform is a HASSLE and can be a major turn off for DIY JavaScript AJAX.
Details for Compatibility Issues:
IE 7 and Safari actually render correctly because they use the “label” property from HTML 4.0 for option boxes. FireFox and Opera turn out blank. To have options in those browsers, we’ll need to place the text in the body of the tag.
<option label=”ABCs - Blocks” value=”abc_blocks.jpg”>
ABCs – Blocks
</option>
That fixes Opera, but FireFox is still broken. Why? Because FireFox can’t read the DOM directly, you have to populate each element into a variable and manipulate the variable. Updating our JavaScript to the following code will fix the problem. Also, since this method works in all the OTHER browsers, this would be the “preferred” method to accomplish this.
var photoPreview = document.getElementById(‘PhotoPreview’);
var photoList = document.getElementById(‘PhotoList’);
photoPreview.style.display = ‘block’;
photoPreview.src = ‘Images/’ + photoList.value;
While this code works, you can run into challenges for browsers that do not yet support getElementById.
#4. ASP.NET AJAX Framework and JavaScript
In our last example, browser compatibility was the most challenging pitfall to overcome. If we want to write our own JavaScript, but would like the padding of a framework, we can use the ASP.NET AJAX framework without all the fancy server-side controls.
When we add a new AJAX Web Form, a single control is added, the ScriptManager. In this example, we’re not going to use UpdatePanels, but simply access the objects provided for us by the ScriptManager.
The JavaScript in our Header:
<script type=”text/javascript”>
function LoadPhoto() {
$get(‘PhotoPreview’).style.display = ‘block’;
$get(‘PhotoPreview’).src = ‘Images/’ + $get(‘PhotoList’).value;
}
</script>
And the HTML:
<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />
<select id=”PhotoList” onchange=”LoadPhoto()”>
<option label=”ABCs - Blocks” value=”abc_blocks.jpg”>
ABCs - Blocks</option>
<option label=”ABCs - Chalkboard #1″ value=”abc_board.jpg”>
ABCs - Chalkboard #1</option>
<option label=”ABCs - Chalkboard #2″ value=”abc_board2.jpg”>
ABCs - Chalkboard #2</option>
<option label=”Graduation” value=”capandgown.jpg”>
Graduation</option>
</select>
<br /><br />
<img id=”PhotoPreview” style=”display: none;“ src=”" />
The $get alias simply returns browser-compatible JavaScript for getElementById. You can read more about how this alias works on Irena Kennedv’s blog. The short is that this alias will generate the correct code based on the browser.
The Fiddler logs are nearly identical to the plain JavaScript; however, the .aspx page is a bit heavier.
- HTML Code: 9 + 2 JavaScript function lines.
- Aside from familiarization with the aliases and framework functions in JavaScript, this code is nearly identical to the
- The only difference at this point is that the code allows us to access the $get alias and, most importantly, cross-browser compatibility handled by the framework—not you.
- Past the bit of losing “update panels”, this is a nice middle ground between pure JavaScript and pure server-side AJAX Framework.
This methodology also has another benefit: you can directly access web services (.asmx) from your JavaScript client code. For more information on this topic, read Calling Web Services from Client Script. I haven’t done a lot with this yet, but have a few notes sitting around to give it a try and see how it compares when reading actual data across the wire.
