Perfis, temas e Web Parts

Artigo
07/13/2023

Há grandes alterações na configuração e instrumentação no ASP.NET 2.0. A nova API de configuração do ASP.NET permite que as alterações de configuração sejam feitas programaticamente. Além disso, existem muitas novas definições de configuração que permitem novas configurações e instrumentação.

ASP.NET 2.0 representa uma melhoria substancial na área de sites personalizados. Além dos recursos de associação que já abordamos, ASP.NET perfis, temas e Web Parts aprimoram significativamente a personalização em sites.

Perfis ASP.NET

ASP.NET perfis são semelhantes às sessões. A diferença é que um perfil é persistente, enquanto uma sessão é perdida quando o navegador é fechado. Outra grande diferença entre sessões e perfis é que os perfis são fortemente tipados, fornecendo, portanto, intelliSense durante o processo de desenvolvimento.

Um perfil é definido no arquivo de configuração de computadores ou no arquivo de web.config para o aplicativo. (Você não pode definir um perfil em uma subpasta web.config arquivo.) O código a seguir define um perfil para armazenar o nome e o sobrenome dos visitantes do site.

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
    </properties>
</profile>

O tipo de dados padrão para uma propriedade de perfil é System.String. No exemplo acima, nenhum tipo de dados foi especificado. Portanto, as propriedades FirstName e LastName são do tipo String. Conforme mencionado anteriormente, as propriedades de perfil são fortemente tipada. O código a seguir adiciona uma nova propriedade para a idade do tipo Int32.

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
        <add name="Age" type="Int32"/>
    </properties>
</profile>

Os perfis geralmente são usados com a autenticação do ASP.NET Forms. Quando usado em combinação com a autenticação do Forms, cada usuário tem um perfil separado associado à ID de usuário. No entanto, também é possível permitir o uso de perfis em um aplicativo anônimo usando o <elemento anonymousIdentification> no arquivo de configuração junto com o atributo allowAnonymous , conforme mostrado abaixo:

<anonymousIdentification enabled="true" />
<profile>
    <properties>
        <add name="FirstName" allowAnonymous="true" />
        <add name="LastName" allowAnonymous="true" />
    </properties>
</profile>

Quando um usuário anônimo navega pelo site, ASP.NET cria uma instância do ProfileCommon para o usuário. Esse perfil usa uma ID exclusiva armazenada em um cookie no navegador para identificar o usuário como um visitante exclusivo. Dessa forma, você pode armazenar informações de perfil para usuários que estão navegando anonimamente.

Grupos de Perfis

É possível agrupar propriedades de perfis. Ao agrupar propriedades, é possível simular vários perfis para um aplicativo específico.

A configuração a seguir configura uma propriedade FirstName e LastName para dois grupos; Compradores e perspectivas.

<profile>
    <properties>
        <group name="Buyers">
            <add name="FirstName" />
            <add name="Lastname" />
            <add name="NumberOfPurchases" type="Int32" />
        </group>
        <group name="Prospects">
            <add name="FirstName" />
            <add name="Lastname" />
        </group>
    </properties>
</profile>

Em seguida, é possível definir propriedades em um grupo específico da seguinte maneira:

Profile.Buyers.NumberOfPurchases += 1;

Armazenando objetos complexos

Até agora, os exemplos que abordamos armazenaram tipos de dados simples em um perfil. Também é possível armazenar tipos de dados complexos em um perfil especificando o método de serialização usando o atributo serializeAs da seguinte maneira:

<add name="PurchaseInvoice"
     type="PurchaseInvoice"
     serializeAs="Binary"
/>

Nesse caso, o tipo é PurchaseInvoice. A classe PurchaseInvoice precisa ser marcada como serializável e pode conter qualquer número de propriedades. Por exemplo, se PurchaseInvoice tiver uma propriedade chamada NumItemsPurchased, você poderá consultar essa propriedade no código da seguinte maneira:

Profile.PurchaseInvoice.NumItemsPurchased

Herança de perfil

É possível criar um perfil para uso em vários aplicativos. Ao criar uma classe de perfil derivada do ProfileBase, você pode reutilizar um perfil em vários aplicativos usando o atributo inherits , conforme mostrado abaixo:

<profile inherits="PurchasingProfile" />

Nesse caso, a classe PurchaseingProfile teria a seguinte aparência:

using System;
using System.Web.Profile;
public class PurchasingProfile : ProfileBase {
    private string _ProductName;
    private Int32 _ProductID;
    public string ProductName {
        get { return _ProductName; }
        set { _ProductName = value; }
    }
    public Int32 ProductID {
        get { return _ProductID; }
        set { _ProductID = value; }
    }
}

Provedores de Perfil

ASP.NET perfis usam o modelo de provedor. O provedor padrão armazena as informações em um banco de dados SQL Server Express na pasta App_Data do aplicativo Web usando o provedor SqlProfileProvider. Se o banco de dados não existir, ASP.NET o criará automaticamente quando o perfil tentar armazenar informações.

Em alguns casos, no entanto, talvez você queira desenvolver seu próprio provedor de perfil. O recurso de perfil ASP.NET permite que você use provedores diferentes facilmente.

Você cria um provedor de perfil personalizado quando:

Você precisa armazenar informações de perfil em uma fonte de dados, como em um banco de dados FoxPro ou em um banco de dados Oracle, que não são compatíveis com os provedores de perfil incluídos no .NET Framework.
Você precisa gerenciar informações de perfil usando um esquema de banco de dados diferente do esquema de banco de dados usado pelos provedores incluídos no .NET Framework. Um exemplo comum é que você deseja integrar informações de perfil a dados do usuário em um banco de dados SQL Server existente.

Classes necessárias

Para implementar um provedor de perfil, você cria uma classe que herda a classe abstrata System.Web.Profile.ProfileProvider. A classe abstrata ProfileProvider , por sua vez, herda a classe abstrata System.Configuration.SettingsProvider, que herda a classe abstrata System.Configuration.Provider.ProviderBase. Devido a essa cadeia de herança, além dos membros necessários da classe ProfileProvider , você deve implementar os membros necessários das classes SettingsProvider e ProviderBase .

As tabelas a seguir descrevem as propriedades e os métodos que você deve implementar nas classes abstratas ProviderBase, SettingsProvider e ProfileProvider .

Membros do ProviderBase

Membro	Descrição
Método Initialize	Usa como entrada o nome da instância do provedor e um NameValueCollection das definições de configuração. Usado para definir opções e valores de propriedade para a instância do provedor, incluindo valores específicos da implementação e opções especificadas na configuração do computador ou Web.config arquivo.

SettingsProvider Members

