Пошаговое руководство. Создание страницы веб-частей

Статья
10/22/2014

Обновлен: Ноябрь 2007

Данное пошаговое руководство — это практическая демонстрация основных компонентов и задач для создания веб-страниц, использующих элементы управления веб-частей.

Во многих веб-приложениях полезно позволять пользователям выбирать и упорядочивать нужное содержание. Веб-части ASP.NET – это набор элементов управления для создания веб-страниц с модульным содержанием, позволяющих пользователям изменять внешний вид и содержание в соответствии с их предпочтениями. Для общего знакомства с веб-частями см. раздел Общие сведения о веб-частях ASP.NET. Для описания основных компонентов в наборе элементов управления веб-частей, некоторые из которых используются в этом пошаговом руководстве, см. раздел Общие сведения о наборе элементов управления веб-частей.

В этом руководстве элементы управления веб-частей используются для создания веб-страницы, которую пользователи могут изменять или настраивать. В этом пошаговом руководстве, в частности, рассматриваются следующие задачи:

Добавление элементов управления веб-частей на страницу.
Создание пользовательского элемента управления и использование его в качестве элемента управления веб-частей.
Разрешение пользователям настраивать макет элементов управления веб-частей на странице.
Разрешение пользователям изменять внешний вид элемента управления веб-частей.
Разрешение пользователям выбирать из каталога доступных элементов управления веб-частей.

Обязательные компоненты

Для выполнения этого пошагового руководства потребуется:

Службы IIS (IIS), установленные и настроенные на компьютере, который будет узлом для сайта. Подробные сведения об установке и настройке IIS содержатся в справочной документации IIS, включенной в состав установки, или в электронной документации IIS на узле Microsoft TechNet (Internet Information Services 6.0 Technical Resources).
Веб-узел ASP.NET, который может идентифицировать отдельных пользователей. Если есть такой уже настроенный узел, можно использовать его в качестве отправной точки для данного пошагового руководства. Если нет, то сведения о создании виртуального каталога или узла содержатся в разделе Практическое руководство. Создание и настройка виртуальных каталогов в IIS 5.0 и 6.0 или Практическое руководство. Создание и настройка локальных веб-узлов ASP.NET в IIS 6.0.
Настроенные поставщик персонализации и база данных. По умолчанию персонализация веб-частей включена и использует поставщика персонализации SQL (SqlPersonalizationProvider) вместе с Microsoft SQL Server Standard Edition для хранения данных персонализации. В данном пошаговом руководстве используется SSE и стандартный поставщик SQL. При наличии установленного SSE настройка не требуется. SSE входит в состав Microsoft Visual Studio 2005 как необязательная часть установки или как бесплатно загружаемый. Дополнительные сведения содержатся на веб-странице Microsoft SQL Server 2005, экспресс-выпуск. Для использования одной из полных версий SQL Server необходимо установить и настроить базу данных служб приложений ASP.NET и настроить поставщика персонализации SQL для подключения к этой базе данных. Дополнительные сведения см. в разделе Создание и настройка базы данных служб приложения для SQL Server. Можно также создать и настроить пользовательский поставщик для использования с другими решениями, не являющимися базами данных или хранилищами SQL. Сведения и пример кода содержатся в разделе Реализация поставщика членства.

Создание простой страницы с веб-частями

В этой части пошагового руководства создается страница, использующая веб-части для отображения статического содержимого.

Примечание.
Для включения персонализации веб-частей не нужно ничего делать; в наборе элементов управления веб-частей она включена по умолчанию. При первом запуске страницы веб-частей на узле ASP.NET настраивает поставщик персонализации по умолчанию для хранения параметров персонализации пользователя. Поставщик, используемый по умолчанию, использует базу данных, созданную в подкаталоге вашего веб-узла. Дополнительные сведения о персонализации см. в разделе Общие сведения о персонализации веб-частей.

Для включения персонализации веб-частей не нужно ничего делать; в наборе элементов управления веб-частей она включена по умолчанию. При первом запуске страницы веб-частей на узле ASP.NET настраивает поставщик персонализации по умолчанию для хранения параметров персонализации пользователя. Поставщик, используемый по умолчанию, использует базу данных, созданную в подкаталоге вашего веб-узла. Дополнительные сведения о персонализации см. в разделе Общие сведения о персонализации веб-частей.

