Demonstra Passo a passo: Criar uma página de Web Parts no Visual Web Developer

Esta explicação passo a passo é uma demonstração prática dos componentes e tarefas essenciais para criar páginas da Web que usam controles Web Parts em uma ferramenta de design visual como o Microsoft Visual Studio 2005.

Em muitos aplicativos da Web é útil que se possa alterar a aparência do conteúdo e permitir aos usuários selecionar e organizar o conteúdo que desejam ver.Web Parts do ASP.NET permitem que você crie páginas da Web que apresentam conteúdo modular e que permitem aos usuários alterar a aparência e conteúdo para atender às 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 visão geral sobre o conjunto de controles de Web Parts, consulte Visão Geral do Conjunto de Controle Web Parts.

Durante esta explicação passo a passo, você criará uma página que usa o conjunto de controles Web Parts para criar uma página da Web que o usuário pode 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:

• Um site que possa identificar usuários individuais.Se você já tiver um site configurado com associação (membership) do ASP.NET, você pode usar esse site para esta explicação passo a passo.Caso contrário, a explicação passo a passo fornece instruções sobre como configurar seu site para identificá-lo por seu nome de conta de usuário do Windows.

• Um ambiente de design visual para criar páginas da Web.Essa explicação passo a passo usa Visual Studio 2005.

• 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) do Microsoft SQL Server Express Edition para armazenar os dados de personalização.Esta explicação passo a passo usa o 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 sistema autônomo uma parte opcional da instalação ou sistema autônomo um baixar gratuito de Microsoft.com. Para usar uma versão completa do SQL servidor, você deve instalar e configurar um banco de dados de serviços de aplicativos ASP.NET e configure o provedor de personalização SQL 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.

Criar e configurar um site da Web

Esta explicação passo a passo requer que você tenha uma identidade de usuário, para que suas configurações Web Parts possam ser mapeadas para você.Se você já tiver um site configurado para usar associação (membership), é recomendável que você use esse site.Caso contrário, você pode criar um novo site e usar seu nome de usuário do Windows atual como a identidade do usuário.

Para criar um novo site

• No Visual Studio, crie um novo site ASP.NET.

  Para obter detalhes, consulte:Passo a passo: Criando um Site com Associação e Logon de Usuário (Visual Studio).

Criando uma página simples com Web Parts

Nesta parte da explicação passo a passo, você vai criar uma página que usa controles Web Parts para mostrar conteúdo estático.A primeira etapa para trabalhar com Web Parts consiste em criar uma página com dois elementos necessários.Primeiro, uma página Web Parts precisa de um controle WebPartManager para coordenar todos os controles Web Parts.Segundo, uma página Web Parts precisa de uma ou mais zonas, que são controles compostos que contêm controles WebPart ou outros controles de servidor e ocupam uma região específica de uma página.

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.Para obter mais informações sobre serialização, consulte Visão geral sobre personalização de Web Parts.

Para criar uma página para conter controles Web Parts

1. Feche a página padrão e adicione uma nova página chamada WebPartsDemo.aspx.

2. Alternar para modo Design.

3. No menu Exibir,clique em Auxílios Visuais e, em seguida, certifique-se que as opções Controles Não visuais do ASP.NET e Detalhes estão selecionadas.

   Isso permite que você consulte marcas de layout e controles que não têm uma interface do usuário.

4. Adicione uma nova linha antes do elemento body.

   Observação:
   Se você tiver problemas para fazer isso, selecione o elemento div e pressione ESC duas vezes para selecionar o elemento body, pressione a tecla seta para a esquerda e pressione ENTER.

5. Posicione o ponto de inserção antes do caractere de nova linha.

6. Na lista Formato do bloco na barra de ferramentas, selecione Título 1.

7. No título, adicione o texto Web Parts Demonstration página.

8. Na guia WebParts da caixa de ferramentas, arraste um controle WebPartManager até a página, entre o caractere de novo linha e a marca de abertura <div>.

   O controle WebPartManager não gera nenhuma saída, então ele aparece como uma caixa cinza na superfície de design.

9. Posicione o ponto de inserção dentro do elemento div.

10. No menu Tabela, clique em Inserir Tabela, especifique uma tabela com uma linha e três colunas e em seguida, clique em OK.

