Demonstra Passo a passo: Criação de uma página de Web Parts

Artigo
10/15/2014

Esta explicação passo a passo é uma demonstração prática dos componentes essenciais e tarefas para criar páginas da Web que usam controles Web Parts.

Em muitos aplicativos da Web é útil permitir que os usuários selecionem e organizem o conteúdo que desejam ver.O recurso ASP.NET Web Parts consiste de um conjunto de controles para criar páginas da Web que apresentem esse conteúdo modular e que usuários ativos alterem a aparência e conteúdo de acordo com suas preferências.Para obter uma introdução geral do Web Parts, consulte Visão geral sobre Web Parts do ASP.NET.Para obter uma descrição dos componentes principais no conjunto de controles Web Parts, vários dos quais são usados nesta explicação passo a passo, consulte Visão Geral do Conjunto de Controle Web Parts.

Durante essa explicação passo a passo, você usará controles de Web Parts para criar um página da Web que os usuários podem modificar ou personalizar.Tarefas ilustradas nesta explicação passo a passo incluem:

Adicionar controles Web Parts a uma página.
Criando um controle de usuário personalizados e usá-lo como um controle Web Parts.
Permitir que usuários personalizem o layout de controles Web Parts na página.
Permitir que usuários editem a aparência de um controle Web Parts.
Permitir que usuários selecionem um catálogo de controles Web Parts disponíveis.

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.Caso contrário, para detalhes na criação de um diretório virtual ou site, consulte Como: Criar e configurar diretórios virtual no IIS 5.0 e 6.0 ou Como: Criar e configurar local Web sites do ASP.NET no IIS 6.0.
Um provedor de personalização configurado e um banco de dados.Web Parts personalization is enabled by default, and it uses the SQL personalization provider (SqlPersonalizationProvider) with the Microsoft SQL Server Standard Edition to store personalization data.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.To use one of the full versions of SQL Server, you must install and configure an ASP.NET application services database, and configure the SQL personalization provider to connect to that database.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.

Criando uma página simples com Web Parts

Nesta parte da explicação passo a passo, você cria uma página que usa Web Parts para mostrar conteúdo estático.

Observação:
Você não precisa fazer nada para permitir personalização Web Parts; ela é ativada por padrão para o conjunto de controle Web Parts.Quando você executa uma página Web Parts em um site, primeiro ASP.NET configura um provedor personalizado padrão para armazenar configurações personalizadas do usuário.O provedor padrão usa um banco de dados criado em um subdiretório de diretório do site.Para obter mais informações sobre serialização, consulte Visão geral sobre personalização de Web Parts.

Você não precisa fazer nada para permitir personalização Web Parts; ela é ativada por padrão para o conjunto de controle Web Parts.Quando você executa uma página Web Parts em um site, primeiro ASP.NET configura um provedor personalizado padrão para armazenar configurações personalizadas do usuário.O provedor padrão usa um banco de dados criado em um subdiretório de diretório do site.Para obter mais informações sobre serialização, consulte Visão geral sobre personalização de Web Parts.

Para criar uma página da Web

Em seu editor de texto, crie um novo arquivo e adicione a declaração da página a seguir para o início do arquivo.
```
<%@ page language="VB" %>
```
```
<%@ page language="C#" %>
```

Digite as marcas abaixo da declaração da página para criar uma estrutura completa da página conforme mostrado no exemplo de código a seguir.

Observe que a página inclui uma tabela vazia com uma linha e três colunas.A tabela conterá os controles Web Parts que você irá adicionar posteriormente.

<html>
<head >
  <title>Web Parts Page</title>
</head>
<body>
  <h1>Web Parts Demonstration Page</h1>
  <form  id="form1">
  <br />
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td valign="top">
      </td>
      <td valign="top">
      </td>
      <td valign="top">
      </td>
    </tr>
  </table>
  </form>
</body>
</html>

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

A próxima etapa é para configurar as zonas.Zonas são composições de controles que ocupam uma região especificada de uma página e contém controles Web Parts.

Para adicionar zonas à página

Logo abaixo do elemento <form> na sua página, adicione um elemento <asp:webpartmanager>, conforme mostrado no exemplo a seguir.
```
<asp:webpartmanager id="WebPartManager1"  />
```
O controle WebPartManager é necessário em cada página que usa controles de Web Parts.
Adicione um elemento <asp:webpartzone> dentro do primeiro elemento <td> na tabela e atribua seus valores de propriedade conforme a seguir no exemplo de código.

