Пошаговое руководство. Изменение режима отображения на странице веб-частей

Visual Studio 2010

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

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

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

  • Переключение между режимами отображения на странице веб-частей.

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

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

  • Службы IIS (IIS), установленные и настроенные на компьютере, который будет узлом для сайта. Подробные сведения об установке и настройке IIS содержатся в справочной документации IIS, включенной в состав установки, или в электронной документации IIS на узле Microsoft TechNet (Internet Information Services 6.0 Technical Resources).

  • Веб-узел ASP.NET, который может идентифицировать отдельных пользователей. Если есть уже такой настроенный узел, можно использовать его в качестве отправной точки для данного пошагового руководства. Если нет, то сведения о создании виртуального каталога или узла содержатся в разделе Практическое руководство. Создание и настройка виртуальных каталогов в IIS 5.0 и 6.0.

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

  • Настраиваемый элемент управления веб-частей является производным от класса WebPart, поэтому его можно добавить к каталогу на странице веб-части. Пример пользовательского элемента управления WebPart и то как ссылаться на него со страницы, смотрите в примере кода для элемента управления TextDisplayWebPart в документации для класса WebPartDisplayMode.

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

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

  1. Создайте новый файл в текстовом редакторе.

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

    <%@ control language="C#" classname="DisplayModeMenuCS"%>
    
    
    
  3. Под объявлением элемента управления добавьте следующую разметку на страницу.

    Эта разметка создает пользовательский интерфейс (UI) для элемента управления, который состоит из трех основных частей:

    • Элемент раскрывающегося списка управления (элемент <asp:dropdownlist>), позволяющий пользователям изменять режимы отображения.

    • Гиперссылка (элемент <asp:linkbutton>), позволяющая пользователю сбросить персонализации пользовательских данных на странице, возвратить страницу в ее внешний вид, принятый по умолчанию, и макет до изменения пользователем.

    • Пара переключателей (два элемента <asp:radiobutton>), позволяющих пользователям переключаться между пользователем и общей областью персонализации (области пользователя используется по умолчанию). Если текущий пользователь персонализировал страницу, область действия персонализации определяет, какой диапазон пользователей смогут увидеть влияние персонализации.

    Ваш код должен выглядеть как следующий блок кода:

    <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" 
          AssociatedControlID="DisplayModeDropdown"/>
        <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>
    
    
    
  4. Назовите файл DisplaymodemenuCS.ascx или DisplaymodemenuVB.ascx (в зависимости от языка, используемого для образца) и сохраните его в папке для виртуального каталога или веб-узла, который вы используете для этого пошагового руководства.

Чтобы добавить возможности режима отображения пользовательского элемента управления:

  1. В файле источника пользовательского элемента управления добавьте пары тегов <script> над открывающим тегом <div> на странице и добавьте атрибут runat="server" в открывающем теге <script>.

  2. Добавьте следующий код в раздел <script> для разрешения пользователям изменять режимы отображения на странице, чтобы сбросить данные персонализации на странице и переключаться между пользователем и общей областью персонализации:

    <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, 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 is allowed, toggle the scope.
      protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
      {
        if (_manager.Personalization.CanEnterSharedScope && 
            _manager.Personalization.Scope == PersonalizationScope.User)
          _manager.Personalization.ToggleScope();
      }
    </script>
    
    
    

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

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

    • Метод DisplayModeDropdown_SelectedIndexChanged фактически изменяет режим отображения страницы с помощью элемента управления WebPartManager и режима, выбранного пользователем.

    • Метод LinkButton1_Click сбрасывает состояние персонализации на странице, что означает, что все данные персонализации пользователей страницы удаляются из хранилища данных персонализации, и страница будет возвращена состояние по умолчанию.

    • Методы RadioButton1_CheckChanged и RadioButton2_CheckChanged переключают области персонализации между пользователем и общей областью.

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

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

