Web Part 教程--简介

      很久以前就想写一个系列来介绍 Web Part，但是实在是没有写文章的欲望，偶尔心情好就码几个字，一而再再而三的拖，一直到现在，快过年了，先把写好的发出来，还缺少计划中的一节关于个性化的，深入那节也写得比较仓促，将就着看，有空再补上和完善。

 

整个教程连接

Web Part 教程--简介
Web Part 教程--自定义 Web Part
Web Part 教程--Web Part 连接
Web Part 教程--深入理解 Web Part Manager & Zone

示例代码在本教程第四节

 

一、简介
      ASP.NET 2.0 为 web 开发者引入了很多激动人心的新特性，门户框架(portal framework)是其中最强大的技术之一，
可以使用门户框架的 Web Parts 技术来创建动态的门户应用，从普通的个人主页到复杂的信息展示，可以通过动态应用的设置为每个用户定制 Web 站点， 可以把页面的某部分从一个位置移动到另一个位置，可以打开、关闭、最小化、最大化页面的一部分，而且可以保存起来，作的调整可以对单个或所有用户生效。在 msnspace 上写博客的人应该对此印象深刻--通过拖放控件来调整网站布局和内容。
      其实早在 04 年初使用 SharePoint 的时候就已经接触过 Web Parts，当时觉得很有创意，现在 ASP.NET 2.0 引入了跟WSS (Windows SharePoint Services)类似而又截然不同的 Web Part 架构，相同点在于也是为了处理序列化、保存、获取定制和个性化数据，不同点在于没有跟 MS SQL Server 和 AD 紧耦合，对于使用其他 DBMS 来构建门户应用的公司来说是个好消息。

      在深入学习之前，先来认识一下 Visual Studio 中新加的控件组 WebParts 中的成员。
      主要分为两类 Mananger 和 Zone，Zone 又分为 WebPart Zone 和 ToolZone，前者用来展示，后者又分为 Catalog、Editor、Connection。

 

• WebPartManager 总管
  ProxyWebPartManager 代理总管

• WebPartZone 可以放 WebPart 的地方

• CatalogZone 目录，或者叫 WebPart 仓库，用户可以在此选择 WebPart 并加入到页面指定地点
  DeclarativeCatalogPart  用户可以添加的 WebPart
  PageCatalogPart         显示页面上用户关闭了的 WebPart
  ImportCatalogPart       从文件导入 WebPart

• EditorZone 可以包含下列编辑控件

AppearanceEditorPart    允许用户修改 WebPart 的外观
BehaviorEditorPart      允许用户修改 WebPart 的行为
LayoutEditorPart        允许用户修改 WebPart 的布局
PropertyGridEditorPart  允许用户修改 WebPart 的属性
ConnectionsZone         WebPart 通讯站

下面写个简单程序来直观操作并了解一下各控件。
前提：
1、启动 MS SQL Server，在 Visual Studio 命令行环境运行 aspnet_regsql.exe
2、创建一个 Web Application
3、修改刚创建的应用程序的配置文件 web.config，在 configuration 节点中加入
<connectionStrings> <remove name="LocalSqlServer" /> <add name="LocalSqlServer" connectionString="Data Source=localhost;Initial Catalog=aspnetdb;Persist Security Info=True;User ID=sa;Password=" providerName="System.Data.SqlClient" /> </connectionStrings>
  这段的作用是所覆盖 .net 的全局配置，帐号和密码请根据实际情况自行修改。
 
添加控件：
1、打开 Default 设计页面，从工具箱拖一个 WebPartManager 到该页面
2、拖两个 WebPartZone 到页面，再拖两个超链接到其中一个 WebPartZone，设置超链接属性，代码如下：
<asp:WebPartZone ID="WebPartZone1" runat="server"> <ZoneTemplate> <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="http://www.google.com">Google</asp:HyperLink> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.163.com">163</asp:HyperLink> </ZoneTemplate> </asp:WebPartZone>
   
3、拖一个 EditorZone 到页面，再拖一个 AppearanceEditorPart 进 EditorZone，代码如下：
<asp:EditorZone ID="EditorZone1" runat="server" Height="229px" Width="430px"> <ZoneTemplate> <asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" /> </ZoneTemplate> </asp:EditorZone>
   
4、拖一个 CatalogZone 到页面，再拖一个 DeclarativeCatalogPart 进 CatalogZone   
5、右击 DeclarativeCatalogPart，选择 Edit Template->WebPartsTemplate，进入模板编辑，拖一个文本框到里面，代码如下：
<asp:CatalogZone ID="CatalogZone1" runat="server"> <ZoneTemplate> <asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server"> <WebPartsTemplate> <asp:TextBox ID="TextBox1" runat="server" Title="文本框"></asp:TextBox> </WebPartsTemplate> </asp:DeclarativeCatalogPart> </ZoneTemplate> </asp:CatalogZone>
   
6、再拖一个下拉框到页面，命名为 ddlModes，以设置页面的模式。
7、打开页面后台代码编辑窗口，在类中添加声明：
    WebPartManager wm;
   
    添加三个方法 Page_Init、InitializationComplete、Page_PreRender，以将页面支持的模式绑定到下拉框 ddlModes：
void Page_Init(object sender, EventArgs e) { Page.InitComplete += new EventHandler(InitializationComplete); } void InitializationComplete(object sender, System.EventArgs e) { wm = WebPartManager.GetCurrentWebPartManager(Page); String browseModeName = WebPartManager.BrowseDisplayMode.Name; foreach (WebPartDisplayMode mode in wm.SupportedDisplayModes) { String modeName = mode.Name; // Make sure a mode is enabled before adding it. if (mode.IsEnabled(wm)) { ListItem item = new ListItem(modeName, modeName); ddlModes.Items.Add(item); } } } void Page_PreRender(object sender, EventArgs e) { ListItemCollection items = this.ddlModes.Items; int selectedIndex = items.IndexOf(items.FindByText(wm.DisplayMode.Name)); ddlModes.SelectedIndex = selectedIndex; }
       
8、给下拉框 ddlModes 的事件 SelectedIndexChanged 添加处理函数：
protected void ddlModes_SelectedIndexChanged(object sender, EventArgs e) { string selectedMode = ddlModes.SelectedValue; WebPartDisplayMode mode = wm.SupportedDisplayModes[selectedMode]; if (mode != null) { wm.DisplayMode = mode; } }
       
9、运行，通过下拉框切换各种模式。
      模式包括下面几种

• BrowseDisplayMode   浏览模式，是默认值，用户只能看
• DesignDisplayMode   设计模式，跟浏览模式差不多，用户就可以对控件的位置进行拖放了(在开始定义好的WebPartZone里)
• EditDisplayMode     编辑模式，此模式在用户可以编辑 WebPart 属性，也可以在区域间拖放 WebPart 
• CatalogDisplayMode  目录模式，可以添加指定 WebPart 到区域，也可以对 WebPart 进行播放
• ConnectDisplayMode  连接模式，此模式可以让Web Part 之间进行通讯