构建Silverlight（2.0）多文件上传器

构建Silverlight（2.0）多文件上传器 所有源代码均为C＃。 VB.NET源即将推出。 注意： 此项目需要Visual Studio 2008 SP1或Visual Web Developer 2008 SP1和Silverlight 2.0。 要获得这些工具，请访问此页面
入门：官方Microsoft Silverlight网站
并按照步骤1。

有时您会发现需要让用户一次上传多个文件。 您可以使用多个FileUpload控件，也可以动态创建它们，但是如果您想要丰富的客户端体验，则Silverlight是实现此目的的一种好方法。 本文假定您几乎没有现有的Silverlight知识。

有关Silverlight的重要一件事：它在

客户端 ，而不是服务器。 这与ASP.NET相反，在ASP.NET中，所有代码都在服务器上执行。 因此，Silverlight可以轻松获取文件，但无法将其直接保存到Web服务器。 因此，我们需要一些东西来弥合差距。

我们要做的是创建一个

ASP.NET Web服务 。 该Web服务将公开一种方法，该方法将允许客户端上传带有名称的文件。 除非您实现某种SOAP Header身份验证，否则大概任何客户端都可以使用此服务，而不仅仅是您的Silverlight应用程序，但这超出了本文的范围。

因此，计划是使用Silverlight作为丰富的前端，它将连接到我们的ASP.NET Web服务后端。 在此示例中，我们将创建一个新项目。 如果您有现有的网站或Web应用程序项目，则过程将稍有不同。 我将解释我们之间的差异。

让我们创建一个新项目：

确保右上角的下拉菜单设置为.NET Framework 3.5，否则Silverlight的项目类型列表将为空。

将会弹出另一个对话框，询问您是否要创建一个新的Web应用程序项目来将此Silverlight项目链接到。 单击确定。

如果您正在创建此Silverlight应用程序

对于现有项目 ，应在Visual Studio中右键单击项目的解决方案文件，然后选择添加新项目 。

并添加一个Silverlight项目。 对话框现在将询问您是否要链接到现有项目。

单击确定。

现在我们已经建立了Silverlight项目并建立了链接的网站/ Web应用程序，是时候创建Web服务了。

编写上载器服务

首先将Web服务添加到我们的项目中。 右键单击Web应用程序项目，然后选择添加新项：

选择“ Web”，然后找到“ Web Service”图标。 命名新文件

FileUploadService.asmx 。

现在，已经创建了Web服务。 这是我们需要采取的一些设置步骤：

• 删除已自动创建的Hello World方法。 记住也要删除[WebMethod]装饰。
• 将此using语句与其余语句一起添加到顶部：
  

  using System.IO;

• 您可以保持名称空间定义不变，也可以将其更改为自己的URL。 这不是很重要。
• 最后，在您的Web应用程序中添加一个名为upload的文件夹。
  

  

现在我们已经设置了Web服务，让我们检查一下将要使用的逻辑。 Silverlight中的所有Web服务调用都是

异步的 。 说明：创建方法将在方法完成时触发，而不是调用方法，而是让程序在完成之前等待它完成。 然后，您启动该方法，并且程序将继续运行而没有该方法。 该方法的处理在另一个线程上完成。 完成后，将触发Completed事件，并触发您定义的处理程序。

对我们而言，这意味着我们可以一次调用多个请求……我们不必上载文件列表或数组，我们可以发出多个请求以上载单个文件，并且它们将被同时处理。 知道这一点将有助于我们定义服务。

我们将只公开一种Web方法。 我们称它为

UploadFile 。 此方法将使用两个参数：一个byte []和一个字符串。 这是代码：

记住[WebMethod]装饰。 它指定将公开此方法供客户端调用。

基本上，此方法的作用是接受字节数组和文件名。 然后，它获取服务器到

上传目录并将文件写入磁盘。 如果该方法失败，则返回false，否则返回true。 当前，此方法将覆盖具有相同名称的任何文件。 以后，您可以实现一些重命名逻辑来防止这种情况。