Membro	Descrição
Propriedade ApplicationName	O nome do aplicativo que é armazenado com cada perfil. O provedor de perfil usa o nome do aplicativo para armazenar informações de perfil separadamente para cada aplicativo. Isso permite que vários aplicativos ASP.NET usem a mesma fonte de dados sem conflitos se o mesmo nome de usuário for criado em aplicativos diferentes. Como alternativa, vários aplicativos ASP.NET podem compartilhar uma fonte de dados de perfil especificando o mesmo nome de aplicativo.
Método GetPropertyValues	Usa como entrada um objeto SettingsContext e SettingsPropertyCollection. O SettingsContext fornece informações sobre o usuário. Você pode usar as informações como uma chave primária para recuperar informações de propriedade de perfil para o usuário. Use o objeto SettingsContext para obter o nome de usuário e se o usuário está autenticado ou anônimo. O SettingsPropertyCollection contém uma coleção de objetos SettingsProperty. Cada objeto SettingsProperty fornece o nome e o tipo da propriedade, bem como informações adicionais, como o valor padrão da propriedade e se a propriedade é somente leitura. O método GetPropertyValues preenche um SettingsPropertyValueCollection com objetos SettingsPropertyValue com base nos objetos SettingsProperty fornecidos como entrada. Os valores da fonte de dados do usuário especificado são atribuídos às propriedades PropertyValue para cada objeto SettingsPropertyValue e toda a coleção é retornada. Chamar o método também atualiza o valor LastActivityDate do perfil de usuário especificado para a data e hora atuais.
Método SetPropertyValues	Usa como entrada um objeto SettingsContext e settingsPropertyValueCollection . O SettingsContext fornece informações sobre o usuário. Você pode usar as informações como uma chave primária para recuperar informações de propriedade de perfil para o usuário. Use o objeto SettingsContext para obter o nome de usuário e se o usuário está autenticado ou anônimo. O SettingsPropertyValueCollection contém uma coleção de objetos SettingsPropertyValue . Cada objeto SettingsPropertyValue fornece o nome, o tipo e o valor da propriedade, bem como informações adicionais, como o valor padrão da propriedade e se a propriedade é somente leitura. O método SetPropertyValues atualiza os valores de propriedade de perfil na fonte de dados para o usuário especificado. Chamar o método também atualiza os valores LastActivityDate e LastUpdatedDate para o perfil de usuário especificado para a data e hora atuais.

Membros profileProvider

Membro	Descrição
Método DeleteProfiles	Usa como entrada uma matriz de cadeia de caracteres de nomes de usuário e exclui da fonte de dados todas as informações de perfil e valores de propriedade para os nomes especificados em que o nome do aplicativo corresponde ao valor da propriedade ApplicationName . Se a fonte de dados der suporte a transações, é recomendável que você inclua todas as operações de exclusão em uma transação e reverta a transação e gere uma exceção se qualquer operação de exclusão falhar.
Método DeleteProfiles	Usa como entrada uma coleção de objetos ProfileInfo e exclui da fonte de dados todas as informações de perfil e valores de propriedade para cada perfil em que o nome do aplicativo corresponde ao valor da propriedade ApplicationName . Se a fonte de dados der suporte a transações, é recomendável que você inclua todas as operações de exclusão em uma transação e reverta a transação e gere uma exceção se alguma operação de exclusão falhar.
Método DeleteInactiveProfiles	Usa como entrada um valor ProfileAuthenticationOption e um objeto DateTime e exclui da fonte de dados todas as informações de perfil e valores de propriedade em que a data da última atividade é menor ou igual à data e hora especificadas e onde o nome do aplicativo corresponde ao valor da propriedade ApplicationName . O parâmetro ProfileAuthenticationOption especifica se apenas perfis anônimos, apenas perfis autenticados ou todos os perfis devem ser excluídos. Se a fonte de dados der suporte a transações, é recomendável que você inclua todas as operações de exclusão em uma transação e reverta a transação e gere uma exceção se alguma operação de exclusão falhar.
Método GetAllProfiles	Usa como entrada um valor ProfileAuthenticationOption , um inteiro que especifica o índice de página, um inteiro que especifica o tamanho da página e uma referência a um inteiro que será definido como a contagem total de perfis. Retorna um ProfileInfoCollection que contém objetos ProfileInfo para todos os perfis na fonte de dados em que o nome do aplicativo corresponde ao valor da propriedade ApplicationName . O parâmetro ProfileAuthenticationOption especifica se apenas perfis anônimos, apenas perfis autenticados ou todos os perfis devem ser retornados. Os resultados retornados pelo método GetAllProfiles são restritos pelos valores de índice de página e tamanho de página. O valor do tamanho da página especifica o número máximo de objetos ProfileInfo a serem retornados no ProfileInfoCollection. O valor do índice de página especifica qual página de resultados retornar, em que 1 identifica a primeira página. O parâmetro para o total de registros é um parâmetro out (você pode usar ByRef no Visual Basic) que é definido como o número total de perfis. Por exemplo, se o armazenamento de dados contiver 13 perfis para o aplicativo e o valor do índice de página for 2 com um tamanho de página de 5, o ProfileInfoCollection retornado conterá o sexto até o décimo perfis. O valor total de registros é definido como 13 quando o método retorna.
Método GetAllInactiveProfiles	Usa como entrada um valor ProfileAuthenticationOption , um objeto DateTime , um inteiro que especifica o índice de página, um inteiro que especifica o tamanho da página e uma referência a um inteiro que será definido como a contagem total de perfis. Retorna um ProfileInfoCollection que contém objetos ProfileInfo para todos os perfis na fonte de dados em que a data da última atividade é menor ou igual ao DateTime especificado e onde o nome do aplicativo corresponde ao valor da propriedade ApplicationName . O parâmetro ProfileAuthenticationOption especifica se apenas perfis anônimos, apenas perfis autenticados ou todos os perfis devem ser retornados. Os resultados retornados pelo método GetAllInactiveProfiles são restritos pelos valores de índice de página e tamanho da página. O valor do tamanho da página especifica o número máximo de objetos ProfileInfo a serem retornados no ProfileInfoCollection. O valor do índice de página especifica qual página de resultados retornar, em que 1 identifica a primeira página. O parâmetro para o total de registros é um parâmetro out (você pode usar ByRef no Visual Basic) que é definido como o número total de perfis. Por exemplo, se o armazenamento de dados contiver 13 perfis para o aplicativo e o valor do índice de página for 2 com um tamanho de página de 5, o ProfileInfoCollection retornado conterá o sexto até o décimo perfis. O valor total de registros é definido como 13 quando o método retorna.
Método FindProfilesByUserName	Usa como entrada um valor ProfileAuthenticationOption , uma cadeia de caracteres que contém um nome de usuário, um inteiro que especifica o índice de página, um inteiro que especifica o tamanho da página e uma referência a um inteiro que será definido como a contagem total de perfis. Retorna um ProfileInfoCollection que contém objetos ProfileInfo para todos os perfis na fonte de dados em que o nome de usuário corresponde ao nome de usuário especificado e onde o nome do aplicativo corresponde ao valor da propriedade ApplicationName . O parâmetro ProfileAuthenticationOption especifica se apenas perfis anônimos, apenas perfis autenticados ou todos os perfis devem ser retornados. Se a fonte de dados der suporte a recursos de pesquisa adicionais, como caracteres curinga, você poderá fornecer recursos de pesquisa mais abrangentes para nomes de usuário. Os resultados retornados pelo método FindProfilesByUserName são restritos pelos valores de índice de página e tamanho da página. O valor do tamanho da página especifica o número máximo de objetos ProfileInfo a serem retornados no ProfileInfoCollection. O valor do índice de página especifica qual página de resultados retornar, em que 1 identifica a primeira página. O parâmetro para o total de registros é um parâmetro out (você pode usar ByRef no Visual Basic) que é definido como o número total de perfis. Por exemplo, se o armazenamento de dados contiver 13 perfis para o aplicativo e o valor do índice de página for 2 com um tamanho de página de 5, o ProfileInfoCollection retornado conterá o sexto até o décimo perfis. O valor total de registros é definido como 13 quando o método retorna.
Método FindInactiveProfilesByUserName	Usa como entrada um valor ProfileAuthenticationOption , uma cadeia de caracteres que contém um nome de usuário, um objeto DateTime , um inteiro que especifica o índice de página, um inteiro que especifica o tamanho da página e uma referência a um inteiro que será definido como a contagem total de perfis. Retorna um ProfileInfoCollection que contém objetos ProfileInfo para todos os perfis na fonte de dados em que o nome de usuário corresponde ao nome de usuário especificado, em que a data da última atividade é menor ou igual ao DateTime especificado e onde o nome do aplicativo corresponde ao valor da propriedade ApplicationName . O parâmetro ProfileAuthenticationOption especifica se apenas perfis anônimos, apenas perfis autenticados ou todos os perfis devem ser retornados. Se a fonte de dados der suporte a recursos de pesquisa adicionais, como caracteres curinga, você poderá fornecer recursos de pesquisa mais abrangentes para nomes de usuário. Os resultados retornados pelo método FindInactiveProfilesByUserName são restritos pelos valores de índice de página e tamanho da página. O valor do tamanho da página especifica o número máximo de objetos ProfileInfo a serem retornados no ProfileInfoCollection. O valor do índice de página especifica qual página de resultados retornar, em que 1 identifica a primeira página. O parâmetro para o total de registros é um parâmetro out (você pode usar ByRef no Visual Basic) que é definido como o número total de perfis. Por exemplo, se o armazenamento de dados contiver 13 perfis para o aplicativo e o valor do índice de página for 2 com um tamanho de página de 5, o ProfileInfoCollection retornado conterá o sexto até o décimo perfis. O valor total de registros é definido como 13 quando o método retorna.
Método GetNumberOfInActiveProfiles	Usa como entrada um valor ProfileAuthenticationOption e um objeto DateTime e retorna uma contagem de todos os perfis na fonte de dados em que a data da última atividade é menor ou igual ao DateTime especificado e onde o nome do aplicativo corresponde ao valor da propriedade ApplicationName . O parâmetro ProfileAuthenticationOption especifica se apenas perfis anônimos, apenas perfis autenticados ou todos os perfis devem ser contados.

