Silverlight--整合到asp.net网站

香水坏坏 发表于 2007-8-29 [silverlight]

介绍（PS：有些不厌其烦了，不过多读一篇，应该木坏处的）：
Silverlight是执行丰富煤体交互的一项新的微软技术。它能作为插件被兼入什么浏览器并且没任何平台约束。这篇文章，将告诉你如何把silverlight工程应用到asp.net网站。

需要准备的工作
首先我们需要去下载并安装一个新的IDE开发环境 VS2008 Beta2

(PS：这些工具都可以在我前面发布的[silverlight下载：开发工具]中找到)

用VS2008 BETA 2创建silverlight工程还需要下载一个silverlight额外组件。

当我们安装完这些后，就可以使用VS里的silverlight工程的工程模版。

概念
silverlight基于用xml描叙语言来描叙UI-elements的xaml。如果你正在寻找这方面的资料，请访问这里。由于xaml，把GUI和执行从软件中分离将成为可能。设计师们可以用工具如Expression Blend以xaml的形式开发GUI,开发人员则可以用VS2008来构造GUI的执行。你可以象asp.net里的aspx-pages一样用codebehind概念来理解。

用silverlight工程模版创建一个silverlight工程后，将自动为你生成一些样例文件，让你来开始你的silverlight。在这篇文章里，将告诉你如何把xaml从html-page拿出来并整和到一个asp.net页面。

程序
1 Silverlight工程
OK，让我们来看看。如果已经完全安装好必要的开发工具后，我们在VS2008 Beta2里点击File->New-Project将看到如下的图片：

 

现在我们可以创建我们的第一个silverlight工程了。输入个如SilverlightSamplePro的名字并点OK。接下来将自动生成如下文件：
Page.xaml:
你可以描叙你的UI-元素在这个页里。

Page.xaml.cs:
在这里执行GUI的逻辑。他是我们通常用的C#代码

Silverlight.js:
在这个javascript文件里你需要创建一个在HTML或ASPX页的Silverlight控件来显示xaml的内容


TestPage.html:
这个HTML页包含被兼入的Silverlight控件

2 ASP.NET网站
OK，如上面我们提到的，我们将要把silverlight控件整和到一个asp.net网站。为了这么做，我们需要从testpage.html里提取control的一部分到一个aspx页。但是aspx页是如何获取这个page.xaml的呢？

首先我们需要添加一个asp.net网站到解决方案。在解决方案浏览器里面点Add->New WebSite，这样网站就被添加到我们的解决方案里了。

3 在网站中整和silverlight
在解决方案浏览器里右键点网站让后选择ADD Silverlight Link:

OK,这是第一步。接下来浏览testpage.html里的生成silverlight控件的html和javascript代码。

XML/HTML代码
  1. <head>  
  2.     <title>Silverlight Project Test Page </title>  
  3.        
  4.     <script type="text/javascript" src="Silverlight.js"></script>  
  5.     <script type="text/javascript" src="TestPage.html.js"></script>  
  6.   
  7. </head>  
  8.   
  9. <body>  
  10.     <div id="SilverlightControlHost">  
  11.         <script type="text/javascript">  
  12.             createSilverlight();   
  13.         </script>  
  14.     </div>  
  15. </body>  
  16. </html>  

如我们所看到，这个控件是由silverlight.js里的javascript函数创造的。因此我们需要通过Copy和Paste把这个js文件添加到我们的网站里。我们添加一个新的javascript文件到网站后，命名为xamlpagecreation.js。这个文件将包含在testpage.html.js里面的代码。

JavaScript代码
  1. // JScript source code   
  2.   
  3. //contains calls to silverlight.js, example below loads Page.xaml   
  4. function createSilverlight( xamlPage )   
  5. {   
  6.     Silverlight.createObjectEx({   
  7.         source: xamlPage,   
  8.         parentElement: document.getElementById("SilverlightControlHost"),   
  9.         id: "SilverlightControl",   
  10.         properties: {   
  11.             width: "100%",   
  12.             height: "100%",   
  13.             version: "1.1",   
  14.             enableHtmlAccess: "true"  
  15.         },   
  16.         events: {}   
  17.     });   
  18.           
  19.     // Give the keyboard focus to the Silverlight control by default   
  20.     document.body.onload = function() {   
  21.       var silverlightControl = document.getElementById('SilverlightControl');   
  22.       if (silverlightControl)   
  23.       silverlightControl.focus();   
  24.     }   
  25.   
  26. }   
  27.   

