VS2010实践:在云中运行Silverlight应用
首先启动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文件，在部分添加下面的代码片段：
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><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文件，添加下面的代码：
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><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/mvca>.
p>
asp:Content>
在center标记处，我们嵌入了Silverlight对象，首先我们要引用Silverlight.js文件。
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><script. type="text/javascript" src="Silverlight.js">script>
JavaScript模板内容如下：
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->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中插入下面的代码：
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><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/mvca>.
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">
div>
asp:Content>
