private void OnUpload(object sender, EventArgs e) { // Rehide the status canvas with each request. StatusCanvas.Visibility = Visibility.Hidden; // Prompt the user to select an image file. OpenFileDialog ofd = new OpenFileDialog(); ofd.EnableMultipleSelection = false; ofd.Filter = "Image files (*.jpg;*.png)|*.jpg;*.png"; ofd.Title = "Select an image to upload"; if (ofd.ShowDialog() == DialogResult.OK) { // Read the contents of the file. string fileName = ofd.SelectedFile.Name; Stream f = ofd.SelectedFile.OpenRead(); byte[] fileBytes = new byte[f.Length]; int byteCount = f.Read(fileBytes, 0, (int)f.Length); string fileContents = Convert.ToBase64String(fileBytes); // Post the file contents to the web service. UploadImage(fileName, fileContents); // Print the status of the upload. ResponseMessage.Foreground = new SolidColorBrush(Color.FromRgb(0, 0, 255)); StatusCanvas.Visibility = Visibility.Visible; //Display the uploaded image. UploadedImage.Source = new Uri("GetImage.aspx?fileName=" + fileName, UriKind.Relative); } }
Private Sub OnUpload(ByVal o As Object, ByVal e As EventArgs) ' Rehide the status canvas with each request. StatusCanvas.Visibility = Visibility.Hidden ' Prompt the user to select an image file. Dim ofd As New OpenFileDialog() ofd.EnableMultipleSelection = False ofd.Filter = "Image files (*.jpg;*.png)|*.jpg;*.png" ofd.Title = "Select an image to upload" If ofd.ShowDialog() = DialogResult.OK Then ' Read the contents of the file. Dim fileName As String = ofd.SelectedFile.Name Dim f As Stream = ofd.SelectedFile.OpenRead() Dim fileBytes(f.Length) As Byte Dim byteCount As Integer = f.Read(fileBytes, 0, CInt(f.Length)) Dim fileContents As String = Convert.ToBase64String(fileBytes) ' Post the file contents to the web service. UploadImage(fileName, fileContents) ' Print the status of the upload. ResponseMessage.Foreground = New SolidColorBrush(Color.FromRgb(0, 0, 255)) StatusCanvas.Visibility = Visibility.Visible 'Display the uploaded image. UploadedImage.Source = _ New Uri("GetImage.aspx?fileName=" & fileName, UriKind.Relative) End If End Sub
public void Page_Loaded(object o, EventArgs e) { // Required to initialize variables InitializeComponent(); StatusCanvas.Visibility = Visibility.Hidden; UploadButton.MouseLeftButtonDown += OnUpload; }
VB
Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs) ' Required to initialize variables InitializeComponent() StatusCanvas.Visibility = Visibility.Hidden AddHandler UploadButton.MouseLeftButtonDown, AddressOf OnUpload End Sub
你可能会用到 HTTP POST来调用Web services . 想要在你的application中开启HTTP POST调用 Web services , 添加 HttpPost 到配置文件system.web里的 webServices configuration 区域中, 如下.
<system.web>
<webServices>
<protocols>
<add name="HttpPost"/>
</protocols>
</webServices>
</system.web>想了解更多如何在Silverlight中调用Web service , 查看 在Silverlight中怎么样使用代理来调用ASP.NET Web Service.
编译代码
你可以把以下代码拷贝一份到本地来运行.
创建ASP.NET Web Service
本篇QuickStart 示例使用 Web service 来接收一个uploaded file 内容. 因为安全的因素, 跨域调用是不允许的. 所以, .NET Framework for Silverlight 代码目前只能调用本域内的 Web service请求. 现在, 你必须创建一个站点,来包含 Silverlight client 页和Web service.
下面的Web service以包含要上传文件的路径为输入参数,然后返回一个image file 名称列表. 这么做是因为运行在browser中的 Silverlight client code 不需要直接访问Web server上的文件系统 .
开始创建ASP.NET Web service(不译,其实就是把内容放在CACHE中,然后又把内容写到客户端去,给用户看)
In Visual Studio, on the File menu, click New Web Site.
In the Visual Studio Installed Templates panel, click ASP.NET Web Service.
In the Location list, click File System. Specify a file path for your Web site, and then click OK.
-or-
You can click HTTP and create a new Web site on an Internet Information Services (IIS) Web server to host this sample.
Visual Studio will create an ASP.NET Web site with a default Web service.
双击 the Service.asmx file to edit it. Change Class="Service" to Class="SampleUploadServiceVB" for Visual Basic or Class="SampleUploadServiceCS" for C#. Save the changes and close the file.
In the App_Code folder, 双击 the Service.cs or Service.vb file, depending on the programming language (Visual Basic or C#) you chose for your sample. Replace the contents of the file with the following code for your programming language.
App_Code
using System; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Web.Caching; using System.IO; [WebService(Namespace = "http://tempuri.org/")] public class SampleUploadServiceCS : System.Web.Services.WebService { public SampleUploadServiceCS () { }
[WebMethod]
public void UploadImage(string fileName, string fileContents) { string imagePath = fileName; HttpContext.Current.Cache.Add(fileName, fileContents, null, DateTime.Now.AddSeconds(30), TimeSpan.Zero, CacheItemPriority.High, null); } }
App_Code
Imports System Imports System.Web Imports System.Web.Services Imports System.Web.Services.Protocols Imports System.Web.Caching Imports System.IO <WebService(Namespace:="http:'tempuri.org/")> _ Public Class SampleUploadServiceVB Inherits WebService Public Sub New() End Sub <WebMethod()> _ Public Sub UploadImage(ByVal fileName As String, ByVal fileContents As String) Dim imagePath As String = fileName HttpContext.Current.Cache.Add(fileName, fileContents, _ Nothing, DateTime.Now.AddSeconds(30), TimeSpan.Zero, _ CacheItemPriority.High, Nothing) End Sub End Class
Save the changes and close the file.
This sample does not write any files to the Web server file system. The Web service places the encoded file contents in the Cache for only 30 seconds so that the sample application can request them after they have been uploaded. To serve up the contents of the uploaded image file from the Cache, this sample uses an ASP.NET page that writes out the file stream using the BinaryWrite method.
右键单击 the Web site project, and click Add New Item.
Click Web Form. In the Name field, type GetImage.aspx. In the Language list, select the language that you prefer.
双击 the GetImage.aspx file to edit its contents. Replace the default contents with the following code for your preferred language.
VB
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="GetImage.aspx.vb" Inherits="GetImage" %>
Save the changes and close the file.
双击 the GetImage.aspx.vb file for Visual Basic or the GetImage.aspx.cs file for C# to edit its contents. Replace the default contents with the following code for your preferred language.
CS
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.IO; using System.Text; public partial class GetImage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string fileName = Request.QueryString["fileName"]; string[] tmp = fileName.Split('.'); string extension = tmp[tmp.Length-1]; switch (extension) { case "jpg": Response.ContentType = "image/jpeg"; break; case "png": Response.ContentType = "image/png"; break; default: Response.ContentType = "image/jpg"; break; } string fileContents = (string)Cache[fileName]; Response.BinaryWrite(Convert.FromBase64String(fileContents)); } }
VB
Imports System Imports System.Data Imports System.Configuration Imports System.Collections Imports System.Web Imports System.Web.Security Imports System.Web.UI Imports System.Web.UI.WebControls Imports System.Web.UI.WebControls.WebParts Imports System.Web.UI.HtmlControls Imports System.IO Imports System.Text Partial Public Class GetImage Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Dim fileName As String = Request.QueryString("fileName") Dim tmp As String() = fileName.Split(".") Dim extension As String = tmp(tmp.Length - 1) Select Case extension Case "jpg" Response.ContentType = "image/jpeg" Case "png" Response.ContentType = "image/png" Case Else Response.ContentType = "image/jpg" End Select Dim fileContents As String = Cache(fileName) Response.BinaryWrite(Convert.FromBase64String(fileContents)) End Sub End Class
Save the changes and close the file.
创建一个Silverlight Project
Silverlight的客户端代码其实都是被编译为assembly 后才被浏览器下载的.这样的话,你可以创建一个独立的Silverlight code的一个project,然后编译为assembly再添加到你的Web site中来. 你还需要复制一份 XAML file来提供对assembly的引用,还有一个client 文件(比如 HTML file)来载入 XAML文件中的特定 Canvas对象.
创建一个Silverlight project
先不管开始打开的ASP.NET Web site project. 打开 Visual Studio, 在 File 菜单上, 点击 Add, 再点 New Project.
在 Visual Studio Installed Templates 面板中, 点击 Silverlight Project.
在Name 框中, 为project起一个名字. 如果是Visual Basic,请输入 ImageUploadVB 而如果是C#则输入 ImageUploadCS , 再点击OK.
现在Visual Studio Solution Explorer 中出现两个project了,一个是WEBSITE,一个是你新创建的Silverlight project. Silverlight project 将包含一个命名为TestPage.html的HTML文件, Page.xaml的 XAML 文件, 还有一个 与XAMLCanvas object相关联的C# 或 Visual Basic编写的并包含 partial class 后台文件.
右键单击 TestPage.html , 点击 Rename. 改名为 Default.html.
双击 Default.html file 进行编辑.更改title 为Image Upload Sample. 保存并退出.
双击 Page.xaml file 进行编辑. 把下面的内容替换到原有内容,请选择你使用的语言.注意,对于不同的语言,XAML文件不同的地方就在于两处,在 XAML Canvas的父结点中的x:Class 属性,还有一个就是编译好的assembly名称.
CS
<Canvas x:Name="parentCanvas" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="Page_Loaded" x:Class="ImageUploadCS.Page;assembly=ClientBin/ImageUploadCS.dll" Width="800" Height="600" Background="White" > <Canvas x:Name="ButtonCanvas" Background="Navy"> <TextBlock x:Name="UploadButton" FontFamily="Verdana" Width="400" Height="30" Text="Click Here to upload an image." /> </Canvas> <Canvas x:Name="StatusCanvas" Background="Green"> <TextBlock x:Name="ResponseMessage" FontFamily="Verdana" Foreground="Green" Canvas.Top="30" Width="400" Height="30" Text="Image Uploaded." /> </Canvas> <Image x:Name="UploadedImage" Canvas.Top="60" /> </Canvas>
VB
<Canvas x:Name="parentCanvas" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="Page_Loaded" x:Class="ImageUploadVB.Page;assembly=ClientBin/ImageUploadVB.dll" Width="800" Height="600" Background="White" > <Canvas x:Name="ButtonCanvas" Background="Navy"> <TextBlock x:Name="UploadButton" FontFamily="Verdana" Width="400" Height="30" Text="Click Here to upload an image." /> </Canvas> <Canvas x:Name="StatusCanvas" Background="Green"> <TextBlock x:Name="ResponseMessage" FontFamily="Verdana" Foreground="Green" Canvas.Top="30" Width="400" Height="30" Text="Image Uploaded." /> </Canvas> <Image x:Name="UploadedImage" Canvas.Top="60" /> </Canvas>
保存并关闭该文件.
双击 Page.xaml.cs 或 Page.xaml.vb文件进行编辑. 选择下面的内容覆盖默认的内容(根据你的语言选择).
CS
using System; using System.Linq; using System.Xml; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Text; using System.IO; using System.Windows.Browser; using System.Windows.Browser.Net; using System.Net; namespace ImageUploadCS { public partial class Page : Canvas { public void Page_Loaded(object o, EventArgs e) { // Required to initialize variables InitializeComponent(); StatusCanvas.Visibility = Visibility.Hidden; UploadButton.MouseLeftButtonDown += OnUpload; } private void UploadImage(string fileName, string fileContents) { // Create an HTTP request with the path to the web service // to post the image file to. Uri uploadService = new Uri("Service.asmx/UploadImage", UriKind.Relative); BrowserHttpWebRequest _request = new BrowserHttpWebRequest(uploadService); _request.Method = "POST"; _request.ContentType = "application/x-www-form-urlencoded"; // Add the file contents to the body of the HTTP request. string formBody = "fileName=" + HttpUtility.UrlEncode(fileName) + "&" + "fileContents=" + HttpUtility.UrlEncode(fileContents); UTF8Encoding encoding = new UTF8Encoding(); byte[] formBytes = encoding.GetBytes(formBody); Stream body = _request.GetRequestStream(); body.Write(formBytes, 0, formBytes.Length); // Send the HTTP request. HttpWebResponse response = (HttpWebResponse)_request.GetResponse(); body.Close(); } private void OnUpload(object sender, EventArgs e) { // Rehide the status canvas with each request. StatusCanvas.Visibility = Visibility.Hidden; // Prompt the user to select an image file. OpenFileDialog ofd = new OpenFileDialog(); ofd.EnableMultipleSelection = false; ofd.Filter = "Image files (*.jpg;*.png)|*.jpg;*.png"; ofd.Title = "Select an image to upload"; if (ofd.ShowDialog() == DialogResult.OK) { // Read the contents of the file. string fileName = ofd.SelectedFile.Name; Stream f = ofd.SelectedFile.OpenRead(); byte[] fileBytes = new byte[f.Length]; int byteCount = f.Read(fileBytes, 0, (int)f.Length); string fileContents = Convert.ToBase64String(fileBytes); // Post the file contents to the web service. UploadImage(fileName, fileContents); // Print the status of the upload. ResponseMessage.Foreground = new SolidColorBrush(Color.FromRgb(0, 0, 255)); StatusCanvas.Visibility = Visibility.Visible; //Display the uploaded image. UploadedImage.Source = new Uri("GetImage.aspx?fileName=" + fileName, UriKind.Relative); } } } }
VB
Imports System Imports System.Linq Imports System.Xml Imports System.Windows Imports System.Windows.Controls Imports System.Windows.Documents Imports System.Windows.Ink Imports System.Windows.Input Imports System.Windows.Media Imports System.Windows.Media.Animation Imports System.Windows.Shapes Imports System.Text Imports System.IO Imports System.Windows.Browser Imports System.Windows.Browser.Net Imports System.Net Partial Public Class Page Inherits Canvas Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs) ' Required to initialize variables InitializeComponent() StatusCanvas.Visibility = Visibility.Hidden AddHandler UploadButton.MouseLeftButtonDown, AddressOf OnUpload End Sub Private Sub UploadImage(ByVal fileName As String, ByVal fileContents As String) ' Create an HTTP request with the path to the web service ' to post the image file to. Dim uploadService As New Uri("Service.asmx/UploadImage", UriKind.Relative) Dim _request As New BrowserHttpWebRequest(uploadService) _request.Method = "POST" _request.ContentType = "application/x-www-form-urlencoded" ' Add the file contents to the body of the HTTP request. Dim formBody As String = "fileName=" & HttpUtility.UrlEncode(fileName) & "&" & _ "fileContents=" & HttpUtility.UrlEncode(fileContents) Dim encoding As New UTF8Encoding() Dim formBytes As Byte() = Encoding.GetBytes(formBody) Dim body As Stream = _request.GetRequestStream() body.Write(formBytes, 0, formBytes.Length) ' Send the HTTP request. Dim response As HttpWebResponse = CType(_request.GetResponse(), HttpWebResponse) body.Close() End Sub Private Sub OnUpload(ByVal o As Object, ByVal e As EventArgs) ' Rehide the status canvas with each request. StatusCanvas.Visibility = Visibility.Hidden ' Prompt the user to select an image file. Dim ofd As New OpenFileDialog() ofd.EnableMultipleSelection = False ofd.Filter = "Image files (*.jpg;*.png)|*.jpg;*.png" ofd.Title = "Select an image to upload" If ofd.ShowDialog() = DialogResult.OK Then ' Read the contents of the file. Dim fileName As String = ofd.SelectedFile.Name Dim f As Stream = ofd.SelectedFile.OpenRead() Dim fileBytes(f.Length) As Byte Dim byteCount As Integer = f.Read(fileBytes, 0, CInt(f.Length)) Dim fileContents As String = Convert.ToBase64String(fileBytes) ' Post the file contents to the web service. UploadImage(fileName, fileContents) ' Print the status of the upload. ResponseMessage.Foreground = New SolidColorBrush(Color.FromRgb(0, 0, 255)) StatusCanvas.Visibility = Visibility.Visible 'Display the uploaded image. UploadedImage.Source = _ New Uri("GetImage.aspx?fileName=" & fileName, UriKind.Relative) End If End Sub End Class
保存并关闭该文件.
右键单击Silverlight project的 projec , 点击Build.默认的, Silverlight project将编译到当前project的 ClientBin 文件夹中. 选择 Silverlight project. 在Project 菜单上, 点击 Show All Files 使ClientBin 文件夹显示出来.
拷贝Silverlight Assembly 和文件到Web Site中
到这个时候, 你的Silverlight project 已经可以简单的拷贝到你的Web site中来运行了. 你需要copy HTML file, XAML file, 和编译好的assembly 到 Web site 中来.
拷贝 Silverlight assembly 和 文件到你的Web site
在 Solution Explorer, Silverlight project上, 右键单击 Page.xaml 文件,再点击 Copy.
在 Solution Explorer, 右键单击 Web site project, 再点击 Paste. ( Page.xaml.cs 或 Page.xaml.vb 文件也将拷贝过来. 你可删除它.)
在 Solution Explorer, 在 Silverlight project, 右键单击 Default.xml file, 再点击 Copy.
在 Solution Explorer, 右键单击 Web site project, 再点击 Paste (一个文件名为 TestPage.html.js 也将拷贝过来).
在 Solution Explorer, 在 Silverlight project, 右键单击 Silverlight.js 文件, 再点击 Copy.
在 Solution Explorer, 右键单击 Web site project,再点击 Paste.
右键单击 Web site project, 点击New Folder. 给新文件夹命名为 ClientBin.
在 Solution Explorer, 点击Silverlight project的 project 文件 . 点击Project 菜单, 点 Show All Files. 现在你将看到 ClientBin 文件夹. 打开这个文件夹, 右键单击 ImageUploadVB.dll 或 ImageUploadCS.dll 文件, 点击Copy.
在 Solution Explorer, 右键单击Web site project下的 ClientBin 文件夹 , 选择Paste.
右键单击 Web site project, 点击 New Folder. 命名文件夹为 images.
在 Web site project, 右键单击 Default.html file, 再点 View in Browser来运行这个示例.
| 第1页: 第1页 |