65.9K
CodeProject 正在变化。 阅读更多。
Home

用于生成 Web 部件的 Visual Studio 插件

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.94/5 (18投票s)

2009年1月19日

CDDL

8分钟阅读

viewsIcon

164146

downloadIcon

673

一个 Visual Studio 插件,可以根据准备好的 ASCX 控件/模板生成 Web 部件。

引言

本文将向您介绍一个可以在 Visual Studio 2005/2008 中使用的新的 Visual Studio 插件,该插件可用于根据准备好的 ASCX 控件/模板生成 Web 部件。该插件应该允许 Web 部件开发人员使用 Visual Studio HTML 设计器轻松创建 Web 部件。它应该为您节省大量时间,并使 Web 部件开发成为一种愉快的体验,即使对于初学者也是如此。

本文采用分步教程的形式。它将为初学者提供成功创建、部署和试用他们的第一个 Web 部件的机会,同时也能为有经验的用户节省一些时间,因为在处理 SharePoint 时,您总是会遇到挑战。

背景

一年前,我们发布了此 Web 部件生成器的第一个版本。第一个版本是作为一个控制台应用程序制作的,其源代码托管在 CodePlex 上。我还在 CodeProject 上发布了一篇文章,解释了如何使用该控制台应用程序来生成 Web 部件(用于带皮肤的 Web 部件的基类和生成器工具)。

我曾承诺,我们将制作一个 Visual Studio 插件,以使 Web 部件开发过程更快,并且我信守了我的承诺。

使用插件

本节将介绍如何使用该插件进行 Web 部件生成,如何在开发开始前创建 Visual Studio 解决方案,以及如何部署和测试已开发的解决方案。

准备新的 Visual Studio 解决方案

我们将从准备一个新的 Visual Studio 解决方案开始。为了能够遵循本节的步骤,您需要一个安装了以下内容的开发环境:

  • MOSS 2007
  • Visual Studio 2005 Service Pack 1(或 2008)
  • Visual Studio Extensions for Windows SharePoint Services(您可以从此处下载)
  • 您可以从本页下载的 Visual Studio 插件

请按照以下步骤准备一个新的 Visual Studio 解决方案,该方案将用于托管 Web 部件及其皮肤。

  1. 启动 Visual Studio,然后选择“文件”-->“新建”-->“项目”。
  2. 在可用模板列表中选择“Web 部件”模板,如下图所示。
  3. ScreenHunter_02.jpg

  4. 输入项目的名称、解决方案的名称,选择“为解决方案创建目录”选项,然后单击“确定”按钮。您将获得一个带有“Web 部件”项目的新解决方案。
  5. 您会注意到,“Web 部件”模板已创建了一个与您为 Web 部件项目输入的名称相同的 Web 部件。现在我们将删除该 Web 部件,因为我们要将此项目用于多个 Web 部件。要删除 Web 部件,您应该右键单击包含 Web 部件的子文件夹,然后从上下文菜单中选择“删除”,如下图所示。
  6. ScreenHunter_03.gif

  7. 现在,我们将向 Visual Studio 添加一个新项目来保存 Web 部件的皮肤/模板。为此,请选择“文件”-->“新建”-->“项目”。然后,在模板列表中选择“类库”,输入此新项目的名称,选择“添加到解决方案”选项,然后单击“确定”按钮,如下图所示。
  8. ScreenHunter_04.jpg

  9. 由于我们选择了“类库”模板,Visual Studio 会创建一个名为“Class1”的类。现在我们将删除该类并准备其用于皮肤/模板托管。您应该右键单击“Class1.cs”并在上下文菜单中选择“删除”,如下所示。
  10. ScreenHunter_05.gif

  11. 现在,右键单击您的“类库”项目,然后选择“添加”-->“新建文件夹”。输入“Themes”作为文件夹名称,然后在该文件夹下创建一个子文件夹并将其命名为“default”。您现在应该具有如下图所示的结构。
  12. ScreenHunter_06.gif

