I was working through some scenarios recently with Azure and Silverlight. I immediately decided a quick walk through for setting up a Silverlight Application running in an ASP.NET MVC 2 Application would be a cool project. This walk through I have Visual Studio 2010, Silverlight 4, and
the Azure SDK all installed. If you need to download any of those go get em? now. Launch Visual Studio 2010 and start a new project. Click on
the section for cloud templates as shown below. After you name
the project,
the dialog for what type of Windows Azure Cloud Service Role will display. I selected ASP.NET MVC 2 Web Role, which adds
the MvcWebRole1 Project to
the Cloud Service Solution. Since I selected
the ASP.NET MVC 2 Project type, it immediately prompts for a unit test project. Because I just want to get everything running first, I will probably be unit testing
the Silverlight and just using
the MVC Project as a host for
the Silverlight for now, and because I would prefer to just add
the unit test project later, I am going to select no here. Once you've created
the ASP.NET MVC 2 project to host
the Silverlight, then create another new project. Select
the Silverlight section under
the Installed Templates in
the Add New Project dialog. Then select Silverlight Application.
The next dialog that comes up will inquire about using
the existing ASP.NET MVC Application I just created, which I do want it to use that so I leave it checked.
The options section however I do not want to check RIA Web Services, do not want a test page added to
the project, and I want Silverlight debugging enabled so I leave that checked. Once those options are appropriately set, just click on OK and
the Silverlight Project will be added to
the overall solution.
The next steps now are to get
the Silverlight object appropriately embedded in
the web page. First open up
the Site.Master file in
the ASP.NET MVC 2 Project located under
the Veiws/Shared/ location. After you open
the file review
the content of
the <header></header> section. In that section add another <contentplaceholder></contentplaceholder> tag as shown in
the code snippet below. <head runat="server">
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeaderContent" runat="server" />
</head>
I usually put it toward
the bottom of
the header section. It just seems
the <title></title> should be on
the top of
the section and I like to keep it that way.
Now open up
the Index.aspx page under
the ASP.NET MVC 2 Project located in
the Views/Home/ directory. When you open up that file add a <asp:Content><asp:Content> tag as shown in
the next snippet.
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID=headerContent ContentPlaceHolderID=HeaderContent runat=server>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
</asp:Content>
In that center tag, I am now going to add what is needed to appropriately embed
the Silverlight object into
the page.
The first thing I needed is a reference to
the Silverlight.js file.
<script type="text/javascript" src="Silverlight.js"></script>
After that comes a bit of nitty gritty Javascript. I create another tag (and for those in
the know, this is exactly like
the generated code that is dumped into
the *.html page generated with any Silverlight Project if you select to "add a test page that references
the application".
The complete Javascript is below.
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError") {
return;
}
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n";
errMsg += "Code: " + iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
I literally, since it seems to work fine, just use what is populated in
the automatically generated page. After getting
the appropriate Javascript into place I put
the actual Silverlight Object Embed code into
the HTML itself. Just so I know
the positioning and for final verification when running
the application I insert
the embed code just below
the Index.aspx page message. As shown below.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>
<%= Html.Encode(ViewData["Message"]) %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>.
</p>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="ClientBin/CloudySilverlight.xap" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration: none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
style="border-style: none" />
</a>
</object>
<iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;
border: 0px"></iframe>
</div>
</asp:Content>
I then open up
the Silverlight Project MainPage.xaml. Just to make it visibly obvious that
the Silverlight Application is running in
the page, I added a button as shown below.
<UserControl x:Class="CloudySilverlight.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="48,40,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
</Grid>
</UserControl>
Just for kicks, I added a message box that would popup, just to show executing functionality also.
private void button1_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("It runs in
the cloud!");
}
I then executed
the ASP.NET MVC 2 and could see
the Silverlight Application in page. With a quick click of
the button, I got a message box. Success!
Now
the next step is getting
the ASP.NET MVC 2 Project and Silverlight published to
the cloud. As of Visual Studio 2010, Silverlight 4, and
the latest Azure SDK, this is actually a ridiculously easy process.
Navigate to
the Azure Cloud Services web site.
Once that is open go back in Visual Studio and right click on
the cloud project and select publish.
This will publish two files into a directory. Copy that directory so you can easily paste it into
the Azure Cloud Services web site. You'll have to click on
the application role in
the cloud (I will have another blog entry soon about where, how, and best practices in
the cloud).
In
the text boxes shown, select
the application package file and
the configuration file and place them in
the appropriate text boxes. This is
the part were it comes in handy to have copied
the directory path of
the file location. That way when you click on browser you can just paste that in, then hit enter.
The two files will be listed and you can select
the appropriate file.
Once that is done, name
the service deployment. Then click on publish. After a minute or so you will see
the following screen.
Now click on run. Once
the MvcWebRole1 goes
green (the little light symbol to
the left of
the status) click on
the Web Site URL. Be patient during this process too, it could take a minute or two.
The Silverlight application should again come up just like you ran it on your local machine.
Once staging is up and running, click on
the circular icon with two arrows to move staging to production. Once you are done make sure
the green light is again go for
the production deploy, then click on
the Web Site URL to verify
the site is working. At this point I had a successful development, staging, and production deployment.
Thanks for reading, hope this was helpful. I have more Windows Azure and other cloud related material coming, so stay tuned.
Original Entry