ApplicationName

Como os provedores de perfil armazenam informações de perfil separadamente para cada aplicativo, você deve garantir que seu esquema de dados inclua o nome do aplicativo e que consultas e atualizações também incluam o nome do aplicativo. Por exemplo, o comando a seguir é usado para recuperar um valor de propriedade de um banco de dados com base no nome de usuário e se o perfil é anônimo e garante que o valor ApplicationName esteja incluído na consulta.

SELECT Property
FROM PropertyTable
WHERE Username = 'user1'
AND IsAnonymous = False
AND ApplicationName = 'MyApplication'

Temas ASP.NET

O que são temas ASP.NET 2.0?

Um dos aspectos mais importantes de um aplicativo Web é uma aparência consistente em todo o site. ASP.NET desenvolvedores 1.x geralmente usam CSS (Folhas de Estilos em Cascata) para implementar uma aparência consistente. ASP.NET temas 2.0 melhoram significativamente no CSS porque dão ao desenvolvedor ASP.NET a capacidade de definir a aparência de ASP.NET controles de servidor, bem como elementos HTML. ASP.NET temas podem ser aplicados a controles individuais, a uma página da Web específica ou a um aplicativo Web inteiro. Os temas usam uma combinação de arquivos CSS, um arquivo de pele opcional e um diretório Imagens opcional se forem necessárias imagens. O arquivo skin controla a aparência visual de ASP.NET controles de servidor.

Onde os temas são armazenados?

O local onde os temas são armazenados difere com base em seu escopo. Os temas que podem ser aplicados a qualquer aplicativo são armazenados na seguinte pasta:

C:\WINDOWS\Microsoft.NET\Framework\v2.x.xxxxx\ASP.NETClientFiles\Themes\<Theme_Name>

Um tema específico de um aplicativo específico é armazenado em um App\_Themes\<Theme\_Name> diretório na raiz do site.

Observação

Um arquivo de skin só deve modificar as propriedades de controle do servidor que afetam a aparência.

Um tema global é um tema que pode ser aplicado a qualquer aplicativo ou site em execução no servidor Web. Esses temas são armazenados por padrão no ASP. Diretório NETClientfiles\Themes que está dentro do diretório v2.x.xxxxx. Como alternativa, você pode mover os arquivos de tema para a pasta aspnet_client/system_web/[version]/Themes/[theme_name] na raiz do seu site.

Temas específicos do aplicativo só podem ser aplicados ao aplicativo no qual os arquivos residem. Esses arquivos são armazenados no App\_Themes/<theme\_name> diretório na raiz do site.

Os componentes de um tema

Um tema é composto por um ou mais arquivos CSS, um arquivo de pele opcional e uma pasta Imagens opcional. Os arquivos CSS podem ser qualquer nome desejado (ou seja, default.css ou theme.css etc.) e devem estar na raiz da pasta de temas. Os arquivos CSS são usados para definir classes CSS comuns e atributos para seletores específicos. Para aplicar uma das classes CSS a um elemento de página, a propriedade CSSClass é usada.

O arquivo skin é um arquivo XML que contém definições de propriedade para ASP.NET controles de servidor. O código listado abaixo é um exemplo de arquivo de pele.

