Condividi tramite


Procedura: generare ed eseguire l'esempio di controllo Web part con associazione ai dati

Aggiornamento: novembre 2007

In questo argomento sono riportate le istruzioni per la generazione e l'esecuzione del controllo WebPart con associazione ai dati, per cui viene fornito un esempio di codice completo nell'argomento Esempio di controllo Web part con associazione ai dati. Nell'esempio di codice riportato di seguito viene illustrato come creare un controllo server personalizzato che associa un controllo GridView a un'origine dati, ma che eredita anche dalla classe WebPart in modo da potere partecipare alle applicazioni Web part. In questo argomento vengono fornite le informazioni correlate necessarie per compilare l'esempio di codice e configurare un'applicazione Web ASP.NET per eseguire il controllo come controllo Web part.

Compilazione del controllo Web part

Per l'esecuzione dell'esempio di codice è necessario compilare il codice sorgente riportato. È possibile effettuare la compilazione in modo esplicito e inserire l'assembly risultante nella cartella Bin o Global Assembly Cache. In alternativa, è possibile inserire il codice sorgente nella cartella App_Code del proprio sito, dove verrà compilato dinamicamente in fase di esecuzione. Questo esempio di codice utilizza la compilazione dinamica. Per una procedura dettagliata della compilazione, vedere Procedura dettagliata: sviluppo e utilizzo di un controllo server personalizzato.

Per compilare dinamicamente il controllo Web part con associazione ai dati

  1. Nella cartella principale dell'applicazione Web creare la cartella App_Code.

  2. Ottenere il codice sorgente per il controllo WebPart con associazione ai dati personalizzato dall'argomento Esempio di controllo Web part con associazione ai dati. Inserire il file del codice sorgente nella cartella App_Code. Il nome del file è irrilevante in quanto si utilizza la compilazione dinamica, ma l'estensione deve essere appropriata per il linguaggio utilizzato (ad esempio CS o VB).

Utilizzo del controllo in un'applicazione Web part

Per configurare un'applicazione per l'utilizzo di Web part, è sufficiente disporre di un sito Web ASP.NET in grado di autenticare singoli utenti e di un database abilitato per la gestione dei servizi dell'applicazione, tra cui la personalizzazione. In questo esempio, che utilizza un controllo con associazione ai dati, è inoltre necessario creare una stringa di connessione nel file Web.config che consente all'origine dati di connettersi al database di esempio Northwind. Dopo avere configurato l'applicazione, in ogni applicazione Web part è necessario aggiungere un controllo WebPartManager e almeno un controllo WebPartZone in ciascuna pagina Web che esegue l'hosting del controllo WebPart e dei controlli server nell'applicazione Web part. Nella seconda procedura riportata di seguito viene illustrato come aggiungere questi controlli e come eseguire le altre operazioni necessarie per preparare la pagina per l'esecuzione del controllo con associazione ai dati.

