Partilhar via

Demonstra Passo a passo: Implementando a personalização de Web Parts com um controle de usuário

  • Artigo

This walkthrough shows you how to create an ASP.NET user control that relies on Web Parts personalization to provide user-specific default values on a Web page.

ASP.NET Web Parts enable you to build Web pages with modular layouts in which users can modify the appearance and content to suit their preferences.A key Web Parts feature known as personalization lets you save user-specific settings for each page and reuse those settings in future browser sessions.

Usando Web Parts e personalização, você pode criar páginas da Web que incluem um recurso útil para muitos aplicativos da Web: a capacidade de fornecer valores padrão específicos de usuário em um formulário.Esta explicação passo a passo demonstra como dar suporte a valores padrão específicos de usuário ao implementar um controle de usuário que pode ser tratado como um controle Web Parts personalizável.This development approach could be useful if you were creating an application for customer service agents to fill out online forms, for example.O Web Parts e os recursos de personalização permitem que sua página reconheça cada agente.O controle de usuário permite que cada agente salve valores padrão para os campos no formulário, e em seguida, os valores padrão podem ser preenchidos automaticamente em visitas subsequentes à página.

Observação:

The user control you create in this walkthrough does not inherit from the WebPart class.But in this walkthrough you learn that a user control can function as a WebPart control.During the walkthrough you add the user control to a WebPartZoneBase zone.Doing so enables ASP.NET to wrap the user control in a GenericWebPart control.The user control will then work like any other WebPart control, and will allow you to explore personalization.

Durante este explicação passo a passo, você aprenderá como:

  • Criar um controle de usuário com propriedades personalizáveis cujos valores podem ser salvos em armazenamentos de longo prazo.

  • Exibir valores padrão específicos de usuário em um formulário de uma página da Web.

  • Work with the user control in a zone as a true WebPart control.

    Observação:

    This type of application could be developed using ASP.NET profiles.However, in this case you are not storing information about the user to be reused across an entire application, as in a shopping cart application.Instead, you are saving user-specific preferences or settings for each control, on a per-page basis.For more information about profiles, see Visão geral sobre propriedades de perfil do ASP.NET.

Pré-requisitos

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

  • Internet Information Services (IIS) instalado e configurado no computador que hospedará o site.Para obter detalhes sobre como instalar e configurar o Serviços de Informações da Internet, consulte a documentação de Ajuda do Serviços de Informações da Internet incluída incluída na instalação ou consulte a documentação do Serviços de Informações da Internet online no site Microsoft TechNet (Serviços de Informações da Internet 6.0 recursos técnicos).

  • Um site da Web ASP.NET que possa identificar usuários individuais.Se você tiver um site já configurado, você pode usar esse site como um ponto de partida para este explicação passo a passo.Otherwise, for details on creating a virtual directory or site, see Como: Criar e configurar diretórios virtual no IIS 5.0 e 6.0.

  • Um provedor de personalização configurado e um banco de dados.Web Parts personalization is enabled by default, and it uses the SQL personalization provider (SqlPersonalizationProvider) with the Microsoft SQL Server Standard Edition to store personalization data.This walkthrough uses SSE and the default SQL provider.Se você tiver o SSE instalado, nenhuma configuração será necessária.SSE is available with Microsoft Visual Studio 2005 as an optional part of the installation, or as a free download.Para obter detalhes, consulte o Microsoft SQ Página da Web.To use one of the full versions of SQL Server, you must install and configure an ASP.NET application services database, and configure the SQL personalization provider to connect to that database.Para obter detalhes, consulte:Criando e Configurando o Banco de Dados dos Serviços de Aplicativos para o SQL Server.Você também pode criar e configurar um provedor personalizado para uso com outros bancos de dados não SQL ou soluções de armazenamento.For details and a code example see Implementando um Provedor de Associação.

Criando um Controle de Usuário Personalizável

Nesta parte da explicação passo a passo, você cria um controle de usuário que fornece a interface de usuário (UI) para um formulário de informações de agente.O controle também expõe propriedades personalizáveis para obter informações sobre nome e telefone.

Observação:

Você não precisa permitir personalização de Web Parts; ela é ativada por padrão.Para obter mais informações sobre serialização, consulte Visão geral sobre personalização de Web Parts.

Para criar propriedades personalizáveis para o controle de usuário

  1. In a text editor, create a new file and add the following control declaration to the beginning of the file, along with opening and closing <script> tags:

    <%@ control language="VB" classname="AccountUserControl" %>