11. Arraste um controle WebPartZone para a coluna à esquerda da tabela.Clique com o botão direito do mouse no controle WebPartZone, escolha Propriedades e defina as propriedades a seguir:

    ID: SidebarZone

    HeaderText: Sidebar

12. Arraste um segundo controle WebPartZone para a coluna do meio da tabela e defina as seguintes propriedades:

    ID: MainZone

    HeaderText: Main

13. Salve o arquivo, mas não o feche.

Sua página agora tem duas zonas diferentes que você pode controlar separadamente.No entanto, nem zona tem qualquer conteúdo, para 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 de uma zona Web Parts é especificado por um elemento zonetemplate.Dentro do modelo da zona, você pode adicionar qualquer controle ASP.NET, quer seja um controle Web Parts personalizado, um controle de usuário ou um controle de servidor já existente.Observe que aqui você está usando o controle Label, ao qual você está simplesmente adicionando texto estático.Quando você coloca um controle de servidor comum em uma zona WebPartZone, o ASP.NET trata o controle como um controle Web Parts em tempo de execução, o que habilita recursos Web Parts no controle.

Para criar conteúdo para a zona principal

1. No modo de exibição Design, arraste um controle Label da guia Padrão da caixa de ferramentas para a área de conteúdo da zona cuja propriedade ID está definida como MainZone.

2. Alterne para modo de origem.

   Observe que um elemento zonetemplate foi adicionado para quebrar o controle Label na MainZone.

3. Adicione um atributo chamado title ao elemento asp:label e defina seu valor para Content.Remova o atributo Text="Label" do elemento asp:label.Dentro de asp:labelelemento, adicione algum texto, sistema autônomo <h2>Welcome to my residência</h2>. Seu código deve se parecer com o a seguir.

   <asp:webpartzone id="MainZone"  headertext="Main">
      <zonetemplate>
         <asp:label id="Label1"  title="Content">
            <h2>Welcome to My Home Page</h2>
         </asp:label>
      </zonetemplate>
   </asp:webpartzone>
   

4. Salve o arquivo.

Depois, crie um controle de usuário que também pode ser adicionado à página como um controle Web Parts.

Para criar um controle de usuário

1. Adicione um novo controle de usuário da Web ao seu site para servir como um controle de pesquisa denominado SearchUserControl.ascx, certificando-se que a Coloque arquivos fontes em arquivos separados está desmarcada.

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

2. Alternar para modo Design.

3. A partir da guia Padrão da Caixa de Ferramentas, arraste um controle TextBox para a página.

4. Coloque o ponto de inserção após a caixa de texto que você adicionou e pressione ENTER para adicionar uma nova linha.

5. Arraste um controle Button para a página na nova linha abaixo da caixa de texto que você adicionou.

6. Alterne para o modo de exibição Source e certifique-se que o código fonte para o controle de usuário parece com o exemplo a seguir:

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

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

7. Salve e feche o arquivo.

   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.A entrada do usuário em uma página da Web pode conter script de cliente mal-intencionado.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.Contanto que essa validação esteja ativada, não é preciso explicitamente verificar script ou elementos HTML na entrada do usuário.Para obter mais informações, consulte Visão Geral de Scripts Maliciosos.

Agora você pode adicionar controles Web Parts para a zona Sidebar.Você vai 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 links são adicionados como um controle de servidor padrão Label, semelhante ao modo que você criou o texto estático para a zona principal.Entretanto, embora os controles de servidor individuais contidos no controle de usuário pudessem estar contidos diretamente na zona (como o controle de rótulo), 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 controles e funcionalidade adicionais que você deseje em um controle de usuário e depois referenciar tal controle em uma zona como um controle Web Parts.

Em tempo de execução, o conjunto de controles Web Parts 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.O uso de controles de parte genérico permite 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.

Para adicionar controles Web Parts à zona da barra lateral

1. Abra a página WebPartsDemo.aspx.

2. Alternar para modo Design.

3. Arraste a página de controle de usuário que você criou, SearchUserControl.ascx, a partir do Gerenciador de Soluções para a zona cuja propriedade ID é definida como SidebarZone.

4. Salve a página WebPartsDemo.aspx.

5. Alterne para modo de origem.

