Demonstra Passo a passo: Alterando modos de exibição em uma página de Web Parts

Artigo
10/15/2014

Este passo=a=passo ilustra dois métodos de alteração de modo de exibição em uma página Web Parts ASP.NET e demonstra como um usuário navega entre modos de exibição de página.Durante este explicação passo a passo, você aprenderá como:

Criar um controle de usuário personalizada que permite a você alterar modos de exibição em um página da Web que contém controles de Web Parts.
Alternar entre os vários modos de exibição em um página de Web Parts.

Para obter mais informações sobre modos de exibição e quando usá-los, consulte Modos de Exibição de Páginas Web Parts.

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

Internet Information Services (IIS) instalado e configurado no computador que hospedará o site.Para obter detalhes sobre como instalar e configurar o Serviços de Informações da Internet, consulte a documentação de Ajuda do Serviços de Informações da Internet incluída incluída na instalação ou consulte a documentação do Serviços de Informações da Internet online no site Microsoft TechNet (Serviços de Informações da Internet 6.0 recursos técnicos).
Um site da Web ASP.NET que possa identificar usuários individuais.Se você tiver um site já configurado, você pode usar esse site como um ponto de partida para este explicação passo a passo.Otherwise, for details on creating a virtual directory or site, see Como: Criar e configurar diretórios virtual no IIS 5.0 e 6.0.
Um provedor de personalização configurado e um banco de dados.Personalização de Web Parts é ativada por padrão e usa o provedor de personalização SQL (SqlPersonalizationProvider) com a edição SQL Server Express (SSE) para armazenar os dados de personalização.This walkthrough uses SSE and the default SQL provider.Se você tiver o SSE instalado, nenhuma configuração será necessária.SSE is available with Microsoft Visual Studio 2005 as an optional part of the installation, or as a free download.Para obter detalhes, consulte o Microsoft SQL servidor 2005 Express edição Página da Web.Para usar uma das versões completas do Microsoft SQL Server, você deve instalar e configurar um banco de dados com serviços a aplicação ASP.NET e configurar o provedor de personalização para se conectar a esse banco de dados.Para obter detalhes, consulte:Criando e Configurando o Banco de Dados dos Serviços de Aplicativos para o SQL Server.Você também pode criar e configurar um provedor personalizado para uso com outros bancos de dados não SQL ou soluções de armazenamento.For details and a code example see Implementando um Provedor de Associação.
Um controle de Web Parts personalizado derivado da classe WebPart, para que você possa adicioná-lo para o catálogo na página de Web Parts.Para obter um exemplo de um controle WebPart personalizado e como fazer referência a ele em uma página, consulte o exemplo de código para o controle TextDisplayWebPart na documentação para a classe WebPartDisplayMode.

Criar um controle de usuário para alterar modos de exibição

Nesta seção você criará um controle de usuário que pode ser adicionado a qualquer página que contenha controles de Web Parts, para que usuários possam alternar facilmente entre os vários modos de exibição de página.

Para criar um controle de usuário para alterar modos de exibição

Em um editor de texto, crie um novo arquivo.

Na parte superior do novo arquivo, adicione uma declaração de controle como mostrado no exemplo a seguir.

<%@ control language="vb" classname="DisplayModeMenuVB"%>

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

Sob a declaração de controle, adicione a seguinte marcação à página.

Esta marcação cria a interface do usuário (UI) para o controle, que consiste em três partes principais:

Um controle de lista drop-down (um elemento <asp:dropdownlist>) que permite aos usuários alterar modos de exibição.
Um hiperlink (um elemento <asp:linkbutton>) que permite que um usuário redefina os dados de personalização específicas de usuário na página, retornando a página para sua aparência padrão e o layout anteriores às modificações do usuário.
Um par de controles botão de opção (dois elementos <asp:radiobutton>) que permitem aos usuários alternar entre usuário e escopo de personalização compartilhada(escopo de usuário é o padrão).Quando o usuário atual personaliza a página, o escopo de personalização determina que intervalo os usuários poderão ver dos efeitos da personalização.

Seu código deve ter a aparência do bloco de código a seguir:

<div>
  <asp:Panel ID="Panel1"  
    Borderwidth="1" 
    Width="230" 
    BackColor="lightgray"
    Font-Names="Verdana, Arial, Sans Serif" >
    <asp:Label ID="Label1"  
      Text="&nbsp;Display Mode" 
      Font-Bold="true"
      Font-Size="8"
      Width="120" 
      AssociatedControlID="DisplayModeDropdown"/>
    <asp:DropDownList ID="DisplayModeDropdown"   
      AutoPostBack="true" 
      Width="120"
      OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
    <asp:LinkButton ID="LinkButton1" 
      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"  
      GroupingText="Personalization Scope"
      Font-Bold="true"
      Font-Size="8" 
      Visible="false" >
      <asp:RadioButton ID="RadioButton1"  
        Text="User" 
        AutoPostBack="true"
        GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" />
      <asp:RadioButton ID="RadioButton2"  
        Text="Shared" 
        AutoPostBack="true"
        GroupName="Scope" 
        OnCheckedChanged="RadioButton2_CheckedChanged" />
    </asp:Panel>
  </asp:Panel>