为我们的 Web 部件创建皮肤/模板

  1. 现在,我们将为新的 Web 部件创建第一个皮肤/模板。右键单击“default”文件夹,然后选择“添加新项”选项。选择“文本文件”,输入皮肤/模板的名称(扩展名为 ASCX),然后单击“添加”按钮,如下图所示。
  2. ScreenHunter_09.jpg

  3. 您现在应该具有如下图所示的结构。
  4. ScreenHunter_10.gif

  5. 双击您的 ASCX 文件并输入一些 HTML。以下屏幕截图显示了一个简单的皮肤/模板,其中包含一个 Label、一个 TextBox、一个 Button 以及一些纯 HTML 控件。
  6. ScreenHunter_11.jpg

创建 Web 部件的初始版本

我们将首先创建一个新的 Web 部件,该 Web 部件将仅作为稍后将生成的 Web 部件的占位符。

  1. 要创建新的 Web 部件,您应该右键单击您的“Web 部件”项目,然后选择“添加”-->“新项”。
  2. ScreenHunter_14.gif

  3. 然后,在模板列表中选择“Web 部件”,输入您的 Web 部件的名称,然后单击“添加”按钮。
  4. ScreenHunter_15.gif

    请注意,尽管这只是后续 Web 部件的占位符,但您应该输入 Web 部件的名称,就像您希望它以后被命名一样。

此时,您应该具有如下图所示的结构。

ScreenHunter_16.gif

并且占位符 Web 部件的源代码应该如下所示。

ScreenHunter_18.jpg

Web 部件生成

现在,我们已经准备好所有项目,并且占位符 Web 部件也已准备就绪。要基于先前准备好的皮肤/模板生成您的第一个 Web 部件,您应该执行以下步骤:

  1. 右键单击您的皮肤/模板,然后选择“生成 SharePoint WebPart”。
  2. ScreenHunter_19.gif

  3. 单击“Output WebPart file”字段右侧的“...”按钮。
  4. ScreenHunter_20.gif

  5. 导航到您在先前步骤之一中创建的 Web 部件占位符,然后选择该文件。您应该会收到一条警告消息,指出您将覆盖现有文件。您只需确认您想继续。
  6. ScreenHunter_21.gif

  7. 为“Namespace”输入适当的值,然后单击“Generate”按钮。
  8. ScreenHunter_22.gif

  9. 单击“Web 部件”项目,然后选择“解决方案资源管理器”工具栏中的“显示所有文件”选项。
  10. ScreenHunter_24.gif

  11. 您应该看到一个名为您 Web 部件但文件名中包含“.generated.”的新文件。右键单击该文件,然后选择“包含到项目”选项。
  12. ScreenHunter_25.gif

您现在应该具有如下图所示的结构。

ScreenHunter_26.gif

您可以选择性地修改您的项目,使“.generated.”文件依赖于原始文件。如果这样做,您可以转到文件系统,找到并编辑您的“Web 部件”项目的“.csproj”文件,并修改“.generated.”文件的“include”行。我示例中包含此文件的节的示例是:

ScreenHunter_27.gif

修改后的节的示例是:

ScreenHunter_28.gif

如果您使其具有依赖性,那么项目结构应如下所示。

ScreenHunter_29.gif

为部署和测试做准备