6. Dentro de asp:webpartzone elemento para o SidebarZone, adicione um asp:label elemento que contém links e na marca de controle de usuário, adicione um Title atributo com um valor de Pesquisar, conforme mostrado no exemplo a seguir:

   <asp:WebPartZone id="SidebarZone"  
      headertext="Sidebar">
      <zonetemplate>
         <asp:label  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" 
             title="Search" />
      </zonetemplate>
   </asp:WebPartZone>
   

7. Salve e feche o arquivo.

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.A tela a seguir mostra a página.

  Demonstração de Web Parts com duas zonas

  

  Na barra de título de cada controle há uma seta para baixo que fornece acesso a um menu de ações disponíveis que podem ser executadas em um controle.Clique no menu de verbos para um dos controles, clique no verbo Minimize e note que o controle é minimizado.No menu de verbos, clique em Restore e o controle retornará ao seu tamanho normal.

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

Web Parts fornece a funcionalidade para usuários alterarem o layout de controles Web Parts arrastando-os de uma zona para outra.Além de permitir que os usuários movam controles WebPart de uma zona para outra, você pode permitir que usuários editem várias características dos controles, inclusive sua 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 as propriedades de um controle depende da personalização do ASP.NET para salvar as alterações feitas pelos usuários.

Nesta parte da explicação passo a passo, você adicionará o recurso que permite aos usuários editar as características básicas de qualquer controle WebPart da página.Para ativar esses recursos, você adiciona outro controle de usuário personalizado para a página, como um elemento asp:editorzone e dois controles de edição.

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

1. No Visual Studio, no menu File, clique em New e então em File.

2. Na caixa de diálogo Add New Item, selecione Web User Control.Nomeie o novo arquivo DisplayModeMenu.ascx.Desmarque a caixa de seleção Coloque o código fonte em arquivos separados.

3. Clique em Adicionar para criar o novo controle.

4. Alterne para modo de origem.

5. Remova todo o código existente no novo arquivo e cole neste o código a seguir.Este código de controle de usuário usa recursos do conjunto de controles Web Parts para permitir que uma página tenha seu modo de exibição ou visualização alterado, e também permite que você altere a aparência física e o layout da página quando 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" />
       <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>
   

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

6. Salve o arquivo.

   Observação:

   Embora este controle de usuário possa habilitar o página de Web Parts para alternar entre usuários compartilhados e modo personalizados pelo usuário, o recurso de personalização requer que o usuário tenha permissões apropriadas, conforme especificado no arquivo web.config.Essa explicação passo a passo não ilustra como conceder esses direitos, portanto, o recurso não está ativado.Portanto, o usuário e os botões de opções compartilhados no controle de usuário ficam ocultos quando você executa a página.Para obter mais informações sobre personalização, consulte Personalização das Web Parts.

Para permitir que os usuários alterarem o layout

1. Abra a página WebPartsDemo.aspx.

2. Alternar para modo Design.

3. Posicione o ponto de inserção imediatamente após o controle WebPartManager que você adicionou anteriormente.Pressione ENTER para criar um linha em branco após o controle WebPartManager.

4. Arraste o controle de usuário que você acabou de criar (DisplayModeMenu.ascx) para a página WebPartsDemo.aspx e solte-o linha em branco.

5. Arraste um controle EditorZone da guia WebParts da caixa de ferramentas para a célula abertas restantes na página WebPartsDemo.aspx.

6. Na guia WebParts da caixa de ferramentas, arraste um controle AppearanceEditorPart e um controle LayoutEditorPart para o controle EditorZone.

7. Alterne para modo de origem.

   O código resultante na célula da tabela deve ter aspecto semelhante ao do código a seguir.

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

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

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

1. Carregar a página em um navegador.

2. No menu Display Mode, clique em Edit.

   Os títulos de zona são exibidos.

3. Arraste o controle Meus Links por sua barra de título da zona Sidebar para a parte inferior da zona Main.

   Sua página deve ter aspecto como o da seguinte tela:

   Demonstração de página Web Parts com o controle My Links movido

   

4. Clique em Display Mode, e depois clique em Browse.

   A página será atualizada, os nomes de zona desaparecem e o controle My Links permanecerá onde você o posicionou.

5. Para demonstrar que personalização está funcionando, feche o navegador e em seguida, carregue a página novamente.As alterações feitas são salvas para sessões futuras do navegador.