</div>

<div>
  <asp:Panel ID="Panel1"  
    Borderwidth="1" 
    Width="230" 
    BackColor="lightgray"
    Font-Names="Verdana, Arial, Sans Serif" >
    <asp:Label ID="Label1"  
      Text="&nbsp;Display Mode" 
      Font-Bold="true"
      Font-Size="8"
      Width="120" 
      AssociatedControlID="DisplayModeDropdown"/>
    <asp:DropDownList ID="DisplayModeDropdown"   
      AutoPostBack="true" 
      Width="120"
      OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
    <asp:LinkButton ID="LinkButton1" 
      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"  
      GroupingText="Personalization Scope"
      Font-Bold="true"
      Font-Size="8" 
      Visible="false" >
      <asp:RadioButton ID="RadioButton1"  
        Text="User" 
        AutoPostBack="true"
        GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" />
      <asp:RadioButton ID="RadioButton2"  
        Text="Shared" 
        AutoPostBack="true"
        GroupName="Scope" 
        OnCheckedChanged="RadioButton2_CheckedChanged" />
    </asp:Panel>
  </asp:Panel>
</div>

Nomeie o arquivo DisplaymodemenuCS.ascx ou DisplaymodemenuVB.ascx (dependendo do idioma que você está usando para a amostra) e salve-o na pasta para a diretório virtual ou site da Web que você está usando para essa explicação passo a passo.

Para adicionar recursos de modo de exibição ao controle de usuário

No arquivo de origem do controle de usuário, adicione um par de marcas <script> logo acima da marca <div> de abertura na página e adicione um atributo dentro da marca <script> de abertura.

Adicione o seguinte código na seção <script> para permitir que os usuários alterem modos de exibição na página, redefinam dados de personalização na página e alternem entre usuários e escopo de personalização compartilhada:

<script >
  ' Use a field to reference the current WebPartManager.
  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 dropdown 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 is allowed, 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>

<script >

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

Há várias coisas para observar no código:

No método InitComplete, o código determina quais modos de exibição estão disponíveis no momento na página, e preenche o controle de lista drop-down com modos de exibição.O código também determina se o usuário atual pode entrar em escopo de personalização compartilhado na página e seleciona controle de botão de opção apropriado.
O método DisplayModeDropdown_SelectedIndexChanged realmente altera o modo de exibição da página, usando o controleWebPartManager e o modo selecionado pelo usuário.
O método LinkButton1_Click redefine o estado de personalização na página, o que significa que todos os dados de personalização do usuário para a página são eliminados do armazenamento de dados de personalização e a página é retornada ao seu estado padrão.
Os métodos RadioButton1_CheckChanged e RadioButton2_CheckChanged alternam o escopo de personalização para usuário ou escopo compartilhado.

Salve e feche o arquivo.

Criando uma página da Web para hospedar o controle de modos de exibição

Agora que você criou um controle de usuário para alterar os modos de exibição, você pode criar um página da Web que hospeda o controle de usuário e que também contém zonas Web Parts e outros controles do servidor para fornecer funcionalidade Web Parts.

Para criar um página da Web que pode alterar modos de exibição

Coloque o conjunto compilado para o controle personalizado do seu site da Web pasta Bin.

Como pré-requisitos para este estado passo a passo, você precisa um controle WebPart compilado e personalizado.Essa explicação passo a passo usa o controle personalizado chamado TextDisplayWebPart, que é disponível no tópico Visão geral de classe da classe WebPartDisplayMode.O conjunto compilado deve ser nomeado TextDisplayWebPartCS.dll ou TextDisplayWebPartVB.dll, de acordo com qual idioma você usar.

Observação de segurança:
O controle tem um caixa de texto que aceita a entrada do usuário, o que é uma ameaça potencial de segurança.Por padrão, páginas da Web ASP.NET validam a entrada do usuário para garantir que a entrada não contenha elementos HTML ou script.Para obter mais informações, consulte Visão Geral de Scripts Maliciosos.

Em um editor de texto, crie um novo arquivo.

Na parte superior do arquivo, adicione uma declaração de página e duas diretivas register.Uma diretiva register é para o controle de usuário; a outra é para o controle WebPart compilado e personalizado que você está usando para essa explicação passo a passo.O atributo Assembly da diretiva deve fazer referência ao nome do arquivo do conjunto para o controle personalizado, sem a extensão.

<%@ page language="VB" %>
<%@ register TagPrefix="uc1" 
  TagName="DisplayModeMenuVB" 
  Src="DisplayModeMenuVB.ascx" %>
<%@ register tagprefix="aspSample" 
  Namespace="Samples.AspNet.VB.Controls" 
  Assembly="TextDisplayWebPartVB"%>

<%@ page language="C#" %>
<%@ register TagPrefix="uc1" 
  TagName="DisplayModeMenuCS" 
  Src="DisplayModeMenuCS.ascx" %>
<%@ register tagprefix="aspSample" 
  Namespace="Samples.AspNet.CS.Controls" 
  Assembly="TextDisplayWebPartCS"%>