请按照以下步骤准备部署和测试环境:

  1. 此处下载 ASPNETLibrary.SharePoint.WebParts.dll
  2. 在“解决方案资源管理器”中右键单击解决方案,然后选择“添加”-->“新建解决方案文件夹”,如下图所示。
  3. ScreenHunter_30.gif

  4. 输入“ExternalLibraries”作为解决方案文件夹名称。
  5. ScreenHunter_31.gif

  6. 打开 Windows 资源管理器,导航到文件系统上的解决方案文件夹,并在解决方案文件夹的根目录中创建一个同名文件夹。
  7. ScreenHunter_32.gif

  8. 将下载的 DLL 解压缩到文件系统上的“ExternalLibraries”文件夹中。
  9. 返回 Visual Studio,右键单击解决方案文件夹,选择“添加”-->“现有项”,导航到下载 ASPNETLibrary.SharePoint.WebParts.dll 的位置,然后选择该 DLL。您现在应该在 Visual Studio 中具有如下图所示的结构。
  10. ScreenHunter_33.gif

  11. 右键单击您的“Web 部件”项目下的“References”节点,然后选择“Add Reference”选项。
  12. ScreenHunter_34.gif

  13. 选择“Browse”选项卡,导航到文件系统上的“ExternalLibraries”文件夹,然后选择已解压缩的 DLL。
  14. ScreenHunter_35.gif

  15. 您现在应该在引用列表中看到 ASPNetLibrary.SharePoint.WebParts.dll。检查您的引用列表是否与下图所示相同。
  16. ScreenHunter_36.gif

  17. 现在,双击 Web 部件类文件并输入一些代码。在此示例中,我们将订阅单个按钮的 Button.Click 事件,并在单击按钮时将一些文本设置到文本框中。
  18. ScreenHunter_37.gif

  19. 打开 Internet Explorer,导航到您将要部署 Web 部件并进行测试的网站。
  20. 单击“查看所有站点内容”。
  21. ScreenHunter_39.gif

  22. 单击“创建”按钮。
  23. ScreenHunter_40.gif

  24. 从定义列表中选择“文档库”。
  25. ScreenHunter_41.gif

  26. 输入“Themes”作为文档库名称,然后单击“创建”按钮。
  27. ScreenHunter_42.gif

  28. 单击“新建”,然后单击“文件夹”。
  29. ScreenHunter_43.gif

  30. 输入“default”作为文件夹名称,然后单击“OK”。
  31. 选择“default”文件夹。
  32. ScreenHunter_44.gif

  33. 选择“上传”,然后选择“上传文档”选项。
  34. ScreenHunter_45.gif

  35. 浏览到保存您的皮肤/模板的文件夹,然后选择您先前创建的皮肤/模板。您现在应该在“Thems\default”文件夹中找到该皮肤/模板。
  36. ScreenHunter_46.gif

  37. 转到您的 MOSS IIS 网站的根文件夹,并打开 web.config 文件。该文件夹通常位于:“c:\inetpub\wwwroot\wss\VirtualDirectories\PORT”,其中 PORT 是您的 IIS 网站的端口号。
  38. ScreenHunter_48.gif

  39. 找到“SafeControls”部分,并在关闭“SafeControls”标记之前添加以下行: <SafeControl Assembly="ASPNETLibrary.SharePoint.WebParts, Version=1.0.0.1, Culture=neutral, PublicKeyToken=fbf2c912531db231" Namespace="ASPNETLibrary.SharePoint.WebParts" TypeName="*" Safe="True" />
  40. 您现在应该拥有 web.config 中的 SafeControls 部分,如下所示。
  41. ScreenHunter_49.gif

  42. 打开 Windows 资源管理器,导航到“c:\Windows\Assembly”。打开另一个 Windows 资源管理器,导航到您的“ExternalLibraries”文件夹。将“ASPNETLibrary.SharePoint.WebParts.dll”从“ExternalLibraries”拖放到“c:\Windows\Assembly”。
  43. ScreenHunter_51.jpg

部署 Web 部件

我们现在准备部署我们的第一个 Web 部件。要执行此操作,请按照以下步骤操作:

  1. 右键单击“Web 部件”项目,然后选择“部署”选项。
  2. ScreenHunter_52.gif

  3. 部署过程将开始,当部署成功完成后,您应该在 Visual Studio 窗口的左下角看到以下消息。
  4. ScreenHunter_53.gif

  5. 打开 Internet Explorer,导航到您的 MOSS 网站。
  6. 选择“站点操作”,然后选择“编辑页面”。
  7. ScreenHunter_54.gif

  8. 单击“添加 Web 部件”。
  9. ScreenHunter_55.gif

  10. 在 Web 部件列表中找到您的 Web 部件,选中其旁边的复选框,然后单击“添加”按钮。
  11. ScreenHunter_56.gif

  12. 您现在应该看到您的 Web 部件。
  13. ScreenHunter_57.gif

  14. 要测试其功能,请单击“提交”按钮。如果所有先前的步骤都已正确执行,那么您应该会看到一个文本框填入了“Hello world!”消息。
  15. ScreenHunter_58.gif

源代码和其他资源

此插件及相关 DLL 的完整源代码位于 CodePlex

© . All rights reserved.