Partilhar via

Como: Compilar e executar o dados-limite Web Parts controle Example

  • Artigo

This topic contains instructions for building and running the data-bound WebPart control, for which a complete code example is provided in the topic Exemplo do Controle Web Parts com Dados Vinculados.The code example demonstrates how to create a custom server control that binds a GridView control to a data source, but also inherits from the WebPart class so that it can participate in Web Parts applications.Este tópico fornece as informações relacionadas que serão necessárias para compilar o exemplo de código e configurar um aplicativo ASP.NET para executar o controle como um controle Web Parts.

Compilar o controle WebPart

Para o exemplo de código a ser executado, você deve compilar este código-fonte.Você pode compilá-lo explicitamente e colocar o assembly resultante na pasta Bin do seu site da Web ou o cache global de assemblies.Como alternativa, você pode colocar o código-fonte em seu site na pasta App_Code, onde ele irá ser compilada em tempo de execução dinamicamente.Este exemplo de código usa compilação dinâmica.Para uma explicação passo a passo que demonstre como compilar, consulte Explicação Passo a Passo: Desenvolvendo e Usando um Controle de Servidor Personalizado.

Para compilar o controle WebPart com dados vinculados dinamicamente

  1. Na pasta raiz do seu aplicativo da Web, criar uma pasta chamada App_Code.

  2. Obtenha o código-fonte para o controle personalizado vinculado a dados WebPart do tópico Exemplo do Controle Web Parts com Dados Vinculados.Coloque o arquivo código-fonte na pasta App_Code.O nome do arquivo não faz diferença porque se você estiver usando compilação dinâmica, mas o arquivo deve ter a extensão apropriada para a linguagem que você está usando (tais como.cs ou.vb).

Usando o controle em um aplicativo Web Parts

Configurar um aplicativo para usar Web Parts requer somente que você tenha um site ASP.NET que possa autenticar usuários individuais e um banco de dados habilitado para manipular serviços de aplicativos incluindo personalização.Para esse exemplo (porque ele usa um controle vinculado a dados), você também precisará criar uma sequência de conexão no arquivo Web.config que permita à fonte de dados se conectar ao banco de dados exemplo Northwind.Depois que o aplicativo é configurado, em cada aplicativo de Web Parts, você precisa adicionar um controle WebPartManager e pelo menos um controle WebPartZone para cada página da Web que hospedará o WebPart e controles de servidor em seu aplicativo de Web Parts.O segundo procedimento a seguir demonstra como adicionar esses controles e realizar as outras etapas necessárias para preparar a página para executar o controle vinculados a dados.

Para configurar um aplicativo ASP.NET para executar controles Web Parts

  1. Garanta que você tenha um aplicativo ASP.NET que esteja configurado para reconhecer usuários individuais.Se você precisar de instruções sobre como criar tal um site, consulte Como: Criar e configurar diretórios virtual no IIS 5.0 e 6.0 ou Como: Criar e configurar local Web sites do ASP.NET no IIS 6.0.

  2. Garanta que você tenha um provedor personalizado configurado e banco de dados.Personalização de Web Parts é ativada por padrão e usa o provedor de personalização SQL (SqlPersonalizationProvider) com a edição do Microsoft SQL Server Express (SSE) para armazenar os dados de personalização.Este tópico usa 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 do Microsoft.com.Para usar uma das versões completas do Microsoft SQL Server, você deve instalar e configurar um banco de dados um aplicativo ASP.NET com serviços de banco de dados e configurar o provedor personalizado 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.Você também pode criar e configurar um provedor personalizado para uso com outros bancos de dados não SQL ou soluções de armazenamento.Para obter detalhes e um exemplo de código, consulte Implementando um Provedor de Associação.

  3. Criar uma sequência de conexão para que o controle vinculado a dados possa se conectar ao banco de dados de exemplo Northwind.Para executar o exemplo, será necessário acesso ao banco de dados Northwind de exemplo fornecido com o SQL Server.Se você não tiver o banco de dados Northwind de exemplo instalado, você poderá baixar scripts para criar e instalar o banco de dados a partir de centralizar de download da Microsoft.

    Uma abordagem recomendada para sequências de caracteres de conexão é colocá-los no arquivo Web.config de seu aplicativo.Para obter mais informações sobre arquivos de configuração, consulte Arquivos de configuração ASP.NET.O exemplo de código a seguir mostra um sequência de caracteres de conexão no arquivo Web.config, conectando-se a uma instância local do Northwind em execução no SSE.Observe que as aspas simples ('), que normalmente delimitariam o caminho para o arquivo de banco de dados, são processadas como entidades (").Isso é necessário porque o Web.config é um arquivo XML.

    <connectionStrings>
  <add name="nwind" 
    connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=
    &quot;C:\SQL Server 2000 Sample Databases\NORTHWND.MDF&quot;;
    Initial Catalog=Northwind;Integrated Security=True;"
    providerName="System.Data.SqlClient" />
</connectionStrings>
    Observação:

    É recomendável que você criptografe qualquer informação confidencial, como uma senha contida em uma sequência de caracteres de conexão.Para obter detalhes sobre a criptografia de dados de configuração, consulte Demonstra Passo a passo: Criptografando informações de configuração usando configuração protegida.

  4. Na seção <system.web> do arquivo Web.config, adicione um elemento <webparts>.Isso não é necessário para cada aplicativo de Web Parts, mas alguns recursos de aplicativos de Web Parts devem ser configurados nesta seção se você deseja usá-los.O controle WebPart exemplo vinculado a dados está habilitado para exportar um arquivo de configuração contendo seus dados de estado e de propriedade.Devido ao fato de o recurso de exportação estar desativado por padrão em aplicativos de Web Parts, você deve ativá-lo na seção <webParts>.Adicione o atributo enabledExport para o elemento <webParts> e defina seu valor para verdadeiro, como no exemplo de código a seguir.

    <webParts enableExport="true" />

  5. Salve e feche o arquivo Web.config.

Para preparar uma página da Web para hospedar controles Web Parts

  1. Criar um controle de usuário permitirá aos usuários alternar entre os modos de exibição dos Web Parts disponíveis na página da Web.Esse controle e a próxima etapa não são necessários para executar o controle Web Parts com dados vinculados, mas esse é um recurso que é útil em várias páginas Web Parts.Em um editor, cole o código a seguir para o controle de usuário e salve o arquivo na pasta raiz com o nome Displaymodemenucs.ascx ou Displaymodemenuvb.ascx (dependendo de qual linguagem você estiver usando) do seu aplicativo da Web.

    <!-- This user control recognizes what display modes are possible 
on a page, given the zones that are present, and enables users to 
switch among the display modes. -->
<%@ control language="vb" classname="DisplayModeMenuVB"%>

<script >

' Use a field to reference the current WebPartManager.
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 dropdown 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 + " Mode", modeName)
            DisplayModeDropdown.Items.Add(item)
        End If
    Next mode

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 


Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs) 
    DisplayModeDropdown.SelectedValue = _manager.DisplayMode.Name

