技术开发 频道

VS2010实践:在云中运行Silverlight应用

  【IT168专稿】我最近的工作使用到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项目就添加到总的解决方案中了。

 网页中嵌入适当的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验证它是否工作正常,至此,开发,升级部署和生产部署全部成功!

0
相关文章