Создание веб-страницы, которая может менять режим отображения

  1. Поместите компилируемую сборку для пользовательского элемента управления в папку Bin на веб-узле.

    В качестве необходимого компонента для этого пошагового руководства, который необходимо скомпилировать, выберите пользовательский элемент управления WebPart. В данном пошаговом руководстве используется пользовательский элемент управления с именем TextDisplayWebPart, который доступен в разделе обзора класса WebPartDisplayMode. Компилируемая сборка должна называться TextDisplayWebPartCS.dll или TextDisplayWebPartVB.dll, в зависимости от языка, который используется.

    bw5tctbb.alert_security(ru-ru,VS.100).gifПримечание о безопасности.

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

  2. Создайте новый файл в текстовом редакторе.

  3. В верхней части файла добавьте объявление страницы и две директивы register. Одна директива register предназначается для пользовательского элемента управления; другая — для скомпилированного пользовательского элемента управления WebPart, использованного в данном пошаговом руководстве. Атрибут директивы элемента Assembly должен ссылаться на имя файла сборки для пользовательского элемента управления, без расширения.

    <%@ page language="C#" %>
    <%@ register TagPrefix="uc1" 
      TagName="DisplayModeMenuCS" 
      Src="DisplayModeMenuCS.ascx" %>
    <%@ register tagprefix="aspSample" 
      Namespace="Samples.AspNet.CS.Controls" 
      Assembly="TextDisplayWebPartCS"%>
    
    
    
  4. Под директивой register добавьте следующий блок кода, который позволяет вручную переключить страницу в режиме каталога:

    <!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)
    {
      WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
    }
    </script>
    
    
    
  5. После блока кода добавьте следующую разметку файла.

    Есть несколько возможностей в этом примере кода, которые необходимы для веб-частей страницы, включая элемент <asp:webpartmanager>, веб-части зоны, соответствующие возможные режимы отображения страницы и несколько элементов управления. Дополнительные сведения по этой теме, см. в разделе Пошаговое руководство. Создание страницы веб-частей.

    Код для остальной части страницы должен выглядеть как в следующем блоке кода.

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
      <title>Web Parts Display Modes</title>
    </head>
    <body>
      <form id="Form2" runat="server">
        <asp:webpartmanager id="WebPartManager1" runat="server" />
        <uc1:DisplayModeMenuCS ID="DisplayModeMenu1" runat="server" />
        <asp:webpartzone
          id="WebPartZone1"
          runat="server" BackImageUrl="~/MyImage.gif">
            <zonetemplate>
              <asp:Calendar 
                ID="Calendar1" 
                Runat="server" 
                Title="My Calendar" />
            </zonetemplate>
        </asp:webpartzone>
        <asp:WebPartZone ID="WebPartZone2" Runat="server">
        </asp:WebPartZone>
        <asp:EditorZone ID="editzone1" Runat="server">
          <ZoneTemplate>
            <asp:AppearanceEditorPart 
              ID="appearanceeditor1" 
              Runat="server" />
            <asp:LayoutEditorPart 
              ID="LayoutEditorPart1" 
              Runat="server" />
          </ZoneTemplate>
        </asp:EditorZone>
        <asp:CatalogZone ID="catalogzone1" Runat="server">
          <ZoneTemplate>
            <asp:DeclarativeCatalogPart 
              ID="declarativepart1" 
              Runat="server">
              <WebPartsTemplate>
              <aspSample:TextDisplayWebPart 
                runat="server"   
                id="textwebpart" 
                title = "Text Content WebPart" AllowClose="true"/>  
              </WebPartsTemplate>
            </asp:DeclarativeCatalogPart>
          </ZoneTemplate>
        </asp:CatalogZone>
        <br />
        <asp:button
          id="button1"
          runat="server"
          text="Catalog Mode"
          OnClick="Button1_Click"
        />
      </form>
    </body>
    </html>
    
    
    
  6. Назовите файл Displaymodes.aspx и сохраните его в каталоге веб-узла.

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

Чтобы проверить страницу и изменить режим отображения:

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

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

    Страница с элементом управления для изменения режима отображения
    Режимы отображения веб-частей 1
  2. Нажмите кнопку Режим отображения элемента управления «раскрывающийся список».

    Обратите внимание на различные режимы отображения, доступные на странице. Поскольку страница содержит элементы управления WebPartZone, EditorZone и CatalogZone, соответствующие режимы отображения появляются в раскрывающемся списке для каждого из этих типов зон, в дополнение к режиму отображения Обзор, установленному по умолчанию.

    bw5tctbb.alert_note(ru-ru,VS.100).gifПримечание.

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

  3. Выберите режим Каталог из раскрывающегося списка.

    Появится режим каталога UI, и элемент управления TextDisplayWebPart, видимый в каталоге, станет доступным для добавления на страницу.

  4. Нажмите кнопку Close, чтобы вернуть страницу в режим просмотра.

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

    Параметры страницы для режима «каталог».

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

  7. Нажмите кнопку Close, чтобы вернуть страницу в режим просмотра.

    Добавленный элемент теперь отображается на странице.

  8. В раскрывающемся списке режим отображения выберите изменить.

    Параметры страницы для режима «изменение». Названия зон становятся видимыми, и кнопка меню команд, которая выглядят как небольшой треугольник, отображается в заголовке каждого серверного элемента управления, находящегося в WebPartZone. Меню команд предоставляет различные действия, которые пользователь может применить к элементу управления.

  9. Щелкните по командам меню в элементе управления TextDisplayWebPart.

    Появится раскрывающееся меню.

  10. В меню команды выберите команду Изменить.

    Появится специально редактированный UI, который объявлен в элементе <asp:editorzone>. С этими элементами управления можно изменить макет и внешний вид пользовательского элемента управления.

  11. Используйте пользовательский интерфейс для редактирования, чтобы изменить название пользовательского элемента управления. Затем нажмите кнопку Применить, чтобы применить изменения.

  12. Поместите указатель мыши в заголовок пользовательского элемента управления. Щелкните строку заголовка и перетащите элемент управления из WebPartZone1 в WebPartZone2.

  13. Используйте раскрывающийся список Режим отображения для возврата в режим обзора.

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

    Страница после внесения изменений в различных режимах отображения
    WebParts DisplayMode 2

Показ: