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.
