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

Статья
10/22/2014

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

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

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

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

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

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

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

Узел, который может идентифицировать отдельных пользователей. Если какой-либо узел уже работает с членством ASP.NET, его можно использовать в данном пошаговом руководстве. В противном случае данное пошаговое руководство содержит указания, помогающие настроить узел на идентификацию пользователя по имени учетной записи Windows.
Среда визуального проектирования для создания веб-страниц. В настоящем руководстве используется Visual Studio 2005.
Настроенные поставщик персонализации и база данных. По умолчанию персонализация веб-частей включена и использует поставщик персонализации SQL (SqlPersonalizationProvider) вместе с Microsoft SQL Server, экспресс-выпуск для хранения данных персонализации. В данном руководстве используется SQL Server, экспресс-выпуск и стандартный поставщик SQL. При наличии установленного SQL Server, экспресс-выпуск настройка не требуется. SQL Server, экспресс-выпуск входит в состав Microsoft Visual Studio 2005 как необязательная часть установки. Программу также можно бесплатно загрузить с веб-узла Microsoft.com. Для использования полной версии SQL Server необходимо установить и настроить базу данных служб приложения ASP.NET и настроить поставщик персонализации SQL для подключения к этой базе данных. Дополнительные сведения см. в разделе Создание и настройка базы данных служб приложения для SQL Server.

Создание и настройка веб-узла

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

Создание нового веб-узла

В Visual Studio создайте новый веб-узел ASP.NET.

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

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

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

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

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

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

Закройте страницу по умолчанию и добавьте новую страницу с именем WebPartsDemo.aspx.
Перейдите в режим конструктора.
В меню Вид выберите элемент Визуальные средства и убедитесь в том, что выбраны параметры Невизуальные элементы управления ASP.NET и Сведения.

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

Непосредственно перед оператором body добавьте новую строку.

Примечание.
Если это не удается сделать, выберите элемент div и дважды нажмите клавишу ESC для выбора элемента body, нажмите клавишу СТРЕЛКА ВЛЕВО, а затем нажмите ВВОД.

Установите точку вставки перед знаком новой строки.
В списке Формат блока в панели инструментов выберите элемент Заголовок 1.
В заголовке добавьте текст Страница демонстрации веб-частей.
С вкладки панели элементов WebParts перетащите на страницу элемент управления WebPartManager между знаком новой строки и открывающим тегом <div>.

Элемент управления WebPartManager не будет иметь графического вывода, а отобразится на рабочей области конструктора как серый прямоугольник.
Установите точку вставки внутрь элемента div.
В меню Таблица выберите команду Вставить таблицу, укажите таблицу, состоящую из одной строки и трех столбцов и выберите ОК.
Перетащите элемент управления WebPartZone в левый столбец таблицы. Правой кнопкой мыши щелкните элемент управления WebPartZone, выберите пункт Свойства и установите следующие свойства:

ID: SidebarZone

HeaderText: Боковая панель
Перетащите второй элемент управления WebPartZone в средний столбец таблицы и задайте следующие свойства:

ID: MainZone

HeaderText: Основная зона
Сохраните файл, но не закрывайте его.

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

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

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

В представлении конструирования перетащите элемент управления Label с вкладки панели элементов Стандарт в область содержимого, свойство ID которой равно MainZone.
Перейдите в представление исходного кода.

Обратите внимание на то, что элемент zonetemplate был добавлен для создания оболочки элемента управления Label в MainZone.
Добавьте атрибут с именем title к элементу asp:label и присвойте ему значение «Содержимое». Удалите атрибут Text="Label" из элемента asp:label. Внутри элемента asp:label добавьте любой текст, например <h2>Добро пожаловать на мою домашнюю страницу</h2>. Код должен выглядеть следующим образом:
```
<asp:webpartzone id="MainZone" runat="server" headertext="Main">
   <zonetemplate>
      <asp:label id="Label1" runat="server" title="Content">
         <h2>Welcome to My Home Page</h2>
      </asp:label>
   </zonetemplate>
</asp:webpartzone>
```
Сохраните файл.

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

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

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

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

Перейдите в режим конструктора.
С вкладки Стандартные панели элементов перетащите на страницу элемент управления TextBox.
Установите точку вставки после добавленного текстового поля и нажмите ВВОД для добавления новой строки.
Перетащите на страницу элемент управления Button на новую строку под добавленным текстом.

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

<%@ control language="VB" classname="SearchUserControl" %>
<asp:textbox runat="server" id="TextBox1"></asp:textbox>
<br />
<asp:button runat="server" id="Button1" text="Search" />

<%@ control language="C#" classname="SearchUserControl" %>
<asp:textbox runat="server" id=" TextBox1"></asp:textbox>
<br />
<asp:button runat="server" id=" Button1" text="Search" />

Сохраните и закройте файл.

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

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

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

Во время выполнения элемент управления веб-частей окружает оба элемента элементами управления GenericWebPart. Когда элемент управления GenericWebPart создает оболочку для серверного веб-элемента управления, универсальный элемент управления веб-части является родительским. Это позволяет получить доступ к серверному элементу управления через свойство ChildControl родительского элемента управления. Использование универсальных элементов управления веб-частей позволяет стандартным серверным элементам управления иметь поведение и атрибуты элементов управления веб-частей, которые наследуются от класса WebPart.

Чтобы добавить элементы управления веб-частей в зону боковой панели

