减小字体
增大字体- ·上一篇文章：.net实践:RSClientPrint打印本地报表
- ·下一篇文章：Repeater 控件
VS2010实践:在云中运行Silverlight应用
：2010-06-23 20:36:00
【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>
<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>
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);
}
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>
<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>
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>
我添加了一个弹出消息框，显示执
VS2010实践:在云中运行Silverlight应用