<script >
</script>

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

  2. Dentro de <script> Rótulos, adicione código para criar duas propriedades personalizáveis: uma chamada UserName, a Outros chamada Phone, conforme mostrado no exemplo a seguir.

    Observação:

    Each property has a Personalizable attribute.This enables Web Parts personalization to store the property values in a database.

    		 
      <Personalizable()> _
  Property UserName() As String

    Get
      If Textbox1.Text Is Nothing Or Textbox1.Text.Length < 0 Then
          Return String.Empty
      Else
          Return Textbox1.Text
      End If
    End Get

    Set(ByVal value As String)
      Textbox1.Text = value
    End Set

  End Property

  <Personalizable()> _
  Property Phone() As String

    Get
      If Textbox2.Text Is Nothing Or Textbox2.Text.Length < 0 Then
          Return String.Empty
      Else
          Return Textbox2.Text
      End If
    End Get

    Set(ByVal value As String)
      Textbox2.Text = value
    End Set

  End Property

      [Personalizable]
  public string UserName
  {
    get
    {
      if(Textbox1.Text == null | Textbox1.Text.Length < 0)
        return String.Empty;
      else
        return Textbox1.Text;
    }

    set
    {
      Textbox1.Text = value;
    }
  }

  [Personalizable]
  public string Phone
  {
    get
    {
      if(Textbox2.Text == null | Textbox2.Text.Length < 0)
        return String.Empty;
      else
        return Textbox2.Text;
    }

    set
    {
      Textbox2.Text = value;
    }
  }
    Observação de segurança:

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

  3. Nomeie o arquivo AccountUserControlCS.ascx ou AccountUserControlVB.ascx (dependendo de qual linguagem você estiver usando), e salve-o no diretório raiz do site.

Agora que você adicionou propriedades personalizáveis para salvar os valores padrão, você pode adicionar controles de interface de usuário ao controle de usuário para exibir um nome do usuário e telefone.

Para adicionar controles de interface de usuário ao controle de usuário

  1. Beneath the <script> tags, add a Label control and a TextBox control wrapped by <div> tags to contain the user's name, as shown in the following code example:

    <div>
<asp:label id="Label1" >Name</asp:label>
<asp:textbox id="Textbox1"  />
</div>

  2. Beneath the control you just added, add a Label control and a TextBox control wrapped by <div> tags to contain the user's phone number, as in the following example:

    <div>
<asp:label id="Label2" >Phone</asp:label>
<asp:textbox id="Textbox2"  />
</div>

  3. Beneath the control you just added, add an <asp:button> element wrapped by <div> tags, to save the user's information by performing a postback:

    <div>
<asp:button id="Button1"  
  text="Save Form Values" />
</div>

  4. Salve o arquivo.

Referenciando o Controle do Usuário como um Controle Web Parts

Now that you have created a user control with personalizable properties, you can create an ASP.NET Web page to host the user control as a Web Parts control.É necessário manter o controle como um controle Web Parts para que os recursos de personalização funcionem.

Para fazer referência ao controle de usuário como um controle Web Parts

  1. In a text editor, create a new file and add the following page declaration to the beginning of the file:

    <%@ page language="VB" %>

    <%@ page language="C#" %>

  2. Beneath the page declaration, add a declaration to reference the user control you created previously, as shown in the following example:

    <%@ register tagprefix="uc1" 
    tagname="AccountUserControl" 
    src="AccountUserControlvb.ascx"%>

    <%@ register tagprefix="uc1" 
    tagname="AccountUserControl" 
    src="AccountUserControlcs.ascx"%>

  3. Sob a referência de controle, adicione a seguinte estrutura de página básica para hospedar o controle de usuário como um controle Web Parts.

    Observação:

    For the user control to work as a Web Parts control, the page must contain an <asp:webpartmanager> element, and the user control must be contained within an <asp:webpartzone> element and a <zonetemplate> element in succession.

    		 
    <html>
<head >
    <title>Personalizable User Control</title>
</head>
<body>
    <form id="form1" >
      <asp:webpartmanager id="WebPartManager1"   />
      <asp:webpartzone id="zone1"  headertext="Main">
        <zonetemplate>
          <uc1:AccountUserControl 

            id="accountwebpart"
            title="Agent Information" /> 
        </zonetemplate>
      </asp:webpartzone>
    </form>
</body>
</html>

  4. Name the file Hostaccountcontrol.aspx and save it in the same directory as the user control.

Você criou agora um controle de usuário personalizável, e referenciou-o como um controle Web Parts em um página de Web Forms.A etapa final é testar seu controle de usuário.

Para testar o controle de usuário personalizável

  1. Load the Hostaccountcontrol.aspx page in a browser.

  2. Insira valores nos campos Name e Phone, e clique no botão Save Form Values.

  3. Feche o navegador.

  4. Carregue a página novamente em um navegador.

    The values you entered previously appear in the form.Estes são os valores que foram salvos nas propriedades personalizáveis, e foram restaurados do banco de dados quando você recarregou a página no navegador.

  5. Digite os novos valores no formulário, mas não clique no botão para salvá-los.

  6. Feche o navegador.

  7. Carregue a página novamente em um navegador.

    The original values you entered and saved in the personalized properties are the ones that reappear in the form, because you did not save the new values.

Próximas etapas

Esta explicação passo a passo demonstrou as tarefas básicas envolvidas na criação de um controle de usuário com propriedades personalizáveis.Você criou um controle que permite que você salve configurações específicas de usuário para a página e controles específicos, e exiba as configurações salvas quando o usuário revisitar a página em uma nova sessão do navegador.Sugestões para explorações adicionais incluem:

Consulte também

Conceitos

Visão geral sobre Web Parts do ASP.NET

Visão geral sobre personalização de Web Parts