End Sub 

</script>
<div>
  <asp:DropDownList ID="DisplayModeDropdown" 

    AutoPostBack="true" 
    OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
</div>

    <!-- This user control recognizes what display modes are possible 
on a page, given the zones that are present, and enables users to 
switch among the display modes. -->
<%@ control language="C#" classname="DisplayModeMenuCS"%>

<script >

 // Use a field to reference the current WebPartManager.
  WebPartManager _manager;

  void Page_Init(object sender, EventArgs e)
  {
    Page.InitComplete += new EventHandler(InitComplete);
  }  

  void InitComplete(object sender, System.EventArgs e)
  {
    _manager = WebPartManager.GetCurrentWebPartManager(Page);

    String browseModeName = WebPartManager.BrowseDisplayMode.Name;

    // Fill the dropdown with the names of supported display modes.
    foreach (WebPartDisplayMode mode in _manager.SupportedDisplayModes)
    {
      String modeName = mode.Name;
      // Make sure a mode is enabled before adding it.
      if (mode.IsEnabled(_manager))
      {
        ListItem item = new ListItem(modeName + " Mode", modeName);
        DisplayModeDropdown.Items.Add(item);
      }
    }

  }

  // 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;

  }

  void Page_PreRender(object sender, EventArgs e)
  {
    DisplayModeDropdown.SelectedValue = _manager.DisplayMode.Name;
  }

</script>
<div>
  <asp:DropDownList ID="DisplayModeDropdown" 

    AutoPostBack="true" 
    OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