Создание веб-страницы

В текстовом редакторе создайте новый файл и добавьте следующее страничное объявление в его начало:
```
<%@ page language="VB" %>
```
```
<%@ page language="C#" %>
```
Введите теги под объявлением для создания полной структуры страницы, как показано в следующем примере.

Обратите внимание, что на странице есть пустая таблица с одной строкой и тремя столбцами. Таблица будет содержать элементы управления веб-частей, которые будут добавлены в дальнейшем.
```
<html>
<head runat="server">
  <title>Web Parts Page</title>
</head>
<body>
  <h1>Web Parts Demonstration Page</h1>
  <form runat="server" id="form1">
  <br />
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td valign="top">
      </td>
      <td valign="top">
      </td>
      <td valign="top">
      </td>
    </tr>
  </table>
  </form>
</body>
</html>
```
Назовите файл WebPartsDemo.aspx и сохраните его в каталоге веб-узла.

Следующим шагом является настройка зон. Зоны — это составные элементы управления, которые занимают указанную область страницы и содержат элементы управления веб-частей.

Добавление зоны на страницу

Непосредственно под элементом <form> на странице добавьте элемент <asp:webpartmanager>, как показано в следующем примере:
```
<asp:webpartmanager id="WebPartManager1" runat="server" />
```
Элемент управления WebPartManager требуется на каждой странице, использующей элементы управления веб-частей.
Добавьте элемент <asp:webpartzone> в первый элемент <td> в таблице и установите значения его свойств, как показано в следующем примере:

Обратите внимание, что элемент <asp:webpartzone> также содержит элемент <zonetemplate>. Элементы управления веб-частей располагаются внутри элемента <zonetemplate>.
```
<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td valign="top">
      <asp:webpartzone id="SideBarZone" runat="server" 
        headertext="Sidebar">
        <zonetemplate>
        </zonetemplate>
      </asp:webpartzone>
    </td>
```
Добавьте элемент <asp:webpartzone> во второй элемент <td> в таблице и установите значения его свойств, как показано в следующем примере.
```
<td valign="top">
   <asp:webpartzone id="MainZone" runat="server" headertext="Main">
     <zonetemplate>
     </zonetemplate>
   </asp:webpartzone>
</td>
```
Сохраните файл WebPartsDemo.aspx.

Теперь страница имеет две зоны, которыми можно управлять отдельно. Однако у зон нет содержания, поэтому следующим шагом будет его создание. В этом пошаговом руководстве происходит работа с элементами управления веб-частей, отображающими только статическое содержимое.

Макет зоны веб-частей задается элементом <zonetemplate>. В шаблон зоны можно добавить любой серверный веб-элемент управления, независимо от того, пользовательский ли это элемент управления, элемент управления веб-частей или существующий серверный элемент управления. В этом пошаговом руководстве используется серверный элемент управления Label, а в него просто добавляется статический текст. При размещении обычного серверного элемента управления ASP.NET в зону WebPartZone ASP.NET рассматривает его как элемент управления веб-частей времени выполнения, что дает возможность использовать большинство возможностей веб-частей со стандартными серверными элементами управления.

Создание содержания для зон

В элементе <zonetemplate> зоны Main добавьте элемент <asp:label> с каким-нибудь содержимым, как показано в следующем примере кода:

<asp:webpartzone id="MainZone" runat="server" headertext="Main">
  <zonetemplate>
    <asp:label id="contentPart" runat="server" title="Content">
      <h2>Welcome to My Home Page</h2>
      <p>Use links to visit my favorite sites!</p>
    </asp:label>
  </zonetemplate>
</asp:webpartzone>

Сохраните файл WebPartsDemo.aspx.
Создайте новый файл в текстовом редакторе.

Этот файл будет содержать пользовательский элемент управления, который также может быть добавлен на страницу в качестве элемента управления веб-частей.

В начало нового файла добавьте объявление элемента управления, как показано в следующем примере:

<%@ control language="VB" classname="SearchUserControl" %>

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

Примечание.
Элемент управления поиска в данном пошаговом руководстве на самом деле не реализует функциональность поиска; он используется только для демонстрации возможностей веб-частей.