<asp:TextBox runat="server"
    BackColor="#FFC080"
    BorderColor="Black"
    BorderStyle="Solid"
    BorderWidth="1px"
    Font-Names="Tahoma, Verdana, Arial"
    Font-Size="Smaller" />

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0" />

A Figura 1 abaixo mostra uma pequena página de ASP.NET navegada sem um tema aplicado. A Figura 2 mostra o mesmo arquivo com um tema aplicado. A cor da tela de fundo e a cor do texto são configuradas por meio de um arquivo CSS. A aparência do botão e da caixa de texto são configuradas usando o arquivo de pele listado acima.

Sem Tema

Figura 1: Sem tema

Tema Aplicado

Figura 2: Tema Aplicado

O arquivo de pele listado acima define uma pele padrão para todos os controles TextBox e Controles de botão. Isso significa que todos os controles TextBox e Button inseridos em uma página assumirão essa aparência. Você também pode definir uma skin que pode ser aplicada a instâncias específicas desses controles usando a propriedade SkinID do controle.

O código a seguir define uma pele para um controle Button. Somente os controles Button com uma propriedade SkinID de goButton assumirão a aparência da pele.

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
    Text=go
    SkinID=goButton
    Width="95px" />

Você só pode ter um tipo de controle skin por servidor padrão. Se você precisar de skins adicionais, deverá usar a propriedade SkinID.

Aplicando temas a páginas

Um tema pode ser aplicado usando qualquer um dos seguintes métodos:

<No elemento pages> do arquivo web.config
@Page Na diretiva de uma página
Programaticamente

Aplicando um tema no arquivo de configuração

Para aplicar um tema no arquivo de configuração de aplicativos, use a seguinte sintaxe:

<system.web>
    <pages theme="CoolTheme" />
    ...
</system.web>

O nome do tema especificado aqui deve corresponder ao nome da pasta de temas. Essa pasta pode existir em qualquer um dos locais mencionados anteriormente neste curso. Se você tentar aplicar um tema que não existe, ocorrerá um erro de configuração.

Aplicando um tema na diretiva Page

Você também pode aplicar um tema na diretiva @ Page. Esse método permite que você use um tema para uma página específica.

Para aplicar um tema na @Page diretiva , use a seguinte sintaxe:

<%@ Page Language="C#" Theme=CoolTheme CodeFile="Default.aspx.cs" ... %>

Mais uma vez, o tema especificado aqui deve corresponder à pasta de tema, conforme mencionado anteriormente. Se você tentar aplicar um tema que não existe, ocorrerá uma falha de build. O Visual Studio também realçará o atributo e notificará você de que esse tema não existe.

Aplicando um tema programaticamente

Para aplicar um tema programaticamente, você deve especificar a propriedade Theme para a página no método Page_PreInit .

Para aplicar um tema programaticamente, use a seguinte sintaxe:

Page.Theme = CoolTheme;

É necessário aplicar o tema no método PreInit devido ao ciclo de vida da página. Se você aplicá-lo após esse ponto, o tema de páginas já terá sido aplicado pelo runtime e uma alteração nesse ponto é tarde demais no ciclo de vida. Se você aplicar um tema que não existe, ocorrerá uma HttpException . Quando um tema é aplicado programaticamente, um aviso de build ocorrerá se qualquer controle de servidor tiver uma propriedade SkinID especificada. Esse aviso destina-se a informar que nenhum tema é aplicado declarativamente e pode ser ignorado.

Exercício 1: Aplicando um tema

Neste exercício, você aplicará um tema ASP.NET a um site.

Importante

Se você estiver usando o Microsoft Word para inserir informações em um arquivo de capa, certifique-se de não substituir aspas regulares por aspas inteligentes. Aspas inteligentes causarão problemas com arquivos de capa.

Criar um site do ASP.NET.
Clique com o botão direito do mouse no projeto em Gerenciador de Soluções e escolha Adicionar Novo Item.
Escolha Arquivo de Configuração da Web na lista de arquivos e clique em Adicionar.
Clique com o botão direito do mouse no projeto em Gerenciador de Soluções e escolha Adicionar Novo Item.
Escolha Arquivo de Capa e clique em Adicionar.
Clique em Sim quando for perguntado se você deseja colocar o arquivo dentro da pasta App_Themes.
Clique com o botão direito do mouse na pasta SkinFile dentro da pasta App_Themes no Gerenciador de Soluções e escolha Adicionar Novo Item.
Escolha Folha de Estilos na lista de arquivos e clique em Adicionar. Agora você tem todos os arquivos necessários para implementar seu novo tema. No entanto, o Visual Studio nomeou a pasta de temas SkinFile. Clique com o botão direito do mouse nessa pasta e altere o nome para CoolTheme.

Abra o arquivo SkinFile.skin e adicione o seguinte código ao final do arquivo:

<asp:TextBox runat="server"
    BackColor="#FFC080"
    BorderColor="Black"
    BorderStyle="Solid"
    BorderWidth="1px"
    Font-Names="Tahoma, Verdana, Arial"
    Font-Size="Smaller"
/>

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
/>

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
    Text="go"
    SkinID="goButton"
    Width="95px"
/>

Salve o arquivo SkinFile.skin.
Abra o StyleSheet.css.
Substitua todo o texto nele pelo seguinte:
```
body {
    background-color: #FFDEAD;
}
```
Salve o arquivo StyleSheet.css.
Abra a página Default.aspx.
Adicione um controle TextBox e um controle Button.
Salve a página. Agora, navegue pela página Default.aspx. Ele deve ser exibido como um formulário da Web normal.
Abra o arquivo web.config.
Adicione o seguinte diretamente abaixo da marca de abertura <system.web> :
```
<pages theme="CoolTheme" />
```
Salve o arquivo web.config. Agora, navegue pela página Default.aspx. Ele deve ser exibido com o tema aplicado.
Se ainda não estiver aberto, abra a página Default.aspx no Visual Studio.
Selecione o Botão.
Altere a propriedade SkinID para goButton. Observe que o Visual Studio fornece uma lista suspensa com valores SkinID válidos para um controle Button.
Salve a página. Agora, visualize a página no navegador novamente. O Botão agora deve dizer "ir" e deve ser mais amplo na aparência.

Usando a propriedade SkinID , você pode facilmente configurar capas diferentes para diferentes instâncias de um determinado tipo de controle de servidor.

A propriedade StyleSheetTheme

Até agora, falamos apenas sobre como aplicar temas usando a propriedade Theme. Ao usar a propriedade Theme, o arquivo de capa substituirá quaisquer configurações declarativas para controles de servidor. Por exemplo, no exercício 1, você especificou um SkinID de "goButton" para o controle Button e que alterou o texto do Botão para "go". Talvez você tenha notado que a propriedade Text do Botão no designer foi definida como "Botão", mas o tema anulou isso. O tema sempre substituirá as configurações de propriedade no designer.

