The goal of this blog entry is to describe how you can host a simple Ajax
application created with jQuery in the
Windows Azure cloud. In this blog entry, I make no assumptions. I assume that you have never used
Windows Azure and I am going to walk through the steps required to host the
application in the cloud in agonizing detail. Our
application will consist of a single HTML page and a single service. The HTML page will contain jQuery code that invokes the service to retrieve and display set of records. There are five steps that you must complete to host the jQuery application: Sign up for
Windows Azure Create a Hosted Service Install the
Windows Azure Tools for Visual Studio Create a
Windows Azure Cloud Service Deploy the Cloud Service Sign Up for
Windows Azure Go to http://www.microsoft.com/windowsazure/ and click the Sign up Now button. Select one of the offers. I selected the Introductory Special offer because it is free and I just wanted to experiment with
Windows Azure for the purposes of this blog entry. To sign up, you will need a
Windows Live ID and you will need to enter a credit card number. After you finish the sign up process, you will receive an email that explains how to activate your account. Accessing the Developer Portal After you create your account and your account is activated, you can access the
Windows Azure developer portal by visiting the following URL: http://windows.azure.com/ When you first visit the developer portal, you will see the one project that you created when you set up your
Windows Azure account (In a fit of creativity, I named my project StephenWalther). Creating a New
Windows Azure Hosted Service Before you can host an
application in the cloud, you must first add a hosted service to your project. Click your project on the summary page and click the New Service link. You are presented with the option of creating either a new Storage Account or a new Hosted Services. Because we have code that we want to run in the cloud – the WCF Service -- we want to select the Hosted Services option. After you select this option, you must provide a name and description for your service. This information is used on the developer portal so you can distinguish your services. When you create a new hosted service, you must enter a unique name for your service (I selected jQueryApp) and you must select a region for this service (I selected Anywhere US). Click the Create button to create the new hosted service. Install the
Windows Azure Tools for Visual Studio We’ll use Visual Studio to create our jQuery project. Before you can use Visual Studio with
Windows Azure, you must first install the
Windows Azure Tools for Visual Studio. Go to http://www.microsoft.com/windowsazure/ and click the Get Tools and SDK button. The
Windows Azure Tools for Visual Studio works with both Visual Studio 2008 and Visual Studio 2010. Installation of the
Windows Azure Tools for Visual Studio is painless. You just need to check some agreement checkboxes and click the Next button a few times and installation will begin: Creating a
Windows Azure
Application After you install the
Windows Azure Tools for Visual Studio, you can choose to create a
Windows Azure Cloud Service by selecting the menu option File, New Project and selecting the
Windows Azure Cloud Service project template. I named my new Cloud Service with the name jQueryApp. Next, you need to select the type of Cloud Service project that you want to create from the New Cloud Service Project dialog. I selected the C# ASP.NET Web Role option. Alternatively, I could have picked the ASP.NET MVC 2 Web Role option if I wanted to use jQuery with ASP.NET MVC or even the CGI Web Role option if I wanted to use jQuery with PHP. After you complete these steps, you end up with two projects in your Visual Studio solution. The project named WebRole1 represents your ASP.NET
application and we will use this project to create our jQuery
application. Creating the jQuery
Application in the Cloud We are now ready to create the jQuery
application. We’ll create a super simple
application that displays a list of records retrieved from a WCF service (hosted in the cloud). Create a new page in the WebRole1 project named Default.htm and add the following code: <!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>
<title>Products</title>
<style type="text/css">
#productContainer div {
border:solid 1px black;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<h1>Product Catalog</h1>
<div id="productContainer"></div>
<script id="productTemplate" type="text/html">
<div>
Name: {{= name }} <br />
Price: {{= price }}
</div>
</script>
<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
var products = [
{name:"Milk", price:4.55},
{name:"Yogurt", price:2.99},
{name:"Steak", price:23.44}
];
$("#productTemplate").render(products).appendTo("#productContainer");
</script>
</body>
</html>
The jQuery code in this page simply displays a list of products by using a template. I am using a jQuery template to format each product. You can learn more about using jQuery templates by reading the following blog entry by Scott Guthrie:
http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx
You can test whether the Default.htm page is working correctly by running your
application (hit the F5 key). The first time that you run your
application, a database is set up on your local machine to simulate cloud storage. You will see the following dialog:
If the Default.htm page works as expected, you should see the list of three products:
Adding an Ajax-Enabled WCF Service
In the previous section, we created a simple jQuery
application that displays an array by using a template. The
application is a little too simple because the data is static. In this section, we’ll modify the page so that the data is retrieved from a WCF service instead of an array.
First, we need to add a new Ajax-enabled WCF Service to the WebRole1 project. Select the menu option Project, Add New Item and select the Ajax-enabled WCF Service project item. Name the new service ProductService.svc.
Modify the service so that it returns a static collection of products. The final code for the ProductService.svc should look like this:
using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Activation;
namespace WebRole1 {
public class Product {
public string name { get; set; }
public decimal price { get; set; }
}
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class ProductService {
[OperationContract]
public IList<Product> SelectProducts() {
var products = new List<Product>();
products.Add(new Product {name="Milk", price=4.55m} );
products.Add(new Product { name = "Yogurt", price = 2.99m });
products.Add(new Product { name = "Steak", price = 23.44m });
return products;
}
}
}
In real life, you would want to retrieve the list of products from storage instead of a static array. We are being lazy here.
Next you need to modify the Default.htm page to use the ProductService.svc. The jQuery script in the following updated Default.htm page makes an Ajax call to the WCF service. The data retrieved from the ProductService.svc is displayed in the client template.
<!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>
<title>Products</title>
<style type="text/css">
#productContainer div {
border:solid 1px black;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<h1>Product Catalog</h1>
<div id="productContainer"></div>
<script id="productTemplate" type="text/html">
<div>
Name: {{= name }} <br />
Price: {{= price }}
</div>
</script>
<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
$.post("ProductService.svc/SelectProducts", function (results) {
var products = results["d"];
$("#productTemplate").render(products).appendTo("#productContainer");
});
</script>
</body>
</html>
Deploying the jQuery
Application to the Cloud
Now that we have created our jQuery
application, we are ready to deploy our
application to the cloud so that the whole world can use it. Right-click your jQueryApp project in the Solution Explorer window and select the Publish menu option.
When you select publish, your
application and your
application configuration information is packaged up into two files named jQueryApp.cspkg and ServiceConfiguration.cscfg. Visual Studio opens the directory that contains the two files.
In order to deploy these files to the
Windows Azure cloud, you must upload these files yourself. Return to the
Windows Azure Developers Portal at the following address:
http://windows.azure.com/
Select your project and select the jQueryApp service. You will see a mysterious cube. Click the Deploy button to upload your
application.
Next, you need to browse to the location on your hard drive where the jQueryApp project was published and select both the packaged
application and the packaged
application configuration file. Supply the deployment with a name and click the Deploy button.
While your
application is in the process of being deployed, you can view a progress bar.
Running the jQuery
Application in the Cloud
Finally, you can run your jQuery
application in the cloud by clicking the Run button.
It might take several minutes for your
application to initialize (go grab a coffee). After WebRole1 finishes initializing, you can navigate to the following URL to view your live jQuery
application in the cloud:
http://jqueryapp.cloudapp.net/default.htm
The page is hosted on the
Windows Azure cloud and the WCF service executes every time that you request the page to retrieve the list of products.
Summary
Because we started from scratch, we needed to complete several steps to create and deploy our jQuery
application to the
Windows Azure cloud. We needed to create a
Windows Azure account, create a hosted service, install the
Windows Azure Tools for Visual Studio, create the jQuery
application, and deploy it to the cloud. Now that we have finished this process once, modifying our existing cloud
application or creating a new cloud
application is easy.
jQuery and
Windows Azure work nicely together. We can take advantage of jQuery to build applications that run in the browser and we can take advantage of
Windows Azure to host the backend services required by our jQuery
application.
The big benefit of
Windows Azure is that it enables us to scale. If, all of the sudden, our jQuery
application explodes in popularity,
Windows Azure enables us to easily scale up to meet the demand. We can handle anything that the Internet might throw at us.