Под объявлением элемента управления добавьте пару тегов <script>. Добавьте в них код для создания персонально настраиваемого свойства.

Обратите внимание, что свойство ResultsPerPage имеет атрибут Personalizable. Это свойство позволит пользователям элемента управления настраивать количество результатов поиска, возвращаемых на страницу, если будет элемент управления для редактирования с интерфейсом пользователя (UI) для изменения параметров в режиме конструктора.

Убедитесь, что код элемента управления выглядит так, как показано в следующем примере кода:
```
<%@ control language="VB" classname="SearchUserControl" %>
<script runat="server">
  Private results As Integer

  <Personalizable()> _
  Property ResultsPerPage() As Integer

    Get
      Return results
    End Get

    Set(ByVal value As Integer)
      results = value
    End Set

  End Property
</script>
```
```
<%@ control language="C#" classname="SearchUserControl" %>
<script runat="server">
  private int results;

  [Personalizable]
  public int ResultsPerPage
  {
    get
      {return results;}

    set
      {results = value;}
  }    
</script>
```

Добавьте текстовое поле и кнопку под элементом <script> для предоставления пользовательского интерфейса для элемента управления поиска, как показано в следующем примере:

<asp:textbox runat="server" id="inputBox"></asp:textbox>
<br />
<asp:button runat="server" id="searchButton" text="Search" />

Примечание о безопасности.
В этом элементе управления имеется текстовое поле, принимающее ввод пользователя, что является потенциальной угрозой безопасности. По умолчанию страницы веб-форм ASP.NET проверяют введенные пользователем данные на предмет наличия в них HTML-элементов или сценариев. Дополнительные сведения см. в разделе Общие сведения об использовании сценариев.

В этом элементе управления имеется текстовое поле, принимающее ввод пользователя, что является потенциальной угрозой безопасности. По умолчанию страницы веб-форм ASP.NET проверяют введенные пользователем данные на предмет наличия в них HTML-элементов или сценариев. Дополнительные сведения см. в разделе Общие сведения об использовании сценариев.

Назовите файл SearchUserControlVB.ascx или SearchUserControlCS.ascx (в зависимости от того, какой язык используется) и сохраните его в том же каталоге, что и страницу WebPartsDemo.aspx.

Теперь предстоит добавить два элемента управления в зону Sidebar: один содержит список ссылок, другой — пользовательский элемент управления, созданный в предыдущей процедуре. Ссылки добавляются как один стандартный серверный элемент управления Label, аналогично созданию статического текста в зоне Main. Однако, хотя отдельные серверные элементы управления, содержащиеся в пользовательском элементе управления, могут содержаться непосредственно в зоне, в данном случае это невозможно. Вместо этого они являются частью созданного в предыдущей процедуре пользовательского элемента управления. Это иллюстрирует распространенный путь: упаковка любых элементов управления и требуемых дополнительных функциональных возможностей в пользовательский элемент управления, а затем ссылка на него в зоне как на элемент управления веб-частей.

Во время выполнения ASP.NET «оборачивает» оба элемента управления в GenericWebPart. Когда элемент управления GenericWebPart «оборачивает» серверный веб-элемент управления, универсальный элемент управления «Веб-часть» является родительским. Поэтому есть доступ к серверному элементу управления через свойство ChildControl родительского элемента управления. Универсальные элементы управления «Веб-часть» позволяют стандартным серверным элементам управления иметь поведение и атрибуты элементов управления веб-частей, которые наследуются от класса WebPart.

Создание содержания зоны боковой панели

Откройте страницу WebPartsDemo.aspx в текстовом редакторе.
В верхней части страницы, сразу после объявления страницы, добавьте следующее объявление для ссылки на только что созданный пользовательский элемент управления:
```
<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrolvb.ascx" %>
```
```
<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrolcs.ascx" %>
```

Добавьте элемент управления Label, содержащий несколько ссылок, в элемент <zonetemplate> зоны Sidebar. Под элементом управления опишите ссылку на созданный ранее пользовательский элемент управления, как показано в следующем примере кода:

<asp:webPartZone id="SidebarZone" runat="server" 
  headertext="Sidebar">
  <zonetemplate>
    <asp:label runat="server" id="linksPart" title="Links">
      <a href="www.asp.net">ASP.NET site</a> 
      <br />
      <a href="www.gotdotnet.com">GotDotNet</a> 
      <br />
      <a href="www.contoso.com">Contoso.com</a> 
      <br />
    </asp:label>
    <uc1:SearchUserControl id="searchPart" runat="server"
      title="Search" />
  </zonetemplate>
</asp:WebPartZone>

Сохраните файл WebPartsDemo.aspx.

Теперь можно тестировать страницу.

Проверка страницы

Загрузите страницу в обозреватель.

На странице отображаются две зоны. Каждый элемент управления на странице отображается со стрелкой вниз в его заголовке, содержащем раскрывающееся меню, которое называется «меню команд». Команды — это действия, которые пользователь может выполнить с серверным элементом управления: его закрытие, минимизация или редактирование, например. Каждый элемент в меню команд — это команда. На следующем рисунке показана страница:
Щелкните стрелку вниз в заголовке элемента управления для отображения его меню команд, затем выберите Свернуть.

Элемент управления свернут.
В меню команд выберите команду Восстановить.

Это показывает разные состояния визуального отображения элементов управления веб-частей.

Разрешение пользователям редактировать страницы и изменять макет

Пользователи могут изменять макет элементов управления веб-частей, перетаскивая их из одной зоны в другую. Можно также позволить пользователям редактировать характеристики элементов управления, такие как внешний вид, макет и поведение. Набор элементов управления веб-частей обеспечивает базовые функции редактирования для элементов управления WebPart. (Хотя это не будет сделано в данном пошаговом руководстве, можно также создать пользовательский редактор элементов управления, позволяющий пользователям редактировать возможности элементов управления WebPart.) Как и с изменением расположения элемента управления WebPart, редактирование его свойств зависит от персонализации ASP.NET в том, что касается сохранения внесенных пользователем изменений.

В этой части пошагового руководства пользователям будет позволено редактировать основные характеристики любого элемента управления WebPart на странице.

Создание элемента управления пользователя, который позволяет изменять макет страницы

Создайте новый файл в текстовом редакторе и скопируйте в него следующий код.

Этот код использует возможности набора элементов управления веб-частей, позволяющие странице изменять ее вид или режим отображения. Также при определенных режимах отображения позволяется изменять физический внешний вид и макет страницы.

<%@ control language="vb" classname="DisplayModeMenuVB"%>
<script runat="server">
  ' Use a field to reference the current WebPartManager control.
  Dim _manager As WebPartManager

  Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
    AddHandler Page.InitComplete, AddressOf InitComplete
  End Sub

  Sub InitComplete(ByVal sender As Object, ByVal e As System.EventArgs)
    _manager = WebPartManager.GetCurrentWebPartManager(Page)

    Dim browseModeName As String = _
      WebPartManager.BrowseDisplayMode.Name

    ' Fill the drop-down list with the names of supported display modes.
    Dim mode As WebPartDisplayMode
    For Each mode In _manager.SupportedDisplayModes
      Dim modeName As String = mode.Name
      ' Make sure a mode is enabled before adding it.
      If mode.IsEnabled(_manager) Then
        Dim item As New ListItem(modeName, modeName)
        DisplayModeDropdown.Items.Add(item)
      End If
    Next mode

    ' If Shared scope is allowed for this user, display the 
    ' scope-switching UI and select the appropriate radio button 
    ' for the current user scope.
    If _manager.Personalization.CanEnterSharedScope Then
      Panel2.Visible = True
      If _manager.Personalization.Scope = _
        PersonalizationScope.User Then
        RadioButton1.Checked = True
      Else
        RadioButton2.Checked = True
      End If
    End If
  End Sub

  ' Change the page to the selected display mode.
  Sub DisplayModeDropdown_SelectedIndexChanged(ByVal sender As Object, _
    ByVal e As EventArgs)

    Dim selectedMode As String = DisplayModeDropdown.SelectedValue 
    Dim mode As WebPartDisplayMode = _
      _manager.SupportedDisplayModes(selectedMode)
    If Not (mode Is Nothing) Then
      _manager.DisplayMode = mode
    End If
  End Sub

  ' Set the selected item equal to the current display mode.
  Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs)
    Dim items As ListItemCollection = DisplayModeDropdown.Items
    Dim selectedIndex As Integer = _
      items.IndexOf(items.FindByText(_manager.DisplayMode.Name))
    DisplayModeDropdown.SelectedIndex = selectedIndex
  End Sub

  ' Reset all of a user's personalization data for the page.
  Protected Sub LinkButton1_Click(ByVal sender As Object, _
    ByVal e As EventArgs)

    _manager.Personalization.ResetPersonalizationState()

  End Sub

  ' If not in User personalization scope, toggle into it.
  Protected Sub RadioButton1_CheckedChanged(ByVal sender As _
    Object, ByVal e As EventArgs)
    If _manager.Personalization.Scope = _
      PersonalizationScope.Shared Then
      _manager.Personalization.ToggleScope()
    End If
  End Sub

  ' If not in Shared scope, and if user has permission, toggle the 
  ' scope.
  Protected Sub RadioButton2_CheckedChanged(ByVal sender As _
    Object, ByVal e As EventArgs)
    If _manager.Personalization.CanEnterSharedScope AndAlso _
      _manager.Personalization.Scope = _
         PersonalizationScope.User Then
      _manager.Personalization.ToggleScope()
    End If
  End Sub