Observe que o elemento <asp:webpartzone> também contém um elemento <zonetemplate>.Os controles de Web Parts são colocados dentro do elemento <zonetemplate>.
```
<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td valign="top">
      <asp:webpartzone id="SideBarZone"  
        headertext="Sidebar">
        <zonetemplate>
        </zonetemplate>
      </asp:webpartzone>
    </td>
```
Adicione um elemento <asp:webpartzone> dentro do segundo elemento <td> na tabela e atribua seus valores de propriedade conforme a seguir no exemplo de código.
```
<td valign="top">
   <asp:webpartzone id="MainZone"  headertext="Main">
     <zonetemplate>
     </zonetemplate>
   </asp:webpartzone>
</td>
```
Salve o arquivo WebPartsDemo.aspx.

Sua página agora tem duas zonas que você pode controlar separadamente.No entanto, nenhuma zona tem qualquer conteúdo, então criar conteúdo é a próxima etapa.Para este explicação passo a passo, você trabalhar com controles Web Parts que exibem somente conteúdo estático.

O layout da zona Web Parts é especificado por um elemento <zonetemplate>.Dentro do modelo de zona, você pode adicionar qualquer controle servidor da Web, seja um controle Web Parts personalizado, um controle de usuário ou um controle servidor existente.Nessa explicação passo a passo você está usando o controle de servidor Label, e dentro dela você está simplesmente adicionando texto estático.Quando você coloca um controle de servidor ASP.NET regular em uma zona WebPartZone, o ASP.NET o trata como um controle de Web Parts em tempo de execução, que permite a você usar a maioria dos recursos Web Parts com controles padrão do servidor.

Para criar conteúdo para as zonas

Dentro do elemento <zonetemplate> para a zona Main, adicione um elemento <asp:label> com algum conteúdo, como mostrado no exemplo de código a seguir:

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

Salve o arquivo WebPartsDemo.aspx.
Crie um novo arquivo no seu editor de texto.

Esse arquivo irá conter um controle de usuário, que também pode ser adicionado à página como um controle Web Parts.
Na parte superior do novo arquivo, adicione uma declaração de controle como mostrado no exemplo a seguir.
```
<%@ control language="VB" classname="SearchUserControl" %>
```
```
<%@ control language="C#" classname="SearchUserControl" %>
```
Observação:

O controle de pesquisa para esta explicação passo a passo não implementa a funcionalidade de pesquisa real; ele é usado somente para demonstrar recursos Web Parts.
Sob a declaração de controle, adicione um par de marcas <script>, e dentro deles adicione código para criar uma propriedade personalizável.

Observe que a propriedade ResultsPerPage possui um atributo Personalizable.Esta propriedade deve permitir que os usuários do controle personalizem quantos resultados retornar por página, se você tiver fornecido um controle de edição com interface com o usuário (UI) para alterar a configuração em modo Design.

