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

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

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

  • Criar um controle de usuário personalizado que permite que você altere os modos de exibição em uma página da Web que contém controles de Web Parts.

  • Alternar entre os vários modos de exibição em uma 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.

Para completar este passo a passo, você precisará de:

  • 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ê tem um site já configurado, você pode usar esse site como um ponto de partida para este 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 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. Esta explicação mostra o passo a passo para usar SSE e o provedor SQL padrão. Se você tiver o SSE instalado, nenhuma configuração será necessária. SSE está disponível com Microsoft Visual Studio 2005, como uma parte opcional da instalação, ou como um download gratuito. 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 detalhes, veja 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. Para detalhes e exemplos de código veja 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.

Nesta seção, você cria um controle de usuário que pode ser adicionado a qualquer página que contém controles de Web Parts, de modo que os usuários podem facilmente alternar entre os vários modos de exibição de página.

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

  1. Em um editor de texto, crie um novo arquivo.

  2. No topo do arquivo, adicione uma declaração de controle, como mostrado no seguinte exemplo de código:

    <%@ control language="C#" classname="DisplayModeMenuCS"%>
    
    
    
  3. Sob a declaração de controle, adicione a seguinte marcação para a página.

    Essa 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 o número de usuários serão capazes de ver os efeitos da personalização.

    Seu código deve se parecer com o seguinte bloco de código:

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

  1. 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 runat="server" dentro da marca <script> de abertura.

  2. 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 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>
    
    
    

    Há várias coisas a notar 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 o controle de botão de rádio 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.

  3. Salvar e fechar o arquivo.

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

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

    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çaObservação de segurança:

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

  2. Em um editor de texto, crie um novo arquivo.

  3. 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="C#" %>
    <%@ register TagPrefix="uc1" 
      TagName="DisplayModeMenuCS" 
      Src="DisplayModeMenuCS.ascx" %>
    <%@ register tagprefix="aspSample" 
      Namespace="Samples.AspNet.CS.Controls" 
      Assembly="TextDisplayWebPartCS"%>
    
    
    
  4. 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 runat="server">
    void Button1_Click(object sender, EventArgs e)
    {
      WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
    }
    </script>
    
    
    
  5. Após o bloco de código, adicione a seguinte marcação para o 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 resto da página deve se parecer com o seguinte bloco de código.

    <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. Nomeie o arquivo Displaymodes.aspx e salve-o no diretório para o site.

Agora você criou tudo que é necessário para executar uma página da Web que contém controles de Web Parts e que pode alternar entre diferentes modos de exibição de página.

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

  1. Carregar a página em um navegador.

    A página será semelhante à tela a seguir:

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

    Modos de exibição de Web Parts 1
  2. 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çãoObservaçã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 desta explicação passo a passo.

  3. 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.

  4. Clique no botão Fechar para retornar a página para o modo procurar.

  5. 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 muda para o modo de catálogo.

  6. Selecione o caixa de seleção próximo ao controle personalizado no catálogo e clique em Adicionar para adicioná-lo à página.

  7. Clique em Fechar para retornar a página para o modo procurar.

    O controle adicionado agora aparece na página.

  8. Na lista de controle drop-down Modo de exibição, selecione Editar.

    A página muda 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.

  9. Clique no menu de verbos no controle TextDisplayWebPart.

    Um menu drop-down aparece.

  10. 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 a aparência do controle personalizado.

  11. 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.

  12. Posicione o cursor do mouse na barra de título do controle personalizado. Clique na barra de título e arraste o controle de WebPartZone1 para WebPartZone2.

  13. 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á semelhante à tela a seguir.

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

    Modo de exibição de Web Parts 2

Contribuições da comunidade

ADICIONAR
Mostrar:
© 2016 Microsoft