ASP.NET - EditorZone Web 服务器控件概述

来源:互联网 发布:眼镜试戴软件 编辑:程序博客网 时间:2024/04/30 14:28

      Web 部件的一项主要功能是使最终用户能够个性化网页并保存其个性化设置。修改 Web 部件页的一个方面包括编辑可见 WebPart 控件的外观、布局、行为和其他属性。

Web 部件控件集中的几种控件可提供编辑功能。其中包括 EditorZone 控件,该控件是 Web 部件控件集中用于承载网页上的 EditorPart 控件的主控件。

 

下表提供了可由 EditorZone 承载的 EditorPart 控件列表以及每个控件的说明。

EditorPart 控件

说明

AppearanceEditorPart

允许用户在运行时自定义 WebPart 控件的视觉属性,例如宽度、高度和标题。

BehaviorEditorPart

允许用户在运行时自定义 WebPart 控件的行为属性,例如显示最小化、关闭和编辑按钮。

LayoutEditorPart

允许用户在运行时自定义 WebPart 控件的布局属性,例如选择最小化或正常状态,或设置控件将出现在目标区域中的位置的索引。

PropertyGridEditorPart

允许用户在运行时编辑已声明为 WebPart 控件的一部分的自定义属性。

      当用户将 Web 部件页置于编辑模式时,EditorZone 控件将变为可见的。

EditorZone Web 服务器控件是一个区域控件。

 

一、EditorZone

      作为 Web 部件控件集中的主要控件,用以承载网页上的 EditorPart 控件。

      Web 部件控件集中,“区域”是一种覆盖网页上已定义区域且包含服务器控件的复合控件。区域的主要功能是对其所含的控件进行布局,并为这些控件提供公共的用户界面 (UI)

EditorZone 控件是 Web 部件控件集中的一个基本控件。Web 部件的一项主要功能是使最终用户能够根据个人的喜好来修改(或个性化)网页,并保存其个性化设置以供将来的浏览器会话使用。编辑是修改 Web 部件页的一个方面;用户可以编辑可见的 WebPart 控件的外观、布局、行为和其他属性。Web 部件控件集中的几种控件(包括 EditorZone 控件)提供编辑功能。

EditorZone 控件在 Web 部件页进入编辑模式时变为可见,并使可用来个性化 WebPart 控件的各种 EditorPart 控件变为可用状态。EditorZone 控件与其父级(EditorZoneBase 类)非常相似,但有一个主要的区别:EditorZone 控件提供了一个区域模板,该模板在它的 ZoneTemplate 属性中被引用。该区域模板增加了声明页持久性格式内容的能力。网页开发人员可以在网页的声明性标记中放置 EditorZone 控件,添加子 <zonetemplate> 元素,并在该 <zonetemplate> 元素内添加对 EditorPart 控件的声明性引用。

EditorZone 控件还有一个 CreateEditorParts 方法,该方法重写 EditorZoneBase 类中的一个基方法。只有通过此方法,EditorZone 控件才能创建区域模板来包含以声明方式添加到区域中的任何 EditorPart 控件。

说明: EditorZone 用户界面中的按钮需要客户端脚本才能正常工作。如果浏览器中禁用了脚本,用户将无法通过 EditorZone 用户界面执行操作。

      对继承者的说明:如果希望创建自定义 EditorZone 区域,从而对编辑用户界面的呈现获取更大的控制,只要您不需要为那些以声明方式向区域添加 EditorPart 控件的页面开发人员提供区域模板支持,就可以直接从 EditorZoneBase 类继承。在这种情况下,需要以编程方式向区域添加所有 EditorPart 控件。如果要提供区域模板支持,则应从 EditorZone 类继承。

 

1.1、示例

下面的代码示例演示了几种 EditorZone 类的声明式用法和编程式用法。该示例创建一个从 EditorZone 类继承的自定义编辑器区域,并在 Web 部件页中使用它。

该代码示例包括三部分:

·一个用户控件,用于更改网页上的显示模式。

·一个引用自定义 EditorZone 控件的网页。

·对该示例工作原理的说明。

 

此代码示例的第一部分是一个用户控件,该控件使用户能够更改网页上的显示模式。

<%@ control language="C#" classname="DisplayModeMenuCS"%>

 

<script runat="server">

 

 // Use a field to reference the current WebPartManager.

  WebPartManager _manager;

 

  void Page_Init(object sender, EventArgs e)

  {

    Page.InitComplete += new EventHandler(InitComplete);

  } 

 

  void InitComplete(object sender, System.EventArgs e)

  {

    _manager = WebPartManager.GetCurrentWebPartManager(Page);

 

    String browseModeName = WebPartManager.BrowseDisplayMode.Name;

 

    // Fill the dropdown with the names of supported display modes.

    foreach (WebPartDisplayMode mode in _manager.SupportedDisplayModes)

    {

      String modeName = mode.Name;

      // Make sure a mode is enabled before adding it.

      if (mode.IsEnabled(_manager))

      {

        ListItem item = new ListItem(modeName + " Mode", modeName);

        DisplayModeDropdown.Items.Add(item);

      }

    }

 

  }

 

  // Change the page to the selected display mode.

  void DisplayModeDropdown_SelectedIndexChanged(object sender,

    EventArgs e)

  {

    String selectedMode = DisplayModeDropdown.SelectedValue;

 

    WebPartDisplayMode mode = _manager.SupportedDisplayModes[selectedMode];

    if (mode != null)

      _manager.DisplayMode = mode;

 

  }

 

  void Page_PreRender(object sender, EventArgs e)

  {

    DisplayModeDropdown.SelectedValue = _manager.DisplayMode.Name;

  }

 