Sob as diretivas register, adicione o seguinte bloco de código, que permite que você alterne manualmente a página para o modo do catálogo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Sub Button1_Click(Byval sender As Object, _
                  ByVal e As EventArgs)
  WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode
End Sub
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
void Button1_Click(object sender, EventArgs e)
{
  WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
}
</script>

Após o bloco de código, adicione a seguinte marcação ao arquivo.

Há uma série de recursos nesta exemplo de código que são necessários para uma página de Web Parts, incluindo um elemento <asp:webpartmanager>, zonas Web Parts correspondentes aos possíveis modos de exibição de página e vários controles.Para obter mais informações, consulte Demonstra Passo a passo: Criação de uma página de Web Parts.

O código para o restante da página deve ter aparência do seguinte bloco de código.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
  <title>Web Parts Display Modes</title>
</head>
<body>
  <form id="Form2" >
    <asp:webpartmanager id="WebPartManager1"  />
    <uc1:DisplayModeMenuVB ID="DisplayModeMenu1"  />
    <asp:webpartzone
      id="WebPartZone1"
       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 

            id="textwebpart" 
            title = "Text Content WebPart"/>  
          </WebPartsTemplate>
        </asp:DeclarativeCatalogPart>
      </ZoneTemplate>
    </asp:CatalogZone>
    <br />
    <asp:button
      id="button1"

      text="Catalog Mode"
      OnClick="Button1_Click"
    />
  </form>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
  <title>Web Parts Display Modes</title>
</head>
<body>
  <form id="Form2" >
    <asp:webpartmanager id="WebPartManager1"  />
    <uc1:DisplayModeMenuCS ID="DisplayModeMenu1"  />
    <asp:webpartzone
      id="WebPartZone1"
       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 

            id="textwebpart" 
            title = "Text Content WebPart" AllowClose="true"/>  
          </WebPartsTemplate>
        </asp:DeclarativeCatalogPart>
      </ZoneTemplate>
    </asp:CatalogZone>
    <br />
    <asp:button
      id="button1"

      text="Catalog Mode"
      OnClick="Button1_Click"
    />
  </form>
</body>
</html>

Nomeie o arquivo Displaymodes.aspx e salve-o no diretório para o site.

Teste a página da Web para alterar modos de exibição

Agora você criou todos os itens necessários para executar um página da Web que contém controles de Web Parts e que pode alternar entre vários modos de exibição de página.

Para testar a página e alterar modos de exibição

Carregar a página em um navegador.

A página será similar à seguinte tomada de tela:

Página com o controle para alterar os modos de exibição

Clique no controle de lista drop-downModo de Exibição.

Observe os vários modos de exibição que estão disponíveis na página.Porque a página contém um controle WebPartZone, um controle EditorZone e um controle CatalogZone, modos de exibição correspondentes aparecem na lista drop-down para cada um desses tipos de zona, além do modo de exibição padrão Procurar.

Observação:
A página também pode conter um controle ConnectionsZone, que poderia permitir a você criar conexões entre os controles e adicionaria um modo de exibição de conexão para a lista drop-down.No entanto, as conexões estão além do escopo dessa explicação passo a passo.

Selecione o modo Catalog da lista drop-down.

A interface do usuário modo de catálogo aparece e o controle TextDisplayWebPart é visível no catálogo, disponíveis para serem adicionados à página.
Clique no botão Fechar para retornar a página para o modo procurar.
Como uma maneira alternativa de alternar para um modo de exibição, sem exigir o controle de usuário, clicar no botão Modo de Catálogo próximo à parte inferior da página.O código para essa opção aparece no método Button1_Click da página da Web.

A página alterna para o modo de catálogo.
Selecione o caixa de seleção próximo ao controle personalizado no catálogo e clique em Adicionar para adicioná-lo à página.
Clique em Fechar para retornar a página para o modo procurar.

O controle adicionado agora aparece na página.
Na lista de controle drop-down Modo de exibição, selecione Editar.

A página alterna para o modo de edição.Os títulos das zonas se tornam visíveis, e um botão menu de verbos que parece um pequeno triângulo aparece na barra de título de cada controle de servidor que reside em um WebPartZone.O menu de verbos fornece várias ações que um usuário pode aplicar a um controle.
Clique no menu de verbos no controle TextDisplayWebPart.

Aparece um menu drop-down.
Na menu de verbos, clique na opção Editar.

A interface do usuário edição especial, que é declarado no elemento <asp:editorzone>, será exibida.Com esses controles, você pode alterar o layout e aparência do controle personalizado.
Use a interface do usuário de edição para alterar o título do controle personalizado.Em seguida, clique em Aplicar para aplicar as alterações.
Posicione o ponteiro do mouse na barra de título do controle personalizado.Clique na barra de título e arraste o controle de WebPartZone1 para WebPartZone2.
Use o controle de lista drop-down modo de exibição para alterar a página de volta para o modo procurar.

A página será similar à seguinte tomada de tela:

Página depois de fazer alterações nos vários modos de exibição

Consulte também

Compartilhar via