21.4　页显示模式

简单地讲，页显示模式是一种应用于整个页面的特殊状态。在该状态中，某些用户界面元素可见并且已启用，而其他用户界面元素则不可见且被禁用。利用页显示模式，最终用户可以执行某些任务来修改或个性化页面，如编辑Web部件控件、更改页面布局或者在可用控件目录中添加新控件等。

Web部件页可以进入几种不同的显示模式，但是一个页一次只能够处于一种显示模式中，每种显示模式都从WebPartDisplayMode类派生。其中，WebPartManager控件包含Web部件控件集内可用的显示模式的实现，并且管理某页的所有显示模式操作。下面就来详细阐述这些页显示模式及其使用方法。

21.4.1　BrowseDisplayMode（浏览模式）

在BrowseDisplayMode（浏览模式）中，以最终用户查看网页的普通模式来显示Web部件控件和用户界面元素，同时，它也是Web部件控件的页的默认显示模式。

也就是说，在默认情况下，包含Web部件的页在首次加载时处于BrowseDisplayMode模式。如果用户只是像在正常网页上那样进行浏览，则该页应保持为浏览模式。如果要以编程的方式来设置BrowseDisplayMode模式，可以在Page_PreRender方法中进行设置。如下面的代码所示：

protected void Page_PreRender(object sender, EventArgs e）

{

this.WebPartManager1.DisplayMode=

WebPartManager.BrowseDisplayMode；

}

其中，DisplayMode属性用于获取或设置包含Web部件控件的页的活动显示模式。

21.4.2　DesignDisplayMode（设计模式）

在DesignDisplayMode（设计模式）中，会显示各区域的用户界面，用户可以拖动Web部件控件以更改页面的布局显示，从而满足用户的个性化设置要求。

也就是说，如果用户希望通过将控件移动到不同区域或在当前区域内移动控件来更改页布局，那么必须首先将页的显示模式由BrowseDisplayMode模式切换至DesignDisplayMode模式。例如，下面的示例代码演示了如何以编程的方式来设置DesignDisplayMode模式。

为了能够让用户可以自由地切换页显示模式，在页面里添加了一个dl_SelectMode下拉列表控件，该控件里将填充页所支持的显示模式（在此示例中是浏览模式和设计模式）。页面代码如下所示：

＜form id="form1"runat="server"＞

＜div＞

＜asp:WebPartManager ID="WebPartManager1"runat="server"＞

＜/asp:WebPartManager＞

＜div＞

设置显示模式：

＜asp:DropDownList ID="dl_SelectMode"

runat="server"Height="20px"AutoPostBack="true"

OnSelectedIndexChanged="

dl_SelectMode_SelectedIndexChanged"

Width="169px"＞

＜/asp:DropDownList＞

＜/div＞

＜table width="100%"border="0"cellspacing="0"

cellpadding="0"＞

＜tr＞

＜td valign="top"width="405px"height="100%"

align="left"＞

＜asp:WebPartZone ID="WebPartZone1"runat="server"＞

＜ZoneTemplate＞

……

＜/ZoneTemplate＞

＜/asp:WebPartZone＞

＜/td＞

＜td width="100%"height="100%"align="left"

valign="top"＞

＜asp:WebPartZone ID="WebPartZone2"runat="server"＞

＜ZoneTemplate＞

……

＜/ZoneTemplate＞

＜/asp:WebPartZone＞

＜/td＞

＜/tr＞

＜/table＞

＜/div＞

＜/form＞

接下来，首先在页的Page_Load方法里将页所支持的显示模式填充到dl_SelectMode下拉列表控件。

这里需要特别注意的是SupportedDisplayModes属性，该属性用于获取特定网页上所有实际可用显示模式的只读集合。其中，浏览模式和设计模式始终是受支持的，而最可能发生变化的显示模式是编辑、目录和连接模式。这些显示模式中，每一个都与特定类型的ToolZone控件相关联。正是网页上存在这种特定类型的区域，特定显示模式才会添加到SupportedDisplayModes属性所引用的集合中。例如，如果网页包含的是EditorZone区域，而不是CatalogZone区域，编辑显示模式则是该页上受支持的模式之一，而目录显示模式则不受支持。

同时，SupportedDisplayModes属性与DisplayModes属性区别在于，SupportedDisplayModes属性只用于获取特定网页上所有实际可用显示模式的只读集合；而DisplayModes属性所引用的集合包含当前WebPartManager控件可以使用的所有显示模式，包括特定页上不受支持的显示模式。

填充好dl_SelectMode下拉列表控件之后，就可以在dl_SelectMode_SelectedIndexChanged事件里来设置相关的页显示模式。详细代码如下所示：

protected void Page_Load(object sender, EventArgs e）

{

if（！IsPostBack)

{

foreach(WebPartDisplayMode mode in

WebPartManager1.SupportedDisplayModes)

{

string modeName=mode.Name；

if(mode.IsEnabled(WebPartManager1））

{

ListItem item=new ListItem(modeName, modeName)；

dl_SelectMode.Items.Add(item)；

}

}

}

}

protected void dl_SelectMode_SelectedIndexChanged（

object sender, EventArgs e）

{

string selectedMode=dl_SelectMode.SelectedValue；

WebPartDisplayMode mode=

WebPartManager1.SupportedDisplayModes[selectedMode]；

if(mode！=null)

{

WebPartManager1.DisplayMode=mode；

}

}

示例运行结果如图21-14与图21-15所示。其中，在图21-14中，当将下拉表的显示模式设置为“Design”之后，就可以拖动Web部件进行简单的页面布局。

布局完毕之后，当将下拉表的显示模式设置为“Browse”（如图21-15所示）或者重新启动页面，该页面都会按照图21-14所示的布局进行显示。

figure_0768_0573

图　21-14　DesignDisplayMode模式

21.4.3　EditDisplayMode（编辑模式）

在EditDisplayMode（编辑模式）中，显示编辑用户界面元素，最终用户可在其中编辑和修改Web部件控件的显示模式，同时允许拖动Web部件控件。

figure_0769_0574

图　21-15　BrowseDisplayMode模式

也就是说，如果最终用户需要编辑或修改Web部件控件，则首先必须将该页的显示模式切换至EditDisplayMode模式。其次，用户必须通过单击该控件页眉中谓词菜单上的“编辑”谓词选择特定的Web部件控件来进行编辑。控件处于编辑模式后，会显示编辑用户界面以编辑选定控件。

如下面的代码所示，在EditDisplayMode模式中，页必须包含至少一个EditorZone区域，该区域可以包括一个或多个提供的编辑控件或自定义编辑控件。

＜asp:EditorZone ID="EditorZone1"runat="server"＞

＜ZoneTemplate＞

＜asp:AppearanceEditorPart runat="server"

ID="Appearance1"＞

＜/asp:AppearanceEditorPart＞

＜asp:LayoutEditorPart runat="server"

ID="Layout1"＞

＜/asp:LayoutEditorPart＞

＜/ZoneTemplate＞

＜/asp:EditorZone＞

其中，Web部件控件集提供的编辑控件如表21-3所示。

figure_0769_0575

figure_0770_0576

下面在上面的示例代码中添加一个EditorZone编辑区域，并在该编辑区域里添加一个AppearanceEditorPart与LayoutEditorPart编辑控件。其页面代码如下所示：

＜form id="form1"runat="server"＞

＜div＞

＜asp:WebPartManager ID="WebPartManager1"runat="server"＞

＜/asp:WebPartManager＞

＜div＞

设置显示模式：

＜asp:DropDownList ID="dl_SelectMode"runat="server"

Height="20px"AutoPostBack="true"

OnSelectedIndexChanged="

dl_SelectMode_SelectedIndexChanged"Width="169px"＞

＜/asp:DropDownList＞

＜/div＞

＜table width="100%"border="0"cellspacing="0"

cellpadding="0"＞

＜tr＞

＜td valign="top"width="405px"height="100%"

align="left"＞

＜asp:WebPartZone ID="WebPartZone1"runat="server"＞

＜ZoneTemplate＞

……

＜/ZoneTemplate＞

＜/asp:WebPartZone＞

＜/td＞

＜td width="100%"height="100%"align="left"

valign="top"＞

＜asp:WebPartZone ID="WebPartZone2"runat="server"＞

＜ZoneTemplate＞

……

＜/ZoneTemplate＞

＜/asp:WebPartZone＞

＜/td＞

＜td＞

＜asp:EditorZone ID="EditorZone1"runat="server"

HeaderText="编辑区域"InstructionText=""＞

＜ZoneTemplate＞

＜asp:AppearanceEditorPart runat="server"

ID="Appearance1"＞

＜/asp:AppearanceEditorPart＞

＜asp:LayoutEditorPart runat="server"

ID="Layout1"＞

＜/asp:LayoutEditorPart＞

＜/ZoneTemplate＞

＜HeaderCloseVerb Text="关闭"/＞

＜/asp:EditorZone＞

＜/td＞

＜/tr＞

＜/table＞

＜/div＞

＜/form＞

现在，无须在后台编写任何代码就可以在编辑区域里编辑相关的Web部件，示例运行如图21-16与图21-17所示。

figure_0771_0577

图　21-16　设置为EditDisplayMode模式

figure_0771_0578

图　21-17　编辑“我的链接”部件

21.4.4　CatalogDisplayMode（目录模式）

在CatalogDisplayMode（目录模式）中显示目录用户界面元素，并允许最终用户从Web部件控件目录中向网页添加和移除页面Web部件控件。同时，它允许拖动Web部件控件。

也就是说，当最终用户需要向某页添加控件时，如果控件的目录可用，则可将该页的显示模式切换至CatalogDisplayMode模式，此时页面将显示目录用户界面。

其中，Web部件目录的用户界面由CatalogZoneBase（如CatalogZone)区域控件提供，开发人员在设计时将此区域添加到页中，然后将Web部件控件添加到该区域中，以便用户能够在运行时将这些控件添加到他们的页中。开发人员添加完这些控件后，因为启用目录模式所需的控件都已齐备，所以目录模式成为页上受支持的显示模式。

当最终用户将某页的显示模式切换到目录模式时，已添加到该页中的区域及所有Web部件控件都会变得可见，用户可以从目录中选择控件添加到页中，或者从页中移除控件。将控件添加到页中之后，将以正常浏览模式显示这些控件并更新页。

在ASP.NET中提供了三种目录部件，如下所示：

1）DeclarativeCatalogPart使你能够将WebPart的目录或其他服务器控件添加到网页，从而可以让用户在运行时更改页面上可用的控件集和功能。目录是WebPart或其他服务器控件的列表，当页面处于目录显示模式时，该列表是可见的。在设计时，可以将控件添加到DeclarativeCatalogPart控件中；在运行时，用户可以选择要在页面中查看的控件（方法是从目录列表中进行选择）。

当用户在运行时从控件目录中选择控件时，DeclarativeCatalogPart控件会将控件的新实例添加到网页中，用户可以将目录中同一控件的多个实例添加到网页中。

2）PageCatalogPart同样提供一个目录，该目录保留对用户已在单个Web部件页上关闭的所有WebPart控件（以及WebPartZoneBase区域中包含的其他服务器控件）的引用，从而使用户能够在运行时将已关闭的控件添加回页面。

也就是说，该控件充当页目录以维护先前添加到某个用户已关闭的页的所有控件，用户稍后可以将它们添加回页面。只有当网页处于目录显示模式（一种特殊视图，可让用户在页上添加和移除控件）中时，该控件才可见。只有已关闭的控件才添加到页目录。如果希望向用户提供关闭和重新打开控件的灵活性，请将一个PageCatalogPart控件添加到页。

3）ImportCatalogPart可导入WebPart控件的说明文件（或用做WebPart控件的其他ASP.NET服务器控件），这样就可以将该控件通过预先指定的设置添加到网页中。其中，说明文件与控件本身不同，它是以.WebPart文件扩展名结尾的XML文件，包含有描述控件的状态的名称/值对。这些内容将在后面详细介绍。

下面的示例演示了DeclarativeCatalogPart与PageCatalogPart目录控件的使用，如下面的代码所示：

＜form id="form1"runat="server"＞

＜div＞

＜asp:WebPartManager ID="WebPartManager1"runat="server"＞

＜/asp:WebPartManager＞

＜div＞

设置显示模式：

＜asp:DropDownList ID="dl_SelectMode"runat="server"

Height="20px"AutoPostBack="true"

OnSelectedIndexChanged="

dl_SelectMode_SelectedIndexChanged"Width="169px"＞

＜/asp:DropDownList＞

＜/div＞

＜table width="100%"border="0"cellspacing="0"

cellpadding="0"＞

＜tr＞

＜td valign="top"width="405px"height="100%"

align="left"＞

＜asp:WebPartZone ID="WebPartZone1"runat="server"＞

＜ZoneTemplate＞

……

＜/ZoneTemplate＞

＜/asp:WebPartZone＞

＜/td＞

＜td width="100%"height="100%"align="left"

valign="top"＞

＜asp:WebPartZone ID="WebPartZone2"runat="server"＞

＜ZoneTemplate＞

……

＜/ZoneTemplate＞

＜/asp:WebPartZone＞

＜/td＞

＜td height="100%"align="left"valign="top"＞

＜asp:WebPartZone ID="WebPartZone3"runat="server"/＞

＜asp:CatalogZone ID="CatalogZone1"

runat="server"HeaderText="目录"

SelectTargetZoneText="添加到区域："＞

＜ZoneTemplate＞

＜asp:DeclarativeCatalogPart

ID="DeclarativeCatalogPart1"

runat="server"Title="部件目录"＞

＜WebPartsTemplate＞

＜asp:Calendar ID="Calendar1"

runat="server"Title="时间显示"/＞

＜asp:FileUpload ID="FileUpload1"

runat="server"Title="文件上传"/＞

＜/WebPartsTemplate＞

＜/asp:DeclarativeCatalogPart＞

＜/ZoneTemplate＞

＜AddVerb Text="添加"/＞

＜CloseVerb Text="关闭"/＞

＜HeaderCloseVerb Text="关闭"/＞

＜/asp:CatalogZone＞

＜asp:EditorZone ID="EditorZone1"runat="server"

HeaderText="编辑区域"InstructionText=""＞

＜ZoneTemplate＞

＜asp:PageCatalogPart ID="PageCatalogPart1"

runat="server"Title="关闭的部件目录"/＞

＜asp:AppearanceEditorPart runat="server"

ID="Appearance1"＞

＜/asp:AppearanceEditorPart＞

＜asp:LayoutEditorPart runat="server"

ID="Layout1"＞＜/asp:LayoutEditorPart＞

＜/ZoneTemplate＞

＜HeaderCloseVerb Text="关闭"/＞

＜/asp:EditorZone＞

＜/td＞

＜/tr＞

＜/table＞

＜/div＞

＜/form＞

示例运行结果如图21-18与图21-19所示。其中，在图21-18中，当单击“关闭的目录部件”时，下面的列表里将显示所关闭的所有部件，可以重新将这些部件布局到页面上；当单击“目录部件”时，列表里将显示所有的可用目录部件供进行页面布局。

figure_0774_0579

图　21-18　编辑目录部件

figure_0774_0580

图　21-19　页面显示结果

21.4.5　ConnectDisplayMode（连接模式）

在ConnectDisplayMode（连接模式）中，显示连接用户界面元素，并允许最终用户连接Web部件控件。

一般情况下，如果用户要管理某一网页上WebPart控件之间的连接，而且已在该页上声明了一个ConnectionsZone区域，则可将该页切换至ConnectDisplayMode模式。连接显示模式显示一个用于管理连接的特殊用户界面，该界面可用来连接控件或断开控件连接，以及编辑现有连接的详细信息。下一节将详细阐述这部分内容。