In this post, I will demonstrate a Windows Azure app using Azure Queue, Azure Table and a ASP.NET MVC 4 Web Role application. This post is explaining few initial steps for building a demo Azure app where asynchronous commands (write operations that changes the data) put into Azure Queue and an Azure Work Role will persist the data into Azure Table from Queue messages for the read operations. The source code is available from http://azurehack.codeplex.com/ .The demo application will modify and add more functionality on later.
Windows Azure Storage Services
The Windows Azure storage services provide the following services that are secure, scalable and easy to access that remain persistent and durable storage in the cloud.
Binary Large Object (BLOB) – BLOB service is the file system in the cloud which provide storage for large pieces of data, such as images, video, documents etc. BLOB is the simplest way to store text or binary data on Windows Azure.
Tables – Windows Azure Table Storage Service provides queryable structured storage.Table Storage service is very similar to NoSQL databases that lets you to massively scalable your apps.
Queues – Queue service provides reliable storage and delivery of messages and can be use for messaging between Web and Worker role instances.
Drives – Windows Azure Drive provides durable NTFS volumes for Windows Azure applications.
Demo Windows Azure App
In our demo app, all database write commands will be perform in an asynchronous way and these command messages will send to Azure Queue. A worker role will retrieve the Queue messages and will persist the data into Azure Table. The web role app is built with ASP.NET MVC 4. In this simple demo app, we are creating Customer entity data and these data will list in a AS.NET MVC view page from a Azure Table. The request for creating a new Customer data will write a message to Azure Queue. The below class is representing the write command for creating new Customer
public class NewCustomerCommand : AzureQueueMessage
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Address { get; set; }
public string Phone { get; set; }
public string Email { get; set; }
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
The new NewCustomerCommand is inherited from a class AzureQueueMessage. The AzureQueueMessage class is the base class for the Azure Queue messages.The AzureQueueMessage class is shown below
public abstract class AzureQueueMessage
{
public string Id { get; set; }
public string PopReceipt { get; set; }
public int DequeueCount { get; set; }
public DateTime? InsertionTime { get; set; }
public DateTime? ExpirationTime { get; set; }
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
We are using strongly typed Azure Queue message. The below code block shows the contract type for our strongly type Azure Queue
public interface IAzureQueue<T> where T : AzureQueueMessage
{
void EnsureExist();
void Clear();
void AddMessage(T message);
T GetMessage();
T GetMessage(TimeSpan timeout);
IEnumerable<T> GetMessages(int maxMessagesToReturn);
void DeleteMessage(T message);
void DeleteMessage(CloudQueueMessage message);
void DeleteQueue();
int ApproximateMessageCount { get; }
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Creating Queue messages from ASP.NET MVC Controller
The below code block in the ASP.NET MVC action method will create the strongly typed queue message with type NewCustomerCommand. The write command NewCustomerCommand is representing the operation for creating a new Customer entity.
CloudStorageAccount account;
public CustomerController()
{
account = CloudStorageAccount.
FromConfigurationSetting("DataConnectionString");
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
[HttpPost]
public ActionResult Create(CustomerFormModel formModel)
{
if (ModelState.IsValid)
{
AzureQueue<NewCustomerCommand> queue = new
AzureQueue<NewCustomerCommand>(account);
queue.AddMessage(new NewCustomerCommand
{
FirstName = formModel.FirstName,
LastName = formModel.LastName,
Address = formModel.Address,
Phone = formModel.Phone,
Email = formModel.Email
});
return RedirectToAction("Index");
}
return View(formModel);
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
The class AzureQueue is a strongly typed Azure Queue. We are adding a message to the Queue with the information of NewCustomerCommand. A worker role will look on the Queue message and will perform the operations for our command.
Processing Queue messages in Worker Role
The Worker Role is similar to a windows service and mainly using for background processing. In our application, we are using the Worker Role for processing the Queue message send from Web Role application. The Azure Queue is a great way to communicate between Web Role and Worker Role.
In the following code block in Worker Role, we are creating a strongly typed Queue with NewCustomerCommand and getting the unprocessed Queue messages from the Queue. After that, the data of the each Queue message is using for creating a Customer entity and will persist this data into Azure Table. The Table storage can be use for read operations of our application. We are deleting the Queue message after persisting the Customer entity into Azure Table.
var account = CloudStorageAccount.
FromConfigurationSetting("DataConnectionString");
AzureQueue<NewCustomerCommand> queue = new
AzureQueue<NewCustomerCommand>(account);
queue.EnsureExist();
while (true)
{
try
{
var message = queue.GetMessage();
if (message != null)
{
AzureTable<Customer> table = new AzureTable<Customer>(account);
var guiid= Guid.NewGuid().ToString();
table.AddEntity( new Customer
{
Id = Guid.NewGuid().ToString(),
PartitionKey = guiid,
RowKey = message.FirstName,
FirstName = message.FirstName,
LastName=message.LastName,
Address=message.Address,
Phone=message.Phone,
Email=message.Email
});
queue.DeleteMessage(message);
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
}
}
catch { }
Thread.Sleep(5000);
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
We are using a Azure Table entity Customer for persisting the Customer data. The Customer Table entity is shown below
public class Customer : TableServiceEntity
{
public string Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Address { get; set; }
public string Phone { get; set; }
public string Email { get; set; }
}
The Customer entity is inherited from TableServiceEntity for making the Customer entity as a Azure Table. The TableServiceEntity provides properties PartionKey, RowKey and Timestamp. The server manages the value of Timestamp, which cannot be modified. We need to update the values of PartitionKey and RowKey.The partition key is a unique identifier for the partition within a given table, specified by the PartitionKey property. The partition key forms the first part of an entity's primary key. The second part of the primary key is the row key, specified by the RowKey property. The row key is a unique identifier for an entity within a given partition. Together the PartitionKey and RowKey uniquely identify every entity within a table.
The AzureTable class is using for the all CRUD operations for Azure Table. The below code block shown the contract type of AzureTable class.
public interface IAzureTable<TEntity> where TEntity : TableServiceEntity
{
IQueryable<TEntity> Query { get; }
bool CreateIfNotExist();
bool DeleteIfExist();
void AddEntity(TEntity obj);
void AddEntity(IEnumerable<TEntity> objs);
void AddOrUpdateEntity(TEntity obj);
void AddOrUpdateEntity(IEnumerable<TEntity> objs);
void DeleteEntity(TEntity obj);
void DeleteEntity(IEnumerable<TEntity> objs);
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Reading the data in ASP.NET MVC App
We are showing the Customer data from Azure table and periodically refresh the data using Ajax. The following code in the ASP.NET MVC action method querying the data from Azure Table Customer.
public ActionResult Index()
{
AzureTable<Customer> table = new AzureTable<Customer>(account);
var customers = table.Query;
if (Request.IsAjaxRequest())
{
return PartialView("_List", customers);
}
return View(customers);
}
Since our write command is working in an asynchronous way, we are refreshing the
view page periodically using Ajax for latest data
@model IEnumerable<AzureHacks.Domain.Models.Customer>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<div id="CustomerList">
@Html.Partial("_List", Model)
</div>
<script type="text/javascript">
$(function () {
setInterval(function () {
$.get('@Url.Action("Index")', {}, function (view) {
$("#CustomerList").html(view);
})
},5000);
});
</script>
Source Code
The source code can be download from http://azurehack.codeplex.com/
Summary
This post is an initial step for building a demo app on the Windows Azure. We have discussed Azure storage services Queue and Table and explored the Worker Role for processing Queue messages. Azure Queue is a great way to communicate between Web Role and Worker Role. And the Azure Table is providing a great way to store massively scalable structured data that is available for querying the data. We are are performing our commands in an asynchronous way and Azure Table is using for our read operations.
