【Visual Studio 2010 Demo大赛专稿】我最近的工作使用到Azure和Silverlight，我决定创建一个Silverlight程序，让它在ASP.NET MVC2应用程序中运行，我想一定很酷。本次实验使用了Visual Studio 2010，Silverlight 4和Azure SDK。
首先启动Visual Studio 2010新建一个项目，点击已安装的模板，选择Windows Azure Cloud Service模板，如图1所示。
图 1 选择Windows Azure Cloud Service模板
给项目命名后，将会显示一个Windows Azure Cloud Service角色类型的对话框，我选择了ASP.NET MVC 2 Web Role，它会自动向云服务解决方案列表框中增加一个MvcWebRole1项目，如图2所示。
图 2 选择ASP.NET MVC 2 Web Role角色，自动增加MvcWebRole1项目
因为我选择了ASP.NET MVC 2项目类型，它立即提示创建一个单元测试项目，因为我只是想让所有事情都先运行起来，因此可能只会对Silverlight程序执行单元测试，而MVC项目只不过是为Silverlight运行提供一个宿主环境而已，因此我宁愿以后再为它添加单元测试，于是这里我选择了不创建单元测试，如图3所示。
图 3 不创建单元测试项目
当创建好ASP.NET MVC 2项目托管Silverlight后，再创建一个新项目，在新建项目对话框中，选择Silverlight Application模板，如图4所示。
图 4 创建Silverlight应用程序
接下来的对话框将会要求我们提供创建好的ASP.NET MVC应用程序项目，如图5所示，点击确定后，Silverlight项目就添加到总的解决方案中了。
图 5 新建Silverlight项目设置对话框
下一步是在网页中嵌入适当的Silverlight对象，首先打开Veiws/Shared/ location下ASP.NET MVC 2项目的Site.Master文件，在部分添加下面的代码片段：
<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>
我通常将其放于header的末尾部分，这样总是居于顶部，看起来顺眼些。
接下来打开位于Views/Home/ directory下ASP.NET MVC 2项目的Index.aspx文件，添加下面的代码：
<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>
在center标记处，我们嵌入了Silverlight对象，首先我们要引用Silverlight.js文件。
<script type="text/javascript" src="Silverlight.js"></script>
JavaScript模板内容如下：
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);
}
然后我又在Index.aspx中插入下面的代码：
<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>
接着打开Silverlight项目的MainPage.xaml文件，为了让Silverlight应用程序运行在这个页面中，我增加了一个按钮。
<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>
我添加了一个弹出消息框，显示执行的功能。
private void button1_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("It runs in the cloud!");
}
然后我开始执行ASP.NET MVC 2应用程序，看到Silverlight应用程序确实运行在它里面，点击一下那个按钮，弹出了设置的消息，试验成功!
现在我要将ASP.NET MVC 2项目和Silverlight发布到云中，其实在Visual Studio 2010下，有Silverlight 4和最新的Azure SDK，这个发布过程实在简单得有点荒谬了。
首先进入Azure云服务网站，如下图所示。
图 6 进入Azure云服务网站
进去后，返回到Visual Studio 2010中，在云项目上点击右键，选择发布。
图 7 准备发布云项目
这个操作将会发布两个文件到一个目录中，拷贝这个目录将其粘贴到Azure云服务网站中。
图 8 选择发布的两个本地文件
在这里直接复制文件的路径即可，然后起一个服务部署名字，最后点击发布，稍等一会就看到如下图所示的页面。
图 9
现在可以点击运行按钮，当MvcWebRole1变成绿色时(它左边的小圆部分变成绿色)，点击位于它下方的网站URL，由于这个过程要执行的事情太多，因此需要等上一阵子，Silverlight应用程序将会和之前在本地运行那样运行在云平台上。
运行起来后，点击带有两个箭头的循环图标，将其移动到生产阶段，完成后确保绿灯再次为生产部署亮起，再次点击网站URL验证它是否工作正常，至此，开发，升级部署和生产部署全部成功!
