在云中运行Silverlight应用

我最近的工作使用到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文件，在部分添加下面的代码片段：

"server">
    
        "TitleContent" runat="server" />
    
    "../../Content/Site.css" rel="stylesheet" type="text/css" />
    "HeaderContent" runat="server" />

 

我通常将其放于header的末尾部分，这样总是居于顶部，看起来顺眼些。

　　接下来打开位于Views/Home/ directory下ASP.NET MVC 2项目的Index.aspx文件，添加下面的代码

"Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page






"Content2" ContentPlaceHolderID="MainContent" runat="server">
    

    

        

To learn more about ASP.NET MVC visit "http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc.
    

在center标记处，我们嵌入了Silverlight对象，首先我们要引用Silverlight.js文件。

"text/javascript" src="Silverlight.js">

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中插入下面的代码：

"Content2" ContentPlaceHolderID="MainContent" runat="server">
    

        

    

        

To learn more about ASP.NET MVC visit "http://asp.net/mvc" title="ASP.NET MVC Website">
            http://asp.net/mvc.
    
    

"silverlightControlHost" >
        < object data= "data:application/x-silverlight-2," type= "application/x-silverlight-2"
            width= "100%" height= "100%" >
            "source" value="ClientBin/CloudySilverlight.xap" />
            "onError" value="onSilverlightError" />
            "background" value="white" />
            "minRuntimeVersion" value="4.0.50401.0" />
            "autoUpgrade" value="true" />
            "http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration: none">
                "http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
                    style="border-style. none" />
            
        object>
        "_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;
            border: 0px">
    

接着打开Silverlight项目的MainPage.xaml文件，为了让Silverlight应用程序运行在这个页面中，我增加了一个按钮。

"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">

    "LayoutRoot" Background="White">
        "Button" Height="23" HorizontalAlignment="Left" Margin="48,40,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
    

我添加了一个弹出消息框，显示执行的功能。

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验证它是否工作正常，至此，开发，升级部署和生产部署全部成功!

 

1.jpg

2.JPG

3.JPG

4.JPG

5.JPG

6.JPG

7.JPG

8.JPG

9.JPG

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/9913695/viewspace-666764/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/9913695/viewspace-666764/