Se você quiser substituir as propriedades definidas no arquivo de capa do tema por propriedades especificadas no designer, poderá usar a propriedade StyleSheetTheme em vez da propriedade Theme. A propriedade StyleSheetTheme é igual à propriedade Theme, exceto que ela não substitui todas as configurações de propriedade explícitas, como a propriedade Theme.

Para ver isso em ação, abra o arquivo web.config do projeto no exercício 1 e altere o <pages> elemento para o seguinte:

<pages styleSheetTheme="CoolTheme" />

Agora, navegue pela página Default.aspx e você verá que o controle Button tem uma propriedade Text de "Button" novamente. Isso ocorre porque a configuração de propriedade explícita no designer está substituindo a propriedade Text definida pelo goButton SkinID.

Substituindo temas

Um tema global pode ser substituído aplicando um tema pelo mesmo nome na pasta App_Themes do aplicativo. No entanto, o tema não é aplicado em um cenário de substituição verdadeiro. Se o runtime encontrar arquivos de tema na pasta App_Themes, ele aplicará o tema usando esses arquivos e ignorará o tema global.

A propriedade StyleSheetTheme é substituível e pode ser substituída no código da seguinte maneira:

const String THEME_NAME = "CoolTheme";
public override string StyleSheetTheme {
    get { return THEME_NAME; }
    set { Page.StyleSheetTheme = THEME_NAME; }
}

Partes de Web

ASP.NET Web Parts é um conjunto integrado de controles para criar sites que permitem aos usuários finais modificar o conteúdo, a aparência e o comportamento das páginas da Web diretamente de um navegador. As modificações podem ser aplicadas a todos os usuários no site ou a usuários individuais. Quando os usuários modificam páginas e controles, as configurações podem ser salvas para manter as preferências pessoais de um usuário em sessões futuras do navegador, um recurso chamado personalização. Esses recursos de Web Parts significam que os desenvolvedores podem capacitar os usuários finais a personalizar um aplicativo Web dinamicamente, sem intervenção de desenvolvedor ou administrador.

Usando o conjunto de controle de Web Parts, você, como desenvolvedor, pode permitir que os usuários finais:

Personalizar o conteúdo da página. Os usuários podem adicionar novos controles de Web Parts a uma página, removê-los, ocultá-los ou minimizá-los como janelas comuns.
Personalizar layout de página. Os usuários podem arrastar um controle de Web Parts para uma zona diferente em uma página ou alterar sua aparência, propriedades e comportamento.
Exportar e importar controles. Os usuários podem importar ou exportar configurações de controle de Web Parts para uso em outras páginas ou sites, retendo as propriedades, a aparência e até mesmo os dados nos controles. Isso reduz as demandas de entrada e configuração de dados para os usuários finais.
Criar conexões. Os usuários podem estabelecer conexões entre controles para que, por exemplo, um controle de gráfico possa exibir um grafo para os dados em um controle de ticker de ações. Os usuários podem personalizar não apenas a conexão em si, mas a aparência e os detalhes de como o controle de gráfico exibe os dados.
Gerenciar e personalizar as configurações no nível do site. Os usuários autorizados podem definir configurações no nível do site, determinar quem pode acessar um site ou página, definir o acesso baseado em função a controles e assim por diante. Por exemplo, um usuário em uma função administrativa pode definir um controle de Web Parts para ser compartilhado por todos os usuários e impedir que usuários que não são administradores personalizem o controle compartilhado.

Normalmente, você trabalhará com Web Parts de uma das três maneiras: criar páginas que usam controles de Web Parts, criar controles de Web Parts individuais ou criar aplicativos Web completos e personalizáveis, como um portal.

Desenvolvimento de página

Os desenvolvedores de página podem usar ferramentas de design visual, como o Microsoft Visual Studio 2005, para criar páginas que usam Web Parts. Uma vantagem no uso de uma ferramenta como o Visual Studio é que o conjunto de controle de Web Parts fornece recursos para a criação e a configuração de controles de Web Parts em um designer visual. Por exemplo, você pode usar o designer para arrastar uma zona de Web Parts ou um controle de editor de Web Parts para a superfície de design e, em seguida, configurar o controle diretamente no designer usando a interface do usuário fornecida pelo conjunto de controle de Web Parts. Isso pode acelerar o desenvolvimento de aplicativos de Web Parts e reduzir a quantidade de código que você precisa escrever.

Desenvolvimento de controle

Você pode usar qualquer controle de ASP.NET existente como um controle de Web Parts, incluindo controles de servidor Web padrão, controles de servidor personalizados e controles de usuário. Para obter o controle programático máximo do seu ambiente, você também pode criar controles de Web Parts personalizados que derivam da classe WebPart. Para o desenvolvimento de controle de Web Parts individual, você normalmente criará um controle de usuário e o usará como um controle de Web Parts ou desenvolverá um controle de Web Parts personalizado.

Como exemplo de desenvolvimento de um controle de Web Parts personalizado, você pode criar um controle para fornecer qualquer um dos recursos fornecidos por outros ASP.NET controles de servidor que podem ser úteis para empacotar como um controle de Web Parts personalizável: calendários, listas, informações financeiras, notícias, calculadoras, controles de rich text para atualizar conteúdo, grades editáveis que se conectam a bancos de dados, gráficos que atualizam dinamicamente suas exibições ou informações de clima e viagem. Se você fornecer um designer visual com seu controle, qualquer desenvolvedor de páginas usando o Visual Studio poderá simplesmente arrastar seu controle para uma zona de Web Parts e configurá-lo em tempo de design sem precisar escrever código adicional.

Personalização é a base do recurso Web Parts. Ele permite que os usuários modifiquem ou personalizem o layout, a aparência e o comportamento dos controles de Web Parts em uma página. As configurações personalizadas são de longa duração: elas são mantidas não apenas durante a sessão atual do navegador (como no estado de exibição), mas também no armazenamento de longo prazo, para que as configurações de um usuário também sejam salvas para sessões futuras do navegador. A personalização é habilitada por padrão para páginas de Web Parts.

Os componentes estruturais da interface do usuário dependem da personalização e fornecem a estrutura principal e os serviços necessários para todos os controles de Web Parts. Um componente estrutural da interface do usuário necessário em cada página de Web Parts é o controle WebPartManager. Embora nunca seja visível, esse controle tem a tarefa crítica de coordenar todos os controles de Web Parts em uma página. Por exemplo, ele rastreia todos os controles de Web Parts individuais. Ele gerencia zonas de Web Parts (regiões que contêm controles de Web Parts em uma página) e quais controles estão em quais zonas. Ele também rastreia e controla os diferentes modos de exibição em que uma página pode estar, como procurar, conectar, editar ou modo de catálogo, e se as alterações de personalização se aplicam a todos os usuários ou a usuários individuais. Por fim, ele inicia e rastreia conexões e comunicação entre controles de Web Parts.