</script>
<div>
  <asp:Panel ID="Panel1" runat="server" 
    Borderwidth="1" 
    Width="230" 
    BackColor="lightgray"
    Font-Names="Verdana, Arial, Sans Serif" >
    <asp:Label ID="Label1" runat="server" 
      Text="&nbsp;Display Mode" 
      Font-Bold="true"
      Font-Size="8"
      Width="120" />
    <div>
    <asp:DropDownList ID="DisplayModeDropdown" runat="server"  
      AutoPostBack="true" 
      Width="120"
      OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
    <asp:LinkButton ID="LinkButton1" runat="server"
      Text="Reset User State" 
      ToolTip="Reset the current user's personalization data for 
      the page."
      Font-Size="8" 
      OnClick="LinkButton1_Click" />
    </div>
    <asp:Panel ID="Panel2" runat="server" 
      GroupingText="Personalization Scope"
      Font-Bold="true"
      Font-Size="8" 
      Visible="false" >
      <asp:RadioButton ID="RadioButton1" runat="server" 
        Text="User" 
        AutoPostBack="true"
        GroupName="Scope" 
        OnCheckedChanged="RadioButton1_CheckedChanged" />
      <asp:RadioButton ID="RadioButton2" runat="server" 
        Text="Shared" 
        AutoPostBack="true"
        GroupName="Scope" 
        OnCheckedChanged="RadioButton2_CheckedChanged" />
    </asp:Panel>
  </asp:Panel>
</div>

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

 // Use a field to reference the current WebPartManager control.
  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 drop-down list 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, modeName);
        DisplayModeDropdown.Items.Add(item);
      }
    }

    // If Shared scope is allowed for this user, display the 
    // scope-switching UI and select the appropriate radio 
    // button for the current user scope.
    if (_manager.Personalization.CanEnterSharedScope)
    {
      Panel2.Visible = true;
      if (_manager.Personalization.Scope == 
        PersonalizationScope.User)
        RadioButton1.Checked = true;
      else
        RadioButton2.Checked = true;
    }
  }

  // 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;
  }

  // Set the selected item equal to the current display mode.
  void Page_PreRender(object sender, EventArgs e)
  {
    ListItemCollection items = DisplayModeDropdown.Items;
    int selectedIndex = 
      items.IndexOf(items.FindByText(_manager.DisplayMode.Name));
    DisplayModeDropdown.SelectedIndex = selectedIndex;
  }

  // Reset all of a user's personalization data for the page.
  protected void LinkButton1_Click(object sender, EventArgs e)
  {
    _manager.Personalization.ResetPersonalizationState();
  }

  // If not in User personalization scope, toggle into it.
  protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
  {
    if (_manager.Personalization.Scope == 
      PersonalizationScope.Shared)
      _manager.Personalization.ToggleScope();
  }

  // If not in Shared scope, and if user has permission, toggle 
  // the scope.
  protected void RadioButton2_CheckedChanged(object sender, 
    EventArgs e)
  {
    if (_manager.Personalization.CanEnterSharedScope && 
        _manager.Personalization.Scope == 
          PersonalizationScope.User)
        _manager.Personalization.ToggleScope();
  }