</script>

<div>

  <asp:DropDownList ID="DisplayModeDropdown"

    runat="server" 

    AutoPostBack="true"

    OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />

</div>

 

      该代码示例的第二部分为网页。该页顶部附近是该用户控件的 Register 指令。在页面中声明该用户控件标记时,对该元素使用 uc1: 前缀。注意,在 <asp:WebPartZone> 元素的下方是一个 <asp:EditorZone> 元素,后者包含几个 EditorPart 控件,并具有各种标记和属性,可进行设置以确定该元素的外观和行为。还有许多以编程方式访问各个 EditorZone 控件成员的方法。

<%@ Page Language="C#" %>

<%@ register tagprefix="uc1"

  tagname="DisplayModeMenuCS"

  src="displaymodecs.ascx" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

 

  void Button1_Click(object sender, EventArgs e)

  {

    if (EditorZone1.ApplyVerb.Enabled == true)

      EditorZone1.ApplyVerb.Enabled = false;

    else

      EditorZone1.ApplyVerb.Enabled = true;

  }

 

  void Button2_Click(object sender, EventArgs e)

  {

    EditorZone1.BorderWidth = 2;

    EditorZone1.BorderColor = System.Drawing.Color.DarkBlue;

  }

 

  void Button3_Click(object sender, EventArgs e)

  {

    Label1.Text = "<br />";

    foreach (EditorPart part in EditorZone1.EditorParts)

    {

      Label1.Text += part.ID + "<br />";

    }

  }

 

  void Button4_Click(object sender, EventArgs e)

  {

    EditorZone1.InstructionText = "My custom instruction text.";

  }

</script>

 

<html  >

<head id="Head1" runat="server">

  <title>EditorZoneBase Examples</title>

</head>

<body>

  <form id="form1" runat="server">

    <asp:WebPartManager ID="mgr" runat="server" />

    <uc1:DisplayModeMenuCS runat="server" id="displaymodemenu1" />

    <asp:WebPartZone ID="WebPartZone1" runat="server">

      <ZoneTemplate>

        <asp:BulletedList

          ID="BulletedList1"

          Runat="server"

          DisplayMode="HyperLink"

          Title="Favorite Links" >

          <asp:ListItem Value="http://msdn.microsoft.com">

            MSDN

          </asp:ListItem>

          <asp:ListItem Value="http://www.asp.net">

            ASP.NET

          </asp:ListItem>

          <asp:ListItem Value="http://www.msn.com">

            MSN

          </asp:ListItem>

        </asp:BulletedList>

        <asp:Calendar ID="Calendar1" Runat="server"

          Title="My Calendar" />

      </ZoneTemplate>

    </asp:WebPartZone>

    <asp:EditorZone ID="EditorZone1" runat="server" >

      <VerbStyle Font-Italic="true" />

      <EditUIStyle BackColor="lightgray" />

      <PartChromeStyle BorderWidth="1" />

      <LabelStyle Font-Bold="true" />

      <CancelVerb Text="Cancel Changes" />

      <ZoneTemplate>

        <asp:AppearanceEditorPart ID="AppearanceEditorPart1"

          runat="server" />

        <asp:LayoutEditorPart ID="LayoutEditorPart1"

          runat="server" />

      </ZoneTemplate>

    </asp:EditorZone>

    <hr />

    <asp:Button ID="Button1" runat="server" Width="200"

      Text="Enable or Disable Apply" OnClick="Button1_Click" />

    <br />

    <asp:Button ID="Button2" runat="server" Width="200"

      Text="Set Zone BorderColor" OnClick="Button2_Click" />

    <br />

    <asp:Button ID="Button3" runat="server" Width="200"

      Text="Display EditorPart Collection" OnClick="Button3_Click" />

    <asp:Label ID="Label1" runat="server" />

    <br />

    <asp:Button ID="Button4" runat="server" Width="200"

      Text="Set Instruction Text" OnClick="Button4_Click" />

  </form>

</body>

</html>

 

      在浏览器中加载页时,可以从下拉列表中选择“编辑模式”以切换到编辑模式。若要显示编辑用户界面,可以在两个控件之一的标题栏中单击谓词菜单(向下箭头),然后单击“编辑”编辑该控件。当编辑用户界面可见时,您会看到 EditorZone 类成员的声明式用法和编程式用法的效果。