O segundo tipo de componente estrutural da interface do usuário é a zona. As zonas atuam como gerentes de layout em uma página de Web Parts. Eles contêm e organizam controles que derivam da classe Part (controles de parte) e fornecem a capacidade de fazer o layout modular da página na orientação horizontal ou vertical. As zonas também oferecem elementos comuns e consistentes da interface do usuário (como estilo de cabeçalho e rodapé, título, estilo de borda, botões de ação e assim por diante) para cada controle que contêm; esses elementos comuns são conhecidos como o cromo de um controle. Vários tipos especializados de zonas são usados nos diferentes modos de exibição e com vários controles. Os diferentes tipos de zonas são descritos na seção Controles Essenciais de Web Parts abaixo.

Os controles de interface do usuário de Web Parts, todos derivados da classe Part , compõem a interface do usuário primária em uma página de Web Parts. O conjunto de controle de Web Parts é flexível e inclusivo nas opções que oferece para criar controles de parte. Além de criar seus próprios controles de Web Parts personalizados, você também pode usar controles de servidor ASP.NET existentes, controles de usuário ou controles de servidor personalizados como controles de Web Parts. Os controles essenciais mais comumente usados para criar páginas de Web Parts são descritos na próxima seção.

Controles essenciais de Web Parts

O conjunto de controle de Web Parts é extenso, mas alguns controles são essenciais porque são necessários para que as Web Parts funcionem ou porque são os controles mais usados em páginas de Web Parts. À medida que você começa a usar Web Parts e criar páginas básicas de Web Parts, é útil estar familiarizado com os controles de Web Parts essenciais descritos na tabela a seguir.

Controle de Web Parts	Descrição
Webpartmanager	Gerencia todos os controles de Web Parts em uma página. Um (e apenas um) controle WebPartManager é necessário para cada página de Web Parts.
Catalogzone	Contém controles CatalogPart. Use essa zona para criar um catálogo de controles de Web Parts dos quais os usuários podem selecionar controles a serem adicionados a uma página.
Editorzone	Contém controles EditorPart. Use essa zona para permitir que os usuários editem e personalizem controles de Web Parts em uma página.
Webpartzone	Contém e fornece layout geral para os controles WebPart que compõem a interface do usuário main de uma página. Use essa zona sempre que criar páginas com controles de Web Parts. As páginas podem conter uma ou mais zonas.
Connectionszone	Contém controles WebPartConnection e fornece uma interface do usuário para gerenciar conexões.
WebPart (GenericWebPart)	Renderiza a interface do usuário primária; a maioria dos controles de interface do usuário de Web Parts se enquadra nessa categoria. Para o controle programático máximo, você pode criar controles de Web Parts personalizados que derivam do controle WebPart base. Você também pode usar controles de servidor, controles de usuário ou controles personalizados existentes como controles de Web Parts. Sempre que qualquer um desses controles é colocado em uma zona, o controle WebPartManager os encapsula automaticamente com controles GenericWebPart em tempo de execução para que você possa usá-los com a funcionalidade de Web Parts.
Catalogpart	Contém uma lista de controles de Web Parts disponíveis que os usuários podem adicionar à página.
Webpartconnection	Cria uma conexão entre dois controles de Web Parts em uma página. A conexão define um dos controles de Web Parts como um provedor (de dados) e o outro como consumidor.
Editorpart	Serve como a classe base para os controles do editor especializado.
Controles EditorPart (AppearanceEditorPart, LayoutEditorPart, BehaviorEditorPart e PropertyGridEditorPart)	Permitir que os usuários personalizem vários aspectos dos controles de interface do usuário de Web Parts em uma página

Laboratório: Criar uma página de Web Part

Neste laboratório, você criará uma página de Web Part que persistirá as informações por meio de perfis de ASP.NET.

Criando uma página simples com Web Parts

Nesta parte do passo a passo, você cria uma página que usa controles de Web Parts para mostrar conteúdo estático. A primeira etapa no trabalho com Web Parts é criar uma página com dois elementos estruturais necessários. Primeiro, uma página de Web Parts precisa de um controle WebPartManager para rastrear e coordenar todos os controles de Web Parts. Em segundo lugar, uma página de Web Parts precisa de uma ou mais zonas, que são controles compostos que contêm WebPart ou outros controles de servidor e ocupam uma região especificada de uma página.

Observação

Você não precisa fazer nada para habilitar a personalização de Web Parts; ele está habilitado por padrão para o conjunto de controle de Web Parts. Quando você executa pela primeira vez uma página de Web Parts em um site, ASP.NET configura um provedor de personalização padrão para armazenar as configurações de personalização do usuário. Para obter mais informações sobre personalização, consulte Visão geral da personalização de Web Parts.

Para criar uma página para conter controles de Web Parts

Feche a página padrão e adicione uma nova página ao site chamado WebPartsDemo.aspx.
Alterne para o modo design .
No menu Exibir , verifique se as opções Controles não Visuais e Detalhes estão selecionadas para que você possa ver marcas de layout e controles que não têm uma interface do usuário.
Coloque o ponto de inserção antes das <div> marcas na superfície de design e pressione ENTER para adicionar uma nova linha. Posicione o ponto de inserção antes do novo caractere de linha, clique no controle de lista suspensa Formato de Bloco no menu e selecione a opção Título 1 . No título, adicione o texto Página de Demonstração de Web Parts.
Na guia WebParts da Caixa de Ferramentas, arraste um controle WebPartManager para a página, posicionando-o logo após o novo caractere de linha e antes das <div>marcas.

O controle WebPartManager não renderiza nenhuma saída, portanto, ele aparece como uma caixa cinza na superfície do designer.
Posicione o ponto de inserção dentro das <div> marcas.
No menu Layout , clique em Inserir Tabela e crie uma nova tabela que tenha uma linha e três colunas. Clique no botão Propriedades da Célula , selecione a parte superior da lista suspensa Alinhar verticalmente , clique em OK e clique em OK novamente para criar a tabela.
Arraste um controle WebPartZone para a coluna da tabela esquerda. Clique com o botão direito do mouse no controle WebPartZone , escolha Propriedades e defina as seguintes propriedades:

ID: SidebarZone

HeaderText: barra lateral
Arraste um segundo controle WebPartZone para a coluna da tabela intermediária e defina as seguintes propriedades:

ID: MainZone

HeaderText: Main
Salve o arquivo.

