Diving into jQuery, Part 1: A Simple Currency Converter – ASP.NET and jQuery
A few weeks ago, I picked up a copy of Matthew MacDonald’s Beginning ASP.NET 2.0 in VB 2005 since I needed to learn ASP.NET for work. Since we’re currently using the 2.0 version of the .NET framework, I decided to go with an older book (five years!!) now and plan to refresh with newer material if/when we switch to .NET 4.0, which was just released yesterday.
It’s amazing how much has happened with web and general computer technologies since this book was published. At the time, AJAX was still largely just a concept, Windows Vista had not yet been released, and the iPhone was still a unicorn in Steve Jobs’ backyard. Perhaps the age of this book gives reason to why I was surprised at the how much enthusiasm the author had for not needing to worry about HTML or JavaScript and let the server do all of the work.
To be sure, I can certainly understand why developers, who survived the world of classic ASP and VBScript, were excited when ASP.NET came along, complete with its features of state management, server and client-side validation, and a host of other niceties which were revolutionary for its time. Besides, when the dust from the browser wars of the late nineties was settling, who in their right mind wanted to write code for the browser? Eck.
Times have changed, however, and web developers can reasonably expect client browsers to handle JavaScript (which they were supposed to be able to handle since the late nineties). So when I came across MacDonald’s example of a simple currency converter in chapter 5 of his book, I was little surprised that it was entirely in ASP.NET. Granted, this a book focused entirely on ASP.NET, but as I worked through the example, the idea of creating even a simple currency converter to run using server-side code seemed so dated. Why make a full-round trip back to the server when all you need to do is a simple calculation?
I wanted to try using JavaScript to accomplish the same task. I decided to user jQuery, a popular JavaScript library, to help me complete the task. You can see a working demo of my jQuery-converted currency converter here.
To get started with jQuery, you need to add a reference to the jQuery source file in the header of either your HTML or ASPX file. Microsoft hosts jQuery on its content delivery network (cdn), so I simply linked to their most recent version of the file that included visual studio documentation (hence the –vsdoc in the file name). I also put all of my jQuery and JavaScript code in a Default.js file, so you’ll see that link as well:
<head>
<title>Currency Converter</title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="scripts/Default.js" type="text/javascript" ></script>
</head>
The beginning part of my Default.js file contains a lot of code to get the page ready to handle certain events. Everything is contained in the $(document).ready event and I have separate events for the buttons (Convert and ShowGraph) as well the change event on the currency selector. I also included a toggle option to choose to run the page as ASP.NET or jQuery. If ASP.NET is chosen, all of the JavaScript is basically ignored. If jQuery is chosen, the code is executed when the events fire and the even.PreventDefault() command executed. This code will prevent something like a button from submitting form data if that’s its default behavior.
$(document).ready(function() {
$("#Convert").click(function(event) {
ShowConversionResult();
ShowGraph();
if ($("#jqueryToggle").val() * 1) {
event.preventDefault();
}
});
$("#Currency").change(function(event) {
ShowConversionResult();
ShowGraph();
});
$("#ShowGraph").click(function(event) {
ShowGraph();
if ($("#jqueryToggle").val() * 1) {
event.preventDefault();
}
});
});
Here is the ShowConversionResult() function. You’ll see a few things going on here. This was a good opportunity for me to learn basic dynamic typing using JavaScript and learn some tricks for dealing with numbers and testing conditions. I also learned a little about CSS styling using jQuery.
function ShowConversionResult() {
if ($("#jqueryToggle").val() * 1) {
var oldAmount = $("#US").val() * 1;
if (isNaN(oldAmount))
oldAmount = 0;
if (oldAmount <= 0) {
$("#Result").css("color", "red").text("Specify a positive number");
}
else {
$("#Result").css("color", "black");
var newAmount = oldAmount * $("#Currency").val();
$("#Result").text(oldAmount.toFixed(2) + " U.S. dollars = " + newAmount.toFixed(2) + " " +
$("#Currency :selected").text());
}
}
}
Here’s the ShowGraph() function of my code. This part was interesting because the ASP.NET example starts with the graph image disabled when the page loads. When an element is disabled in ASP.NET, no HTML code will be produced for that element unless the control is enabled on a post-back, which is exactly how the ASP.NET application functions. However, I wanted to solve this problem using jQuery, so I needed to be able to work with the Graph element even if it did not yet exist.
The line of code that says “if ($("#Graph").length != 0) {“ is testing for the existence of the Graph element. If it exists, it simply changes the source attribute of the element and the new graph is loaded. If not, it dynamically generates HTML for the graph element and appends it to the “GraphContainer” div tag (which I had to create in order for this to work; it wasn’t part of the original ASP.NET solution).
function ShowGraph() {
if ($("#jqueryToggle").val() * 1) {
var src = "pic" + $("#Currency").attr("selectedIndex") + ".png"
//Test to see if the Graph element exists:
if ($("#Graph").length != 0) {
$("#Graph").attr("src", src)
}
else {
var html = "<img src=\"" + src + "\" alt=\"Currency Graph\" id=\"Graph\" />"
$("#GraphContainer").append(html)
}
}
}
Overall, this was a fun project to learn some of the basics of jQuery while at the same time learning ASP.NET. JavaScript can make for a richer user experience for the client and jQuery certainly makes for a better experience for the developer. My next post will show how to hack an existing page using jQuery to make images load dynamically instead of making a full trip to the server.
: 