我们稍微做点改动。我们添加下面的参数到一个用来创建xaml页的普通方法createSilverlight，用来显示silverlight控件。

XML/HTML代码
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title>Integrating Silverlight in aspx</title>  
  4.        
  5.     <script type="text/javascript" src="Silverlight.js"></script>  
  6.     <script type="text/javascript" src="XamlPageCreation.js"></script>  
  7.   
  8. </head>  
  9. <body>  
  10.     <form id="frmMain" runat="server">  
  11.     <div id="SilverlightControlHost" >  
  12.         <script type="text/javascript">  
  13.             createSilverlight( 'Page.xaml' );   
  14.         </script>  
  15.     </div>  
  16.     </form>  
  17. </body>  
  18. </html>  
  19.   

显示什么？
到目前为止我们的asp.net/silverlight示例并没有显示任何东西。感觉很没意思。那么，让我们开始编写我们的silverlight程序。我们能做什么？提议：让我们显示一个带文字提示的TextBlock让用户点击后来浏览文件。当点击TextBlock我们打开一个文件浏览对话框。选择一些文件后（是的，可以选择多项）并且点确定后，我们把这些文件名显示到TextBlock。对于第一天来说是不是感觉太难？其实不是。下面的xmal描叙了TextBlock以及MouseLeftButtonDown事件处理：

XML/HTML代码
  1. <Canvas x:Name="parentCanvas"  
  2.         xmlns="http://schemas.microsoft.com/client/2007"    
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  4.         Loaded="Page_Loaded"    
  5.         x:Class="SilverlightSamplePrj.Page;assembly=ClientBin/SilverlightSamplePrj.dll"  
  6.         Width="400"  
  7.         Height="400"  
  8.         Background="#EEEEEE"  
  9.         >  
  10.   
  11.   <TextBlock x:Name="txtFileName"  
  12.              Canvas.Top="5" Canvas.Left="5"    
  13.              Foreground="Black"  
  14.              Text="Click for OpenFileDialog"  
  15.              MouseLeftButtonDown="OnClick"/>  
  16.   
  17. </Canvas>  
  18.   

看起来非常直观容易。接下来是cs文件里的codebehind

 

C#代码
  1. using System;   
  2. using System.Windows;   
  3. using System.Windows.Controls;   
  4. using System.Windows.Documents;   
  5. using System.Windows.Ink;   
  6. using System.Windows.Input;   
  7. using System.Windows.Media;   
  8. using System.Windows.Media.Animation;   
  9. using System.Windows.Shapes;   
  10.   
  11. namespace SilverlightSamplePrj   
  12. {   
  13.     public partial class Page : Canvas   
  14.     {   
  15.         public void Page_Loaded(object o, EventArgs e)   
  16.         {   
  17.             // Required to initialize variables   
  18.             InitializeComponent();   
  19.         }   
  20.   
  21.         public void OnClick(object o, MouseEventArgs e)   
  22.         {   
  23.             txtFileName.Text = "";   
  24.             string NL = Environment.NewLine;   
  25.             OpenFileDialog ofDlg = new OpenFileDialog();   
  26.             ofDlg.EnableMultipleSelection = true;   
  27.             if (ofDlg.ShowDialog() == DialogResult.OK)   
  28.             {   
  29.                 foreach (FileDialogFileInfo fdFileInfo in ofDlg.SelectedFiles)   
  30.                 {   
  31.                     txtFileName.Text += fdFileInfo.Name + NL;   
  32.                 }   
  33.             }   
  34.         }   
  35.     }   
  36. }   
  37.   

最后的思考

可能有人说Silverlight是浏览器/internet的WPF.但是在1.1 Alpha版本的silverlight里还有一些缺失，如WPF里用来预定义和数据绑定控件的layout-management-controls。

如果这些观点被认识到我想MS将会这么做。silverlight能成为丰富的网络应用程序的技术。

原文地址：http://www.codegod.de/WebAppCodeGod/silverlight-integration-in-aspnet-website-AID376.aspx

1369 0 
访客评论
    发表评论
    • 你的姓名：
    • 你的网站：
    •   EMAIL：   
    • 评论内容：
    • 私人