</script>
<div>
  <asp:Panel ID="Panel1" runat="server" 
    Borderwidth="1" 
    Width="230" 
    BackColor="lightgray"
    Font-Names="Verdana, Arial, Sans Serif" >
    <asp:Label ID="Label1" runat="server" 
      Text="&nbsp;Display Mode" 
      Font-Bold="true"
      Font-Size="8"
      Width="120" />
    <div>
    <asp:DropDownList ID="DisplayModeDropdown" runat="server"  
      AutoPostBack="true" 
      Width="120"
      OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
    <asp:LinkButton ID="LinkButton1" runat="server"
      Text="Reset User State" 
      ToolTip="Reset the current user's personalization data for 
      the page."
      Font-Size="8" 
      OnClick="LinkButton1_Click" />
    </div>
    <asp:Panel ID="Panel2" runat="server" 
      GroupingText="Personalization Scope"
      Font-Bold="true"
      Font-Size="8" 
      Visible="false" >
      <asp:RadioButton ID="RadioButton1" runat="server" 
        Text="User" 
        AutoPostBack="true"
        GroupName="Scope" 
        OnCheckedChanged="RadioButton1_CheckedChanged" />
      <asp:RadioButton ID="RadioButton2" runat="server" 
        Text="Shared" 
        AutoPostBack="true"
        GroupName="Scope" 
        OnCheckedChanged="RadioButton2_CheckedChanged" />
    </asp:Panel>
  </asp:Panel>
</div>

Назовите файл Displaymodemenu.ascx и сохраните его в каталог, используемый для остальных страниц.

Чтобы разрешить пользователям изменять макет:

На странице WebPartsDemo.aspx добавьте директиву <register> для регистрации на странице нового пользовательского элемента управления:
```
<%@ register TagPrefix="uc2" 
  TagName="DisplayModeMenuVB" 
  Src="DisplayModeMenu.ascx" %>
```
```
<%@ register TagPrefix="uc2" 
  TagName="DisplayModeMenuCS" 
  Src="DisplayModeMenu.ascx" %>
```
Добавьте декларативную ссылку на пользовательский элемент управления сразу после элемента <asp:webpartmanager>:
```
<uc2:DisplayModeMenuVB ID="DisplayModeMenu1" runat="server" />
```
```
<uc2:DisplayModeMenuCS ID="DisplayModeMenu1" runat="server" />
```

Добавьте элемент <asp:editorzone> в третий элемент <td> в таблице. Добавьте элементы <zonetemplate>, <asp:appearanceeditorpart> и <asp:layouteditorpart>.

Когда закончите, код будет выглядеть так, как показано в следующем примере:

<td valign="top">
  <asp:editorzone id="EditorZone1" runat="server">
    <zonetemplate>
      <asp:appearanceeditorpart 
        runat="server" 
        id="AppearanceEditorPart1" />
      <asp:layouteditorpart 
        runat="server" 
        id="LayoutEditorPart1" />
    </zonetemplate>
  </asp:editorzone>
</td>

Примечание.
Два дополнительных элемента управления, BehaviorEditorPart и PropertyGridEditorPart, не используются, так как они требуют настройки, выходящей за рамки этого пошагового руководства.

Сохраните файл WebPartsDemo.aspx.

Вы создали пользовательский элемент управления, позволяющий изменять режим отображения и разметку страницы, и сослались на него на основной веб-странице.

Теперь можно проверить возможность редактировать страницы и изменять макет.

Чтобы проверить возможность изменений макета:

Загрузите страницу в обозреватель.
Щелкните раскрывающееся меню Режим отображения и выберите Изменить.

Отобразились заголовки зон.
Перетащите элемент управления Ссылки за его заголовок из зоны Sidebar в нижнюю часть зоны Main.

Страница будет выглядеть аналогично следующему снимку экрана:
Щелкните раскрывающееся меню Режим отображения и выберите Обзор.

Страница обновится, имена зон исчезнут, а элемент Ссылки останется там, где вы его поставили.
Закройте обозреватель, а затем загрузите страницу повторно.