6. No menu Display Mode, clique em Edit.

   Agora cada controle na página é exibido com uma seta para baixo na sua barra de título, a qual contém o menu drop-down de verbos.

7. Clique na seta para exibir o menu de verbos sobre o controle My Links, e então clique em Edit.

   O controle EditorZone aparecerá, exibindo os controles EditorPart que você adicionou.

8. Na seção Appearance do controle de edição, altere o Title para My Favorites.Na lista Chrome Type, selecione Title Only e, em seguida, clique em Apply.

   A tela a seguir mostra a página no modo de edição

   Demonstração de página Web Parts no modo de edição

   

9. Clique no menu Display Mode, depois clique em Browse para retornar para o modo de navegação.

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

   Demonstração de página Web Parts editada

   

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

1. Abra a página WebPartsDemo.aspx.

2. Alternar para modo Design.

3. Na guia WebParts da caixa de ferramentas, arraste um controle CatalogZone para a coluna direita da tabela, sob o controle EditorZone.

   Ambos os controles podem estar na mesma célula da tabela pois eles não serão exibidos ao mesmo tempo.

4. No painel de propriedades, atribua a sequência de caracteres Adicionar Web Parts à propriedade HeaderText do controle CatalogZone.

5. Na guia WebParts da caixa de ferramentas, arraste um controle DeclarativeCatalogPart para a área de conteúdo do controle CatalogZone.

6. Clique na seta no canto direito superior do controle DeclarativeCatalogPart para exibir seu menu de Tarefas e então selecione Editar Modelo.

7. Na guia Padrão da caixa de ferramentas, arraste um controle FileUpload e um Calendar para a seção do WebPartsTemplate do controle DeclarativeCatalogPart.

8. Alterne para Modo de exibição Fonte e inspecione o código-fonte do elemento asp:catalogzone.

   Observe que o controle DeclarativeCatalogPart contém um elemento webpartstemplate com os dois controles de servidor incluídos que você poderá adicionar à sua página a partir do catálogo.

   Observação:
   Se você tiver um controle personalizado, este é o local para substituir um dos controles servidor do exemplo por ele, embora isso necessite de etapas além do escopo desta explicação passo a passo.Para obter mais detalhes, consulte o exemplo de código na documentação para a classe WebPart.

9. Adicione uma propriedade Title a cada um dos controles adicionados ao catálogo, usando o valor de sequência de caracteres mostrado para cada título no exemplo de código abaixo.Embora o título não seja uma propriedade que normalmente você possa definir nesses dois controles de servidor em tempo de design, quando um usuário adiciona esses controles a uma zona WebPartZone a partir do catálogo em tempo de execução, eles são empacotados por um controle GenericWebPart.Isso permite que eles atuem como controles Web Parts, portanto, eles poderão exibir títulos.

   O código para os dois controles contidos no controle DeclarativeCatalogPart devem ter aspecto como a seguir.

   <asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" 
     >
     <WebPartsTemplate>
       <asp:Calendar ID="Calendar1" 
   
         title="My Calendar" />
       <asp:FileUpload ID="FileUpload1" 
   
         title="Upload Files" />
     </WebPartsTemplate>
   </asp:DeclarativeCatalogPart>
   

10. Salve a página.

Agora você pode testar o catálogo.

Para testar o catálogo Web Parts

1. Carregar a página em um navegador.

2. No menu Display Mode, clique em Catalog.

   O catálogo intitulado Add Web Parts é exibido.

3. Arraste o controle Meus Favoritos da zona Main de volta para o início da zona Sidebar.

4. No catálogo Add Web Parts, selecione as duas caixas de seleção e então selecione Main na lista de zonas disponíveis.

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

   Controles adicionados à zona Main do catálogo

   

6. No menu Display Mode, clique em Browse.

   O catálogo desaparece e a página é atualizada.

7. Feche o navegador e carregue 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 adicionais, e mais complexos recursos Web Parts.Sugestões para explorações adicionais incluem:

• Criar controles Web Parts que ofereçam funcionalidades mais sofisticadas que as Web Parts estáticas desta explicação passo a passo.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

Tarefas

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

Conceitos

Visão geral sobre Web Parts do ASP.NET

Referência

Visão Geral do Conjunto de Controle Web Parts

WebPart