Certifique-se de que o código para o controle tenha a aparência do exemplo de código a seguir.
```
<%@ control language="VB" classname="SearchUserControl" %>
<script >
  Private results As Integer

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

    Get
      Return results
    End Get

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

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

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

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

Observação:
O controle de pesquisa para esta explicação passo a passo não implementa a funcionalidade de pesquisa real; ele é usado somente para demonstrar recursos Web Parts.

Adicione uma caixa de texto e um botão abaixo do elemento <script> para fornecer a interface com um usuário para um controle de pesquisa, como mostrado no exemplo de código a seguir.

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

Observação de segurança:
Esse 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.

Nomeie o arquivo SearchUserControlVB.ascx ou SearchUserControlCS.ascx (dependendo da linguagem que você está usando) e salve o no mesmo diretório que a página WebPartsDemo.aspx.

Agora você adicionará dois controles à zona Sidebar, um contendo uma lista de links e outro que é o controle de usuário que você criou no procedimento anterior.Os vínculos são adicionados como um controle Label de servidor padrão, semelhante ao modo com que você criou o texto estático para a zona Main.Embora os controles servidores individuais contidos no controle de usuário podem estar contidos diretamente na zona, no entanto, nesse caso eles não estão.Em vez disso, eles fazem parte do controle de usuário que você criou no procedimento anterior.Isso demonstra uma maneira comum de empacotar qualquer controle e mais funcionalidade que você deseja em um controle de usuário, e então referencia o controle de usuário em uma zona como um controle Web Parts.

Em tempo de execução, o ASP.NET envolve ambos os controles com controles GenericWebPart.Quando um controle GenericWebPart envolve um controle do servidor Web, o controle da parte genérica é o controle pai e você pode acessar o controle de servidor através da propriedade ChildControl do controle pai.Controles de parte genéricos permitem que controles padrão de servidor da Web tenham o mesmo comportamento e atributos básicos que controles Web Parts que derivam da classe WebPart.

Abra a página WebPartsDemo.aspx em seu editor de texto.

Na parte superior da página, logo após a declaração da página, adicione a declaração a seguir para fazer referência ao controle de usuário recém-criado.

<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrolvb.ascx" %>

<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrolcs.ascx" %>

Dentro do elemento <zonetemplate> para a zona Sidebar, adicione um controle Label contendo vários links.Sob o controle, referencie o controle de usuário que você criou anteriormente, conforme mostrado no exemplo de código a seguir.

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

Salve o arquivo WebPartsDemo.aspx.

Agora você pode testar sua página.

Para testar a página

Carregar a página em um navegador.

A página exibe as duas zonas.Cada controle na página é exibido com uma seta para baixo na sua barra de título, que contém um menu drop-down chamado menu de verbos.Os verbos são ações que um usuário pode executar em um controle servidor, como fechar, minimizar ou editar um controle.Cada item no menu de verbos é um verbo.A tela a seguir mostra a página.
Clique na seta para baixo na barra de título de um controle para exibir seu menu de verbos e em seguida, clique no link Minimizar.

O controle é minimizado.
Na menu de verbos, clique em Restaurar.

Isso demonstra os estados de exibição visual diferente dos controles Web Parts.

Habilitando usuários para editar páginas e alterar layout

Os usuários podem alterar o layout de controles de Web Parts, arrastando-os de uma zona para outra.Você pode também permitir que os usuários editem características de controle, tais como a aparência, layout e comportamento.O conjunto de controles Web Parts fornece a funcionalidade básica para a edição de controles WebPart.(Embora você não faça isso nesta explicação passo a passo, você também pode criar controles de edição personalizados que permitem que os usuários editem os recursos dos controles WebPart.) Assim como alterar a localidade de um controle WebPart, editar suas propriedades depende da personalização do ASP.NET para salvar as alterações feitas pelos usuários.

Nesta parte a explicação passo a passo, você permite aos usuários editarem as características básicas de qualquer controle WebPart na página.

Para criar um controle de usuário que permite alterar layout da página

Crie um novo arquivo no sua editor de texto e copie o código a seguir.

Esse código usa recursos do conjunto de controles de Web Parts que permitem que uma página altere seu modo de exibição.Ele também permite que você altere a aparência física e layout da página enquanto você estiver em certos modos de exibição.

<%@ control language="vb" classname="DisplayModeMenuVB"%>
<script >
  ' 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"  
    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" />
    <div>
    <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" />
    </div>
    <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>

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

 // 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"  
    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" />
    <div>
    <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" />
    </div>
    <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 Displaymodemenu.ascx e salve-o no diretório usado para as outras páginas.

Para permitir que os usuários alterarem o layout

Na página WebPartsDemo.aspx, adicione uma diretiva <register> para registrar o novo controle de usuário na página:

<%@ register TagPrefix="uc2" 
  TagName="DisplayModeMenuVB" 
  Src="DisplayModeMenu.ascx" %>

<%@ register TagPrefix="uc2" 
  TagName="DisplayModeMenuCS" 
  Src="DisplayModeMenu.ascx" %>

Adicione uma referência declarativa para o controle de usuário imediatamente abaixo do elemento <asp:webpartmanager>:
```
<uc2:DisplayModeMenuVB ID="DisplayModeMenu1"  />
```
```
<uc2:DisplayModeMenuCS ID="DisplayModeMenu1"  />
```

Adicione um elemento <asp:editorzone> dentro do terceiro elemento <td> na tabela.Adicione um elemento <zonetemplate>, um elemento <asp:appearanceeditorpart> e um elemento <asp:layouteditorpart>.

Quando você terminar, o código irá parecer semelhante ao exemplo a seguir:

<td valign="top">
  <asp:editorzone id="EditorZone1" >
    <zonetemplate>
      <asp:appearanceeditorpart 

        id="AppearanceEditorPart1" />
      <asp:layouteditorpart 

        id="LayoutEditorPart1" />
    </zonetemplate>
  </asp:editorzone>
</td>

Observação:
Dois controles adicionais, os controles BehaviorEditorPart e PropertyGridEditorPart não são usados, pois eles requerem configurações além do escopo desta explicação passo a passo.

Salve o arquivo WebPartsDemo.aspx.

Você criou um controle de usuário que permite que você altere os modos de exibição e o layout da página e você referenciou o controle na página da Web primária.

Agora você pode testar a funcionalidade para editar páginas e alterar layout.

Para testar alterações de layout

Carregar a página em um navegador.
Clique no menu drop-down Modo de Exibição e selecione Editar.

Os títulos de zona são exibidos.
Arraste o controle Links por sua barra de título da zona Sidebar para a parte inferior da zona Main.

A página será similar à seguinte imagem:
Clique no menu drop-down Modo de Exibição e selecione Navegar.

A página é atualizada, os nomes de zona desaparecem e o controle Links permanecerá onde você o posicionou.
Feche o navegador e carregue a página novamente.

As alterações feitas são salvas para sessões futuras do navegador, que demonstra que a personalização está funcionando.
No menu Display Mode, clique em Edit.
Clique na seta para exibir o menu de verbos no controle Links e clique no verbo Editar.

O controle EditorZone aparecerá, exibindo os controles EditorPart que você adicionou.
Na seção Aparência do controle de edição, altere o Título para "Meus favoritos", use a lista drop-down Tipo Chrome para selecionar Apenas Título e clique em Aplicar.

A tela a seguir mostra a página revisada ainda no modo de edição.
Clique no menu Display Mode e selecione Browse para retornar ao modo procurar.

O controle agora tem um título atualizado e nenhuma borda como mostrado na tela seguinte.

Adicionar Web Parts na hora de execução

Você também pode permitir que usuários adicionem controles Web Parts à suas páginas em tempo de execução.Para fazer isso, configure a página com um catálogo Web Parts que contém uma lista de controles Web Parts que você deseja tornar disponíveis aos usuários.

Observação:
Nessa explicação passo a passo, você criar um modelo que contém controles FileUpload e Calendar.Isso permitirá que você teste a funcionalidade básica do catálogo, mas os controles Web Parts resultantes não têm qualquer funcionalidade real.Se você tiver uma página da Web ou controle de usuário personalizados, você pode substituir o conteúdo estático por eles.

Para permitir que usuários adicionem Web Parts em tempo de execução

No arquivo WebPartsDemo.aspx, adicione o seguinte:
- Um elemento <asp:catalogzone> dentro a terceira coluna da tabela, logo abaixo do elemento <asp:editorzone>.
- Um elemento <zonetemplate> e, dentro dele, um elemento <asp:declarativecatalogpart> e um elemento <webpartstemplate>.
- Um elemento <asp:fileupload> e um elemento <asp:calendar>.
Seu código será semelhante ao seguinte exemplo de código:
```
<asp:catalogzone id="CatalogZone1"  
  headertext="Add Web Parts">
  <zonetemplate>
    <asp:declarativecatalogpart id="catalogpart1" 
       Title="My Catalog">
      <webPartsTemplate>
         <asp:fileupload  id="upload1" 
           title="Upload Files" />
         <asp:calendar  id="cal1" 
            Title="Team Calendar" />
      </webPartsTemplate>
    </asp:declarativecatalogpart>
  </zonetemplate>