Внесенные изменения сохранились для будущих сеансов обозревателя, что доказывает работоспособность персонализации.
В меню Режим отображения выберите Изменить.
Щелкните стрелку, чтобы отобразить меню команд элемента управления Ссылки и выберите Изменить.

Показывается элемент управления EditorZone, отображая добавленные элементы управления EditorPart.
В разделе Внешний вид элемента управления редактирования измените Название на «My Favorites», в раскрывающемся списке Chrome-тип выберите Только название, а затем нажмите Применить.

Следующий рисунок показывает измененную страницу, по-прежнему в режиме редактирования:
Щелкните меню Режим отображения и выберите Обзор для возврата в режим обзора.

Элемент управления теперь имеет обновленный заголовок и не имеет границы, как показано на следующем снимке экрана:

Добавление веб-частей во время выполнения

Кроме того, можно разрешить пользователям добавлять элементы управления веб-частей на их страницы во время выполнения. Чтобы сделать это, настройте в странице каталог веб-частей, который содержит список элементов управления веб-частей, которые надо сделать доступными для пользователей.

Примечание.
В данном пошаговом руководстве создается шаблон, содержащий элементы управления FileUpload и Calendar. Это позволит вам проверить основные функциональные возможности каталога, но у полученных в результате элементов управления веб-частей не будет реальных функциональных возможностей. Если имеется пользовательский веб-элемент управления или пользовательский элемент управления, можно заменить его на статическое содержимое.

В данном пошаговом руководстве создается шаблон, содержащий элементы управления FileUpload и Calendar. Это позволит вам проверить основные функциональные возможности каталога, но у полученных в результате элементов управления веб-частей не будет реальных функциональных возможностей. Если имеется пользовательский веб-элемент управления или пользовательский элемент управления, можно заменить его на статическое содержимое.

Чтобы разрешить пользователям добавлять веб-части во время выполнения:

В файле WebPartsDemo.aspx добавьте следующее:

Элемент <asp:catalogzone> в третьем столбце таблицы сразу под элементом <asp:editorzone>.
Элемент <zonetemplate>. А в нем <asp:declarativecatalogpart> и <webpartstemplate>.
Элементы <asp:fileupload> и <asp:calendar>.

Код будет выглядеть примерно следующим образом:

<asp:catalogzone id="CatalogZone1" runat="server" 
  headertext="Add Web Parts">
  <zonetemplate>
    <asp:declarativecatalogpart id="catalogpart1" 
      runat="server" Title="My Catalog">
      <webPartsTemplate>
         <asp:fileupload runat="server" id="upload1" 
           title="Upload Files" />
         <asp:calendar runat="server" id="cal1" 
            Title="Team Calendar" />
      </webPartsTemplate>
    </asp:declarativecatalogpart>
  </zonetemplate>
</asp:catalogzone>

Примечание.
Элементы управления EditorZone и CatalogZone могут быть в одной ячейке таблицы, так как одновременно они не отображаются.

Сохраните файл WebPartsDemo.aspx.

Теперь можно проверить каталог.

Проверка каталога веб-частей

Загрузите страницу в обозреватель.
Щелкните раскрывающееся меню Режим отображения и выберите Каталог.

Отобразится каталог с именем Add Web Parts.
Перетащите элемент управления My Favorites из зоны Main в верхнюю часть зоны Sidebar.
В каталоге Add Web Parts установите оба флажка, а затем выберите Main из раскрывающегося списка Добавить к.
Нажмите в каталоге кнопку Добавить.

Элементы управления добавляются в зону Main. Если требуется, можно добавлять несколько экземпляров элемента управления из каталога на страницу.

На следующем снимке экрана показана страница с элементом управления отправки файлов и календарем в зоне Main:
Щелкните раскрывающееся меню Режим отображения и выберите Обзор.

Каталог исчезает и страница обновляется.
Закройте обозреватель. Загрузите страницу повторно.

Изменения сохранились.

Следующие действия

В этом пошаговом руководстве показаны основные принципы использования простых элементов управления веб-частей на веб-странице ASP.NET. При желании можно поэкспериментировать с более сложными возможности веб-частей. Например, можно создавать элементы управления веб-частей как пользовательские элементы управления или специализированные элементы управления. Дополнительные сведения см. в документации по классу WebPart.

См. также

Поделиться через