Откройте страницу WebPartsDemo.aspx.
Перейдите в режим конструктора.
Перетащите созданную страницу пользовательского элемента управления SearchUserControl.ascx из Обозревателя решений в зону, свойство ID которой имеет значение SidebarZone.
Сохраните страницу WebPartsDemo.aspx.
Перейдите в представление исходного кода.

Внутри элемента asp:webpartzone для SidebarZone добавьте элемент asp:label, содержащий ссылки, а в тег пользовательского элемента управления — атрибут Title со значением Поиск, как показано в следующем примере:

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

Сохраните и закройте файл.

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

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

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

На странице отображаются две зоны. На следующем рисунке показана страница.

Демонстрационная страница веб-частей с двумя зонами

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

Предоставление пользователям возможности редактирования страниц и изменения макета

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

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

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

В Visual Studio в меню Файл выберите команду Создать, а затем — Файл.
В диалоговом окне Добавление нового элемента выберите Пользовательский веб-элемент управления. Назовите новый файл DisplayModeMenu.ascx. Снимите флажок Поместить код источника в отдельный файл.
Нажмите Добавить, чтобы создать новый элемент управления.
Перейдите в представление исходного кода.

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

<%@ 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" />
    <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" />
    <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" />
    <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" />
    <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>

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

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

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

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

Откройте страницу WebPartsDemo.aspx.
Перейдите в режим конструктора.
Установите точку вставки после добавленного ранее элемента управления WebPartManager. Нажмите ВВОД, чтобы создать пустую строку после элемента управления WebPartManager.
Перетащите созданный элемент управления (DisplayModeMenu.ascx) на страницу WebPartsDemo.aspx и вставьте его на пустой строке.
Перетащите элемент управления EditorZone со вкладки панели элементов WebParts в оставшуюся открытую ячейку таблицы на странице WebPartsDemo.aspx.
С вкладки панели элементов WebParts перетащите элементы управления AppearanceEditorPart и LayoutEditorPart в элемент управления EditorZone.

Перейдите в представление исходного кода.

Код в ячейке таблицы будет похож на следующий код.

<td valign="top">
  <asp:EditorZone ID="EditorZone1" runat="server">
    <ZoneTemplate>
      <asp:AppearanceEditorPart ID="AppearanceEditorPart1" 
        runat="server" />
      <asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" />
    </ZoneTemplate>
  </asp:EditorZone>
</td>

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

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

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

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

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

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

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

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

Демонстрационная страница веб-частей с перемещенным элементом управления «Мои ссылки»
Щелкните элементРежим отображения и затем нажмите кнопку Обзор.

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

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

Показывается элемент управления EditorZone, отображая добавленные элементы управления EditorPart.
В разделе элемента управления редактирования Внешний вид присвойте свойству Title значение Мои закладки. В списке Тип цвета выберите параметр Только заголовок и нажмите кнопку Применить.

Следующий рисунок изображает страницу в режиме редактирования.

Демонстрационная страница веб-частей в режиме редактирования
В меню Режим отображения выберите элемент Обзор для возврата в режим обзора.

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

Отредактированная демонстрационная страница веб-частей

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

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

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

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

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

Откройте страницу WebPartsDemo.aspx.
Перейдите в режим конструктора.
С вкладки панели элементов WebParts перетащите элемент управления CatalogZone в правый столбец таблицы, ниже элемента управления EditorZone.

Оба элемента управления могут находиться в одной ячейке таблицы, так как одновременно они не отображаются.
В панели «Свойства» задайте строковое значение Добавить веб-части для свойства HeaderText элемента управления CatalogZone.
С вкладки панели элементов WebParts перетащите элемент управления DeclarativeCatalogPart в область содержимого элемента управления CatalogZone.
Щелкните стрелку в правом верхнем углу элемента управления DeclarativeCatalogPart для открытия меню «Задачи», а затем выберите пункт Редактирование шаблонов.
С вкладки панели элементов Стандартные перетащите элементы управления FileUpload и Calendar в раздел WebPartsTemplate элемента управления DeclarativeCatalogPart.

Переключитесь в режим источника и просмотрите код элемента asp:catalogzone.

Обратите внимание на то, что элемент управления DeclarativeCatalogPart содержит элемент webpartstemplate с двумя серверными элементами управления в оболочке, которые можно добавить на веб-страницу из каталога.

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

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

Добавьте свойство Title к каждому элементу управления, добавленному в каталог, используя строковое значение, показанное в примере ниже для каждого заголовка. Хотя заголовок не является свойством, которое можно установить в этих элементах управления во время проектирования, при добавлении этих элементов управления к WebPartZone во время выполнения из каталога, они окружаются элементом управления GenericWebPart. Это позволяет им функционировать в качестве элементов управления веб-частей и дает возможность отображать заголовки.

Код для двух элементов управления, содержащихся в элементе управления DeclarativeCatalogPart, будет выглядеть следующим образом.
```
<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" 
  runat="server">
  <WebPartsTemplate>
    <asp:Calendar ID="Calendar1" 
      runat="server" 
      title="My Calendar" />
    <asp:FileUpload ID="FileUpload1" 
      runat="server" 
      title="Upload Files" />
  </WebPartsTemplate>
</asp:DeclarativeCatalogPart>
```
Сохраните страницу.

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

Чтобы проверить каталог веб-частей

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

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

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

Элементы управления, добавленные из каталога в основную зону
В меню Режим отображения выберите Обзор.

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

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

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

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

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

См. также

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