</asp:catalogzone>
```
Observação:

Ambos os controles EditorZone e CatalogZone podem estar na mesma célula da tabela pois eles não serão exibidos ao mesmo tempo.
Salve o arquivo WebPartsDemo.aspx.

Observação:
Ambos os controles EditorZone e CatalogZone podem estar na mesma célula da tabela pois eles não serão exibidos ao mesmo tempo.

Agora você pode testar o catálogo.

Para testar o catálogo Web Parts

Carregar a página em um navegador.
Clique no menu drop-down Modo de Exibição e selecione Catálogo.

O catálogo denominado Add Web Parts é exibido.
Arraste o controle Meus Favoritos da zona Main de volta para o início da zona Sidebar.
No catálogo Add Web Parts, selecione ambas as caixas de seleção e selecione Main na lista drop-down Add to.
Clique Adicionar no catálogo.

Os controles são adicionados à zona Main.Se você desejar, você pode adicionar várias ocorrências de controles a partir do catálogo à sua página.

A tela a seguir mostra a página com o controle de carregamento de arquivo e o calendário na zona Main:
Clique no menu drop-down Modo de Exibição e selecione Navegar.

O catálogo desaparece e a página é atualizada.
Feche o navegador.Carregar a página novamente.

As alterações feitas persistem.

Próximas etapas

Essa explicação passo a passo ilustrou os princípios básicos de usar controles Web Parts simples em uma página ASP.NET.Você pode desejar testar com recursos mais complexos Web Parts.Por exemplo, você pode criar controles Web Parts como controles de usuário ou controles personalizados.Para obter detalhes, consulte a documentação para a classe WebPart.

Consulte também

Compartilhar via