Per configurare un'applicazione ASP.NET per l'esecuzione di controlli Web part

  1. Assicurarsi di disporre di un'applicazione Web ASP.NET configurata per il riconoscimento dei singoli utenti. Per informazioni su come creare tale sito, vedere Procedura: creare e configurare directory virtuali in IIS 5.0 e 6.0 o Procedura: creare e configurare siti Web ASP.NET locali in IIS 6.0.

  2. Assicurarsi di disporre di un provider di personalizzazioni e di un database configurati. La personalizzazione di Web part è attivata per impostazione predefinita e utilizza il provider di personalizzazioni SQL (SqlPersonalizationProvider) con Microsoft SQL Server Express (SSE) per la memorizzazione dei dati di personalizzazione. In questo argomento vengono utilizzati SSE e il provider SQL predefinito. Se SSE è già installato non è necessaria alcuna configurazione. SSE è disponibile con Microsoft Visual Studio 2005 come parte facoltativa dell'installazione oppure può essere scaricato gratuitamente dal sito Microsoft.com. Per utilizzare una delle versioni complete di Microsoft SQL Server, è necessario installare e configurare un database dei servizi dell'applicazione ASP.NET e configurare il provider di personalizzazioni SQL per la connessione a tale database. Per informazioni dettagliate, vedere Creazione e configurazione del database dei servizi dell'applicazione per SQL Server. È inoltre possibile creare e configurare un provider personalizzato da utilizzare con altri database o soluzioni di memorizzazione non basati su SQL. Per informazioni dettagliate e il codice di esempio, vedere Implementazione di un provider di appartenenze.

  3. Creare una stringa di connessione in modo che il controllo con associazione ai dati possa connettersi al database Northwind di esempio. Per eseguire l'esempio, è necessario accedere al database Northwind di esempio fornito con SQL Server. Se non è installato il database di esempio Northwind, è possibile scaricare script per creare e installare il database dall'Area download Microsoft.

    Un approccio consigliato per le stringhe di connessione consiste nell'inserirle nel file Web.config per l'applicazione. Per ulteriori informazioni sui file di configurazione, vedere File di configurazione ASP.NET. Nell'esempio di codice seguente viene illustrata una stringa di connessione nel file Web.config che si connette a un'istanza locale di Northwind in esecuzione su SSE. Si tenga presente che le virgolette singole ('), che normalmente delimiterebbero il percorso del file di database, vengono sottoposte al rendering come entità ("), perché Web.config è un file 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>
    
    Nota:

    Si consiglia di crittografare le informazioni importanti, ad esempio una password contenuta in una stringa di connessione. Per informazioni dettagliate sulla crittografia dei dati di configurazione, vedere Procedura dettagliata: crittografia delle informazioni di configurazione utilizzando la configurazione protetta.

  4. Nella sezione <system.web> del file Web.config aggiungere un elemento <webparts>. Ciò non è necessario per tutte le applicazioni Web part, ma certe funzioni di queste applicazioni devono essere configurate in questa sezione se si desidera utilizzarle. Il controllo WebPart con associazione ai dati di esempio è abilitato per l'esportazione di un file di configurazione contenente i dati dello stato e delle proprietà. Poiché la funzione di esportazione è disattivata per impostazione predefinita nelle applicazioni Web part, è necessario attivarla nella sezione <webParts>. Aggiungere un attributo enabledExport all'elemento <webParts> e impostarne il valore su true, come illustrato nell'esempio di codice riportato di seguito.

    <webParts enableExport="true" />
    
  5. Salvare e chiudere il file Web.config.

Per preparare una pagina Web a contenere controlli Web part

  1. Creare un controllo utente che consenta di alternare le modalità di visualizzazione di Web part disponibili sulla pagina Web. Questo controllo e il passaggio successivo non sono necessari per eseguire il controllo Web part con associazione ai dati, ma si tratta di una funzione utile su molte pagine Web part. In un editor incollare il seguente codice per il controllo utente e salvare il file nella cartella principale dell'applicazione Web con il nome Displaymodemenucs.ascx o Displaymodemenuvb.ascx (a seconda del linguaggio utilizzato).

    <!-- 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. Creare una nuova pagina ASP.NET per contenere il controllo WebPart personalizzato e gli altri controlli. Aggiungere una direttiva Register nella pagina, sotto la direttiva Page, per registrare il controllo utente appena creato. Il contenuto della direttiva dipende dal linguaggio utilizzato e sarà analoga all'esempio seguente:

    [Visual Basic]

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

    [C#]

    <%@ register src="displaymodecs.ascx" tagname="displaymodecs" 
        tagprefix="uc1" %>
    
  3. A questo punto aggiungere una direttiva Register per il controllo WebPart personalizzato. Poiché in questo argomento viene utilizzata la compilazione dinamica, non è necessario aggiungere un attributo Assembly nella direttiva. Sotto la direttiva precedente nel file aggiungere un'altra direttiva Register, assegnare una stringa arbitraria all'attributo tagprefix corrispondente e assegnare lo spazio dei nomi del controllo personalizzato all'attributo namespace, sempre a seconda del linguaggio utilizzato, come nell'esempio riportato di seguito.

    [Visual Basic]

    <%@ register tagprefix="aspSample" 
        namespace="Samples.AspNet.VB.Controls" %>
    
    <%@ register tagprefix="aspSample" 
        namespace="Samples.AspNet.CS.Controls" %>
    
  4. Aggiungere un elemento <asp:webpartmanager> alla pagina, nell'elemento <form>, come illustrato nell'esempio di codice riportato di seguito. Il controllo WebPartManager è necessario in ogni pagina che utilizza Web part.

    <asp:webpartmanager id="WebPartManager1" >
    </asp:webpartmanager>
    
  5. Dichiarare il controllo utente per l'alternanza delle modalità di visualizzazione, dopo l'elemento <asp:webpartmanager>. La modalità di dichiarazione del controllo dipende dal linguaggio utilizzato, come nell'esempio di codice riportato di seguito.

    [Visual Basic]

    <uc1:displaymodevb id="Displaymodevb1"  />
    
    <uc1:displaymodecs id="Displaymodecs1"  />
    
  6. Dopo il controllo utente aggiungere una tabella con una riga e due colonne per strutturare il layout dei controlli sulla pagina. Il codice della tabella dovrebbe essere analogo al seguente:

    <table style="width: 80%; position: relative">
      <tr valign="top">
        <td style="width: 40%">
        </td>
        <td style="width: 40%">
        </td>
      </tr>
    </table>
    
  7. In ciascuna coppia di tag <td> aggiungere un elemento <asp:webpartzone>. È necessaria un'area derivante dalla classe WebPartZoneBase per contenere i controlli WebPart e consentire loro di disporre di tutte le funzionalità Web part. Il codice per la prima area dovrebbe essere analogo al seguente:

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

    Il codice per la seconda area dovrebbe essere analogo al seguente:

    <asp:webpartzone id="WebPartZone2"  
      style="position: relative" >
      <zonetemplate>
      </zonetemplate>
    </asp:webpartzone>
    
  8. Dichiarare il controllo WebPart con associazione ai dati personalizzato nella prima area, tra i tag <zonetemplate>, come illustrato nell'esempio di codice riportato di seguito. Nel codice viene utilizzato il prefisso del tag definito nella direttiva Register per il controllo, nonché il nome della classe per il controllo personalizzato. Inoltre una proprietà personalizzata definita nel controllo, ConnectionString, viene visualizzata sotto forma di attributo a cui è assegnata la stringa di connessione del file Web.config. In questo modo gli sviluppatori di pagine possono determinare la stringa di connessione da utilizzare per il controllo. Il codice sarà analogo al seguente:

    <aspSample:SmallGridWebPart id="grid1"  
      title="Customer Phone List" width="300" 
      connectionstring="<%$ ConnectionStrings:nwind %>"   />
    
  9. Per fare un confronto, dichiarare un controllo server di calendario standard nella seconda area, tra i tag <zonetemplate>. Poiché si inserisce il controllo in un controllo WebPartZone, questo si comporta come un controllo WebPart in fase di esecuzione. Per informazioni dettagliate sull'utilizzo dei controlli server nelle applicazioni Web part, vedere Utilizzo di controlli server ASP.NET in applicazioni Web part. Il codice dovrebbe essere analogo al seguente:

    <asp:calendar id="Calendar1"  
      style="position: relative"></asp:calendar>
    
  10. Salvare e chiudere la pagina. È ora possibile eseguire la pagina ed eseguire il test del controllo WebPart personalizzato. Il codice completato per la pagina sarà essere analogo a quello riportato di seguito.

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

Vedere anche

Concetti

Creazione di un controllo Web part con associazione ai dati

Esempio di controllo Web part con associazione ai dati