而已！ 这就是Web服务的全部内容。 确保您的解决方案将生成并继续创建Silverlight应用。

创建Silverlight前端

在您的Silverlight项目中打开Page.xaml文件。 Silverlight使用称为XAML的标记语言来布局和内容。 这是XML的一种特殊变体，因此大多数XML规则都适用，例如关闭所有标签。 根标记是UserControl标记。 这将定义您的Silverlight控件。

我们要做的第一件事是重新定义控件的大小。 为了演示的目的，我们将使用300 x 150像素。 因此，在根标记中，更改Width和Height属性以使其匹配。 默认情况下，它们是最后一个属性。

到目前为止，这是您应该拥有的：

网格将成为我们的布局根。 还有其他布局容器，包括StackPanels和Canvases，但是对于这种情况，网格将运行良好。

让我们定义演示逻辑。 我们希望允许用户将多个文件添加到队列中，然后在列表良好时将其全部上传。 我们应该允许他们删除原本不想添加的文件。 因此，我们将需要一个ListBox和两个Button。 让我们将它们排列在两行中，最上面的一行包含ListBox。

因此，要将网格配置为具有两行，我们需要添加一些RowDefinition。 RowDefinitions可以是绝对的也可以是相对的。 我们将这些相对。 添加此代码：

请注意，这些行将分布在整个网格中，第一行比第二行大五倍。

现在，我们已经定义了网格，让我们添加一些控件。

让我们暂时讨论一些常见属性。

x：Name是我们将在代码隐藏文件中引用项目的名称。 这等效于ASP.NET中的ID标记。 此外，许多控件都有事件。 例如，我们刚刚添加的ListBox有几个。 添加事件时，IntelliSense会提示您自动添加事件处理程序名称和定义。

只需按Tab或Return键，即可为您填写。

因此，我们添加了一个具有KeyDown事件的ListBox。 接下来，我们添加了一个新的网格。 您可以将这些元素相互堆叠。 在新网格内，我们定义了两列并添加了两个Button，每个Button都有自己的Click Event处理程序。 就像您对ListBox所做的那样，只需执行这些操作，处理程序就会在后端自动创建。

现在我们需要向ListBox添加一些代码。 Silverlight DataList具有对象的Item数组。 这些对象的属性可以绑定到ListBox的DataTemplate中的Silverlight控件。 在这种情况下，我们将使用FileInfo对象。 因此，我们可以使用FileInfo的Name属性绑定到TextBlock来构成ItemTemplate。 我们可以通过将文件大小或其他属性绑定到其他控件来使其更加复杂，但是现在我们将使其保持简单。 这是代码：

我们几乎准备开始真正的编码。 我们只需要某种方式来禁用控件，并与我们正在上传文件的用户进行交流。 将此代码添加到包含Button的网格下面：

请注意，我们在与ListBox相同的行上添加了一个StackPanel，但是将其RowSpan属性设置为2。这将有效地使其覆盖整个控件。 我们将背景色设置为灰色，将不透明度设置为.85（可能为1）。

StackPanel完全按照其说的做...将项目水平或垂直地堆叠在面板内。 默认情况下，它垂直堆叠。 您可以通过设置Orientation属性来更改此设置。

注意，我们在StackPanel中放置了一个TextBox和一个Button。 确保您遵循前面介绍的有关如何添加事件的过程，因为我们添加的按钮具有Click事件。

另外，请注意，我们已将StackPanel的“可见性”设置为“崩溃”。 这样，它将是不可见的。 如果要查看在我们看到它时的外观，请将其更改为“可见”。 当该面板可见时，它位于其他控件的前面，因此您无法单击它们。

现在我们准备从后面的代码开始。 首先，请确保您保存当前页面。 您必须先保存，然后隐藏代码才能识别x：Name属性。 然后，您可以右键单击Page.xaml页上的任意位置（编辑器或预览），然后选择“查看代码”。