</div>

  2. Crie uma nova página ASP.NET para hospedar o controle WebPart personalizado e os outros controles.Adicione uma diretiva Register à página, logo abaixo da diretiva Page para registrar o controle de usuário recém-criado.O conteúdo da diretiva depende da linguagem que você estiver usando e deve ser como o exemplo a seguir.

    [Visual Basic]

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

    [C#]

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

  3. Agora adicione uma diretiva Register para o controle WebPart personalizado.Como este tópico usa compilação dinâmica, você não precisa adicionar um atributo Assembly para a diretiva.Logo abaixo da diretiva anterior no arquivo, adicione outra diretiva Register, atribua uma sequência arbitrária para o atributo tagprefix e atribua o namespace do controle personalizado para o atributo namespace, novamente dependendo do idioma que seja usado, como no exemplo a seguir.

    [Visual Basic]

    <%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.VB.Controls" %>

    <%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.CS.Controls" %>

  4. Adicione um elemento <asp:webpartmanager> na página, apenas dentro do elemento <form>, conforme mostrado no exemplo a seguir.Um controle WebPartManager é necessário em cada página que use Web Parts.

    <asp:webpartmanager id="WebPartManager1" >
</asp:webpartmanager>

  5. Declare o controle de usuário para alternar entre modos de exibição, logo após o elemento <asp:webpartmanager>.Como você declara o controle depende de qual linguagem está usando, como o exemplo de código a seguir.

    [Visual Basic]

    <uc1:displaymodevb id="Displaymodevb1"  />

    <uc1:displaymodecs id="Displaymodecs1"  />

  6. Após o controle de usuário, adicionar uma tabela com uma linha e duas colunas para estruturar o layout dos controles na página.A marcação da tabela deve ter a aparência do exemplo de código a seguir.

    <table style="width: 80%; position: relative">
  <tr valign="top">
    <td style="width: 40%">
    </td>
    <td style="width: 40%">
    </td>
  </tr>
</table>

  7. Em cada conjunto de marcas <td>, adicione um elemento <asp:webpartzone>.Uma zona que é derivada da classe WebPartZoneBase é necessária para conter controles WebPart e ativá-las para se ter total funcionalidade de Web Parts.A marcação para a primeira zona deve ter a aparência do exemplo de código a seguir.

    <asp:webpartzone id="WebPartZone1"  
  style="position: relative" >
  <parttitlestyle font-size="14" font-names="Verdana" />
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

    A marcação para a zona segundo deve parecer com a seguinte.

    <asp:webpartzone id="WebPartZone2"  
  style="position: relative" >
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

  8. Declare o controle WebPart personalizado vinculado a dados na primeira zona, entre as marcas <zonetemplate>, como mostrado na exemplo de código a seguir.Observe que a marcação usa o prefixo de marca definido na diretiva Register para o controle, bem como o nome da classe para o controle personalizado.Também observe que uma propriedade personalizada definida no controle--ConnectionString- -aparece como um atributo com o sequência de conexão do arquivo Web.config atribuído a ele.Essa abordagem permite que os desenvolvedores de página determinem qual sequência de conexão será usada para o controle.A marcação deve ter esta aparência.

    <aspSample:SmallGridWebPart id="grid1"  
  title="Customer Phone List" width="300" 
  connectionstring="<%$ ConnectionStrings:nwind %>"   />

  9. Para fins de comparação, declare um controle de servidor de calendário na segunda zona, entre as marcas <zonetemplate>.Devido ao fato de você colocar o controle em um controle WebPartZone, ele irá se comportar como um controle WebPart em tempo de execução.Para obter detalhes sobre o uso de controles de servidor em aplicativos de Web Parts, consulte Usando controles do servidor ASP.NET em aplicativos Web Parts.A marcação deve ter aparência do exemplo de código a seguir.

    <asp:calendar id="Calendar1"  
  style="position: relative"></asp:calendar>

  10. Salve e feche a página.Agora você está pronto para executar a página e testar o controle WebPart personalizado.A código completo para a página deve ter a aparência do exemplo de código a seguir.

    <%@ Page Language="VB" %>
<!-- Register the user control to change display modes. -->
<%@ register src="displaymodevb.ascx" tagname="displaymodevb" 
    tagprefix="uc1" %>
<!-- Register the namespace that contains the custom WebPart 
control. Note there is no assembly attribute because this example 
uses dynamic compilation, by placing the source file for the 
control in an App_Code subfolder. -->
<%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.VB.Controls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
      <asp:webpartmanager id="WebPartManager1" >
      </asp:webpartmanager>
      <uc1:displaymodevb id="Displaymodevb1"  />
      <br />
      <table style="width: 80%; position: relative">
        <tr valign="top">
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone1"  
              style="position: relative" >
              <parttitlestyle font-size="14" font-names="Verdana" />
              <zonetemplate>
                <aspSample:SmallGridWebPart id="grid1"  
                  title="Customer Phone List" width="300" 
                  connectionstring="<%$ ConnectionStrings:nwind %>"  
                  />
              </zonetemplate>
            </asp:webpartzone>
          </td>
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone2"  
              style="position: relative">
              <zonetemplate>
                <asp:calendar id="Calendar1"  
                  style="position: relative"></asp:calendar>
              </zonetemplate>
            </asp:webpartzone>
          </td>
        </tr>
      </table>
    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>
<!-- Register the user control to change display modes. -->
<%@ register src="displaymodecs.ascx" tagname="displaymodecs" 
    tagprefix="uc1" %>
<!-- Register the namespace that contains the custom WebPart 
control. Note there is no assembly attribute because this example 
uses dynamic compilation, by placing the source file for the 
control in an App_Code subfolder. -->
<%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.CS.Controls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
      <asp:webpartmanager id="WebPartManager1" >
      </asp:webpartmanager>
      <uc1:displaymodecs id="Displaymodecs1"  />
      <br />
      <table style="width: 80%; position: relative">
        <tr valign="top">
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone1"  
              style="position: relative" >
              <parttitlestyle font-size="14" font-names="Verdana, Arial" />
              <zonetemplate>
                <aspSample:SmallGridWebPart id="grid1"  
                  title="Customer Phone List" width="300" 
                  connectionstring="<%$ ConnectionStrings:nwind %>"  
                  />
              </zonetemplate>
            </asp:webpartzone>
          </td>
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone2"  
              style="position: relative">
              <zonetemplate>
                <asp:calendar id="Calendar1"  
                  style="position: relative"></asp:calendar>
              </zonetemplate>
            </asp:webpartzone>
          </td>
        </tr>
      </table>
    </div>
    </form>
</body>
</html>

Consulte também

Conceitos

Criando um Controle Web Parts Vinculado a Dados

Exemplo do Controle Web Parts com Dados Vinculados