Combining Silverlight and Windows Azure projects

Standard Silverlight applications require that they be hosted on HTML pages, so that they can be loaded in a browser. Developers who work with the .Net framework will usually host this page within an ASP.Net website.

The easiest way to host a Silverlight application on Azure is to create a single web role that contains an ASP.Net application to host the Silverlight application. Hosting the Silverlight application in this way enables you, as a developer, to take advantage of the full .Net framework to support your Silverlight application. Supporting functionalities can be provided such as hosting WCF services, RIA services, Entity Framework, and so on.

In the upcoming chapters, we will explore ways by which RIA services, OData, Entity Framework, and a few other technologies can be used together. For the rest of this chapter, we will focus on the basics of hosting a Silverlight application within Azure and integrating a hosted WCF service.

Creating a Silverlight or Azure solution

Your system should already be fully configured with all Silverlight and Azure tools.

In this section, we are going to create a simple Silverlight application that is hosted inside an Azure web role. This will be the basic template that is used throughout the book as we explore different ways in which we can integrate the technologies together:

1. 1. Start Visual Studio as an administrator. You can do this by opening the Start Menu and finding Visual Studio, then right-clicking on it, and selecting Run as Administrator. This is required for the Azure compute emulator to run successfully.
   2. Create a new Windows Azure Cloud Service. The solution name used in the following example screenshot is Chapter3Exercise1:

(Move the mouse over the image to enlarge.)

1. 1. Add a single ASP.Net Web Role as shown in the following screenshot. For this exercise, the default name of WebRole1 will be used. The name of the role can be changed by clicking on the pencil icon next to the WebRole1 name:

1. 1. Visual Studio should now be loaded with a single Azure project and an ASP. Net project. In the following screenshot, you can see that Visual Studio is opened with a solution named Chapter3Exercise1. The solution contains a Windows Azure Cloud project, also called Chapter3Exercise1. Finally, the ASP.Net project can be seen named as WebRole1:

1. 1. Right-click on the ASP.Net project named WebRole1 and select Properties.
   2. In the WebRole1 properties screen, click on the Silverlight Applications tab.
   3. Click on Add to add a new Silverlight project into the solution. The Add button has been highlighted in the following screenshot:

1. 1. For this exercise, rename the project to HelloWorldSilverlightProject. Click on Add to create the Silverlight project. The rest of the options can be left to their default settings, as shown in the following screenshot.

1. 1. Visual Studio will now create the Silverlight project and add it to the solution. The resulting solution should now have three projects as shown in the following screenshot. These include the original Azure project, Chapter3Exercise1; the ASP.Net web role, WebRole1; and the third new project HelloWorldSilverlightProject:

1. 1. Open MainPage.xaml in design view, if not already open.
   2. Change the grid to a StackPanel.
   3. Inside the StackPanel, add a button named button1 with a height of 40 and a content that displays Click me!.
   4. Inside the StackPanel, underneath button1, add a text block named textBlock1 with a height of 20
   5. The final XAML should look similar to this code snippet:

<UserControl>
<StackPanel x_Name=”LayoutRoot” Background=”White”>
<Button x_Name=”button1″ Height=”40″
Content=”Click me!” />
<TextBlock x_Name=”textBlock1″ Height=”20″ />
</StackPanel>
</UserControl>

1. 1. Double-click on button1 in the designer to have Visual Studio automatically create a click event. The final XAML in the designer should look similar to the following screenshot:

1. 1. Open the MainPage.xaml.cs code behind the file and find the button1_Click method. Add a code that will update textBlock1 to display Hello World and the current time as follows:

private void button1_Click(object sender, RoutedEventArgs e)
{
textBlock1.Text = “Hello World at ” +
DateTime.Now.ToLongTimeString();
}

1. Build the project to ensure that everything compiles correctly.Now that the solution has been built, it is ready to be run and debugged within the Windows Azure compute emulator. The next section will explore what happens while running an Azure application on the compute emulator.

Running an Azure application on the Azure compute emulator

With the solution built, it is ready to run on the Azure simulation: the compute emulator. The compute emulator is the local simulation of the Windows Azure compute emulator which Microsoft runs on the Azure servers it hosts.

When you start debugging by pressing F5 (or by selecting Debug | Start Debugging from the menu), Visual Studio will automatically package the Azure project, then start the Azure compute emulator simulation. The package will be copied to a local folder used by the compute emulator. The compute emulator will then start a Windows process to host or execute the roles, one of which will be started as per the instance request for each role.

Once the compute emulator has been successfully initialized, Visual Studio will then launch the browser and attach the debugger to the correct places. This is similar to the way Visual Studio handles debugging of an ASP.Net application with the ASP. Net Development Server.

The following steps will take you through the process of running and debugging applications on top of the compute emulator:

1. 1. In Solution Explorer, inside the HelloWorldSilverlightProject, right-click on HelloWorldSilverlightProjectTestPage.aspx, and select Set as startup page.
   2. Ensure that the Azure project (Chapter3Exercise1) is still set as the start-up project.
   3. In Visual Studio, press F5 to start debugging (or from the menu select Debug | Start Debugging). Visual Studio will compile the project, and if successful, begins to launch the Azure compute emulator as shown in the following screenshot:

1. 1. Once the compute emulator has been started and the Azure package deployed to it, Visual Studio will launch Internet Explorer. Internet Explorer will display the page set as the start-up page (which was set to in an earlier step HelloWorldSilverlightProjectTestPage.aspx).
   2. Once the Silverlight application has been loaded, click on the Click me! button. The TextBlock should be updated with the current time, as shown in the following screenshot:

Upon this completion, you should now have successfully deployed a Silverlight application on top of the Windows Azure compute emulator. You can now use this base project to build more advanced features and integration with other services.

Consuming an Azure-hosted WCF service within a Silverlight application

A standalone Silverlight application will not be able to do much by itself. Most applications will require that they consume data from a data source, such as to get a list of products or customer orders. A common way to send data between .Net applications is through WCF services.