这将打开Page.xaml.cs。 这是它应该开始的内容：

您所使用的方法可能不完全相同。 一些设置项目：

• 将此代码添加到顶部的using语句中：
  

  using System.IO;

• 将此代码直接添加到构造函数上方（公共Page方法）
  

  private int counter = 0;

我们已经准备好开始编码。

让我们填写事件处理程序的代码。 首先，一个叫做bOpenFileDialog_Click的东西。

此代码将打开一个FileDialog，并让用户选择一个文件。 如果用户未选择文件或未选择取消，则不会发生任何事情。 如果这样做，则将FileInfo对象添加到我们的ListBox的Items数组中。 ?? 运算符是

空合并运算符 。 它所做的是评估左侧。 如果不为null，则返回左值。 如果是，它将返回正确的值。

现在为lbFileList_KeyDown处理程序：

这将使我们删除列表中的项目。

现在，bClear_Click处理程序：

这将清除文本框，数组，并隐藏“上载”屏幕。

添加服务参考

现在是棘手的部分。 您必须为下一部分添加服务参考，但是Web服务的地址是什么？ 好吧，让我们找出答案。 按F5键运行您的应用程序，然后导航至FileUploadService.asmx。 您的URL上将带有端口号。 这是一个例子：

那就是您的服务地址。 这仅在开发服务器正在运行时才能运行（在Visual Studio在运行并且您已调试项目时）！ 因此，当您关闭Visual Studio时，该地址不再有效，并且在您再次启动它时可能不再有效。 因此，请确保在每次重新加载该项目时都进行检查。 将项目发布到Web服务器后，可以更改该地址以指向Web上的永久地址。

现在添加服务参考。 右键单击Silverlight项目中的“引用”文件夹，然后单击“添加服务引用”。

粘贴地址，然后单击发现。 找到服务后，将命名空间更改为FileUploadService，然后单击“确定”。

现在，我们已经引用了我们的服务，让我们创建一个客户。 添加此代码：

在bSubmit_Click方法中。 这些评论解释了正在发生的事情。 最后一行很重要：键入时，您将看到以下内容：

单击Tab两次，以自动生成FileUploadComplete事件的处理程序。 这将向页面添加另一种方法。

在这里，让我们结束bSubmit_Click方法。 在我们刚刚添加的代码下面添加此代码：

同样，这些评论解释了正在发生的事情。 我们增加计数器以注意到我们已经向Web方法添加了另一个异步调用。

现在，让我们填写service_UploadFileCompleted。 首先删除或注释掉以下行：

throw new NotImplementedException();

并将其更改为以下代码：

您可能会注意到，没有所谓的uploadingComplete（）方法。 你是对的。 现在该创建一个了：

就是这样！ 您现在可以按F5进行测试。

示例项目和更改服务参考地址

您可以在此处下载示例项目：

http://www.insertalias.com/upload/by...leuploader.zip

但是您必须记住将服务引用更改为正确的URL。 这是更改服务参考地址的方法。 在Silverlight应用程序中展开名为Service References的文件夹，然后右键单击一个名为FileUploadService的文件夹。 单击“配置服务参考”。

您应该得到以下对话框：

将地址更改为正确的地址，然后单击“确定”。 记住，要找到正确的地址，请运行您的应用程序，并通过localhost查看url上的端口号。 将此更改为运行应用程序时显示的内容。

准备将其发布到Web服务器时，您将需要将服务引用的地址更改为永久地址。 首先按原样发布它，然后在浏览器中导航到.asmx文件。 复制该URL，然后按照上述步骤更改参考地址。 然后再次发布该应用程序。

您可能必须配置IIS才能正确提供Silverlight应用程序，但这超出了本文的范围。

我希望您喜欢阅读本文并发现对您有帮助。

-插入别名

文章也可以在我的博客上找到。 一探究竟！

From: https://bytes.com/topic/asp-net/insights/858723-building-silverlight-2-0-multi-file-uploader