Sua página agora tem duas zonas distintas que você pode controlar separadamente. No entanto, nenhuma zona tem conteúdo, portanto, criar conteúdo é a próxima etapa. Para este passo a passo, você trabalha com controles de Web Parts que exibem apenas conteúdo estático.

O layout de uma zona de Web Parts é especificado por um <elemento zonetemplate> . Dentro do modelo de zona, você pode adicionar qualquer controle ASP.NET, seja um controle de Web Parts personalizado, um controle de usuário ou um controle de servidor existente. Observe que aqui você está usando o controle Rótulo e, para isso, está simplesmente adicionando texto estático. Quando você coloca um controle de servidor regular em uma zona WebPartZone , ASP.NET trata o controle como um controle de Web Parts em tempo de execução, o que permite recursos de Web Parts no controle.

Para criar conteúdo para a zona de main

No modo design , arraste um controle Rótulo da guia Padrão da Caixa de Ferramentas para a área de conteúdo da zona cuja propriedade ID está definida como MainZone.
Alterne para Exibição de origem. Observe que um <elemento zonetemplate> foi adicionado para encapsular o controle Label no MainZone.
Adicione um atributo chamado title ao elemento asp <:label> e defina seu valor como Content. Remova o atributo Text="Label" do <elemento asp:label> . Entre as marcas de abertura e fechamento do <elemento asp:label> , adicione um texto como Bem-vindo à minha Home Page dentro de um par de marcas de <elemento h2> . Seu código deve ter a aparência a seguir.
```
<asp:webpartzone id="MainZone" runat="server" headertext="Main">
    <zonetemplate>
        <asp:label id="Label1" runat="server" title="Content">
            <h2>Welcome to My Home Page</h2>
        </asp:label>
    </zonetemplate>
</asp:webpartzone>
```
Salve o arquivo.

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

Para criar um controle de usuário

Adicione um novo controle de usuário da Web ao seu site para servir como um controle de pesquisa. Desmarque a opção para Colocar o código-fonte em um arquivo separado. Adicione-o no mesmo diretório que a página WebPartsDemo.aspx e nomeie-o como SearchUserControl.ascx.

Observação

O controle de usuário para este passo a passo não implementa a funcionalidade de pesquisa real; ele é usado apenas para demonstrar recursos de Web Parts.
Alterne para o modo design . Na guia Padrão da Caixa de Ferramentas, arraste um controle TextBox para a página.
Coloque o ponto de inserção após a caixa de texto que você acabou de adicionar e pressione ENTER para adicionar uma nova linha.
Arraste um controle Button para a página na nova linha abaixo da caixa de texto que você acabou de adicionar.

Alterne para Exibição de origem. Verifique se o código-fonte do controle do usuário é semelhante ao exemplo a seguir.

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

Salve e feche o arquivo.

Agora você pode adicionar controles de Web Parts à zona barra lateral. Você está adicionando dois controles à zona barra lateral, um contendo uma lista de links e outro que é o controle de usuário criado no procedimento anterior. Os links são adicionados como um controle de servidor de rótulo padrão, semelhante à maneira como você criou o texto estático para a zona Principal. No entanto, embora os controles de servidor individuais contidos no controle de usuário possam estar contidos diretamente na zona (como o controle de rótulo), nesse caso eles não estão. Em vez disso, elas fazem parte do controle de usuário que você criou no procedimento anterior. Isso demonstra uma maneira comum de empacotar quaisquer controles e funcionalidades extras que você deseja em um controle de usuário e, em seguida, referenciar esse controle em uma zona como um controle de Web Parts.

Em tempo de execução, o conjunto de controle de Web Parts encapsula ambos os controles com controles GenericWebPart. Quando um controle GenericWebPart encapsula um controle de servidor Web, o controle de parte genérica é o controle pai e você pode acessar o controle do servidor por meio da propriedade ChildControl do controle pai. Esse uso de controles de parte genérica permite que os controles de servidor Web padrão tenham o mesmo comportamento básico e atributos que os controles de Web Parts que derivam da classe WebPart .

Abra a página WebPartsDemo.aspx.
Alterne para o modo design .
Arraste a página de controle de usuário que você criou, SearchUserControl.ascx, de Gerenciador de Soluções para a zona cuja propriedade ID está definida como SidebarZone e solte-a lá.
Salve a página WebPartsDemo.aspx.
Alterne para Exibição de origem.

Dentro do <elemento asp:webpartzone> para SidebarZone, logo acima da referência ao controle de usuário, adicione um <elemento asp:label> com links contidos, conforme mostrado no exemplo a seguir. Além disso, adicione um atributo Title à marca de controle do usuário, com um valor de Pesquisa, conforme mostrado.

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

Salve e feche o arquivo.

Agora você pode testar sua página navegando até ela no navegador. A página exibe as duas zonas. A captura de tela a seguir mostra a página.

Página demonstração de Web Parts com duas zonas

Captura de tela passo a passo do VS Walkthrough 1 de Web Parts

Figura 3: Captura de tela passo a passo do VS Walkthrough 1 de Web Parts

Na barra de título de cada controle há uma seta para baixo que fornece acesso a um menu de verbos de ações disponíveis que você pode executar em um controle. Clique no menu de verbos de um dos controles e clique no verbo Minimizar e observe que o controle está minimizado. No menu de verbos, clique em Restaurar e o controle retorna ao seu tamanho normal.

Habilitando os usuários a editar páginas e alterar o layout

As Web Parts fornecem a capacidade para que os usuários alterem o layout dos controles de 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 os usuários editem várias características dos controles, incluindo sua aparência, layout e comportamento. O conjunto de controle de Web Parts fornece funcionalidade básica de edição para controles WebPart . Embora você não faça isso neste passo a passo, você também pode criar controles de editor personalizados que permitem que os usuários editem os recursos de controles WebPart . Assim como acontece com a alteração do local de um controle WebPart , a edição das propriedades de um controle depende de ASP.NET personalização para salvar as alterações feitas pelos usuários.

Nesta parte do passo a passo, você adiciona a capacidade dos usuários de editar as características básicas de qualquer controle WebPart na página. Para habilitar esses recursos, adicione outro controle de usuário personalizado à página, juntamente com um <elemento asp:editorzone> e dois controles de edição.

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

No Visual Studio, no menu Arquivo , selecione o submenu Novo e clique na opção Arquivo .
Na caixa de diálogo Adicionar Novo Item , selecione Controle de Usuário da Web. Nomeie o novo arquivo DisplayModeMenu.ascx. Desmarque a opção para Colocar o código-fonte em um arquivo separado.
Clique em Adicionar para criar o novo controle.
Alterne para Exibição de origem.

Remova todo o código existente no novo arquivo e cole o código a seguir. Esse código de controle de usuário usa recursos do conjunto de controle de Web Parts que permitem que uma página altere sua exibição ou modo de exibição e também permite alterar a aparência física e o layout da página enquanto você estiver em determinados modos de exibição.

<%@ Control Language="C#" ClassName="DisplayModeMenuCS" %>

<script runat="server">

    // 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" runat="server"
      BorderWidth="1" Width="230" BackColor="lightgray"
        Font-Names="Verdana, Arial, Sans Serif">
        <asp:Label ID="Label1" runat="server"
          Text=" Display Mode" Font-Bold="true"
            Font-Size="8" Width="120" />
        <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>

Salve o arquivo clicando no ícone salvar na barra de ferramentas ou selecionando Salvar no menu Arquivo .

Para permitir que os usuários alterem o layout

Abra a página WebPartsDemo.aspx e alterne para o modo design .
Posicione o ponto de inserção no modo design logo após o controle WebPartManager que você adicionou anteriormente. Adicione um retorno rígido após o texto para que haja uma linha em branco após o controle WebPartManager . Coloque o ponto de inserção na linha em branco.
Arraste o controle de usuário que você acabou de criar (o arquivo se chama DisplayModeMenu.ascx) para a página WebPartsDemo.aspx e solte-o na linha em branco.
Arraste um controle EditorZone da seção WebParts da Caixa de Ferramentas para a célula restante da tabela aberta na página WebPartsDemo.aspx.
Na seção WebParts da Caixa de Ferramentas, arraste um controle AppearanceEditorPart e um controle LayoutEditorPart para o controle EditorZone .

Alterne para Exibição de origem. O código resultante na célula da tabela deve ser semelhante ao código a seguir.

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

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

Agora você pode testar a capacidade de editar páginas e alterar o layout.

Para testar alterações de layout

Carregue a página em um navegador.
Clique no menu suspenso Modo de Exibição e selecione Editar. Os títulos de zona são exibidos.
Arraste o controle Meus Links pela barra de título da zona barra lateral até a parte inferior da zona Principal. Sua página deve ser semelhante à captura de tela a seguir.

Página demonstração de Web Parts com o controle Meus Links movido

Captura de tela passo a passo do VS Walkthrough 2 de Web Parts

Figura 4: Captura de tela passo a passo do VS Walkthrough 2 de Web Parts

Clique no menu suspenso Modo de Exibição e selecione Procurar. A página é atualizada, os nomes de zona desaparecem e o controle Meus Links permanece onde você a posicionou.
Para demonstrar que a personalização está funcionando, feche o navegador e carregue a página novamente. As alterações feitas são salvas para sessões futuras do navegador.
No menu Modo de Exibição , selecione Editar.

Cada controle na página agora é exibido com uma seta para baixo em sua barra de título, que contém o menu suspenso de verbos.
Clique na seta para exibir o menu de verbos no controle Meus Links . Clique no verbo Editar .

O controle EditorZone é exibido, exibindo os controles EditorPart adicionados.
Na seção Aparência do controle de edição, altere o Título para Meus Favoritos, use a lista suspensa Tipo do Chrome para selecionar Somente Título e clique em Aplicar. A captura de tela a seguir mostra a página no modo de edição.

Página demonstração de Web Parts no modo Editar

Captura de tela passo a passo do VS Walkthrough 3 de Web Parts

Figura 5: Captura de tela passo a passo do VS Walkthrough 3 de Web Parts

Clique no menu Modo de Exibição e selecione Procurar para retornar ao modo de navegação.
O controle agora tem um título atualizado e nenhuma borda, conforme mostrado na captura de tela a seguir.

Página de demonstração de Web Parts editada

Captura de tela passo a passo do VS Walkthrough 4 de Web Parts

Figura 4: Web Parts VS Passo a passo 4 Captura de tela

Adicionando Web Parts em tempo de execução

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

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

Abra a página WebPartsDemo.aspx e alterne para o modo design .
Na guia WebParts da Caixa de Ferramentas, arraste um controle CatalogZone para a coluna direita da tabela, abaixo do controle EditorZone .

Ambos os controles podem estar na mesma célula da tabela porque não serão exibidos ao mesmo tempo.
No painel Propriedades, atribua a cadeia de caracteres Adicionar Web Parts à propriedade HeaderText do controle CatalogZone .
Na seção WebParts da Caixa de Ferramentas, arraste um controle DeclarativeCatalogPart para a área de conteúdo do controle CatalogZone .
Clique na seta no canto superior direito do controle DeclarativeCatalogPart para expor seu menu Tarefas e selecione Editar Modelos.
Na seção Standard da Caixa de Ferramentas, arraste um controle FileUpload e um controle Calendar para a seção WebPartsTemplate do controle DeclarativeCatalogPart .
Alterne para Exibição de origem. 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 do catálogo.
Adicione uma propriedade Title a cada um dos controles adicionados ao catálogo, usando o valor de cadeia de caracteres mostrado para cada título no exemplo de código abaixo. Embora o título não seja uma propriedade que você normalmente pode definir nesses dois controles de servidor em tempo de design, quando um usuário adiciona esses controles a uma zona WebPartZone do catálogo em tempo de execução, cada um deles é encapsulado com um controle GenericWebPart . Isso permite que eles atuem como controles de Web Parts, para que possam exibir títulos.

O código para os dois controles contidos no controle DeclarativeCatalogPart deve ser o seguinte.
```
<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">
    <WebPartsTemplate>
        <asp:Calendar ID="Calendar1" runat="server" title="My Calendar" />
        <asp:FileUpload ID="FileUpload1" runat="server" title="Upload Files" />
    </WebPartsTemplate>
</asp:DeclarativeCatalogPart>
```
Salve a página.

Agora você pode testar o catálogo.

Para testar o catálogo de Web Parts

Carregue a página em um navegador.
Clique no menu suspenso Modo de Exibição e selecione Catálogo.

O catálogo intitulado Adicionar Web Parts é exibido.
Arraste o controle Meus Favoritos da zona Principal de volta para a parte superior da zona barra lateral e solte-o lá.
No catálogo Adicionar Web Parts, selecione marcar caixas e, em seguida, selecione Principal na lista suspensa que contém as zonas disponíveis.
Clique em Adicionar no catálogo. Os controles são adicionados à zona Principal. Se desejar, você pode adicionar várias instâncias de controles do catálogo à sua página.

A captura de tela a seguir mostra a página com o controle de upload de arquivo e o calendário na zona Principal.

Controles adicionados à zona Principal do catálogo

Figura 5: controles adicionados à zona principal do catálogo 6. Clique no menu suspenso Modo de Exibição e selecione Procurar. O catálogo desaparece e a página é atualizada. 7. Feche o navegador. Carregue a página novamente. As alterações feitas persistem.

Compartilhar via