Condividi tramite

Procedura: considerare un controllo utente come controllo Web part

  • Articolo

Aggiornamento: novembre 2007

L'insieme dei controlli Web part ASP.NET consente di utilizzare i controlli server Web esistenti come controlli Web part per ottimizzare il riutilizzo del codice e usufruire dei vantaggi offerti dalla personalizzazione di Web part. I controlli utente sono uno dei tipi di controlli server che possono essere utilizzati come controlli Web part. In questo argomento viene descritto come considerare un controllo utente esistente come controllo Web part.

Nota:

Ai fini dell'esecuzione della procedura, è necessario disporre di un sito Web ASP.NET in grado di identificare i singoli utenti. Se è già stato configurato un sito con tali caratteristiche, utilizzarlo. In caso contrario, per informazioni dettagliate sulla creazione di una directory virtuale, vedere Procedura: creare e configurare directory virtuali in IIS 5.0 e 6.0. È inoltre necessario disporre di un controllo utente che supporta la personalizzazione di Web part. Se non si dispone di un controllo utente di questo tipo, ne è disponibile uno di esempio nella sezione Codice.

Quando si utilizza un controllo utente in un'applicazione Web part, il controllo presenta tutte le funzionalità di un controllo WebPart in fase di esecuzione. Per informazioni dettagliate, vedere Utilizzo di controlli server ASP.NET in applicazioni Web part. Il controllo utente conserva inoltre le proprie funzionalità di controllo server eccetto la memorizzazione dell'output nella cache, che viene disattivata nei controlli utente utilizzati in applicazioni Web part. L'insieme di controlli Web part richiede che tutti i controlli vengano aggiunti alla struttura dei controlli per ciascuna richiesta di pagina al fine di garantire il funzionamento della personalizzazione e consentire la trasmissione dei dati di personalizzazione dai e ai controlli. Tuttavia, se la memorizzazione dell'output nella cache è attivata per un controllo utente, il controllo non viene aggiunto alla struttura dei controlli per evitare interferenze con le funzionalità Web part. Per questo motivo la memorizzazione dell'output nella cache viene disattivata in fase di progettazione per i controlli utente nelle applicazioni Web part.

Per creare una pagina Web part che contenga il controllo utente

  1. Creare una nuova pagina ASP.NET. Aggiungere la seguente dichiarazione all'inizio della pagina.

    <@page language="VB" %>

    <@page language="C#" %>

  2. Sotto la dichiarazione di pagina aggiungere la seguente struttura di pagina di base con tag HTML.

    <html>
<head>
  <title>Web Parts Demo Page</title>
</head>
<body>
  <h1>Web Parts User Control Demonstration</h1>
  <form >
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td valign="top">
      </td>
      <td valign="top">
      </td>
      <td valign="top">
      </td>
    </tr>
  </table>
  </form>
</body>
</html>

  3. Salvare la pagina in una directory nel sito abilitato per la personalizzazione.

Per aggiungere controlli Web part alla pagina

  1. Sotto l'elemento <form> della pagina aggiungere un controllo WebPartManager.

    <asp:webpartmanager id="WebPartManager1"  />

  2. Sotto l'elemento <asp:webpartmanager> e all'interno del primo insieme di tag <td> della tabella (prima colonna della tabella) aggiungere un controllo WebPartZone che conterrà il controllo utente aggiunto successivamente.

    <asp:webpartzone id="SideBarZone"  
  headertext="Sidebar Zone">
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

  3. Nell'ambito dell'elemento <zonetemplate> dell'area appena aggiunta inserire un controllo server esistente e del contenuto statico che verrà considerato come un altro controllo Web part (poiché si trova all'interno di un'area Web part) in fase di esecuzione:

    <asp:label  id="linksPart" title="My Links">
  <a href="www.asp.net">ASP.NET site</a> 
  <br />
  <a href="www.gotdotnet.com">GotDotNet</a> 
  <br />
  <a href="www.contoso.com">Contoso.com</a> 
  <br />
</asp:label>

  4. All'interno del secondo insieme di tag <td> della tabella (seconda colonna della tabella) aggiungere un altro controllo WebPartZone che conterrà il controllo utente aggiunto successivamente.

    <asp:webpartzone id="MainZone"  
  headertext="Main Zone">
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

  5. All'interno del terzo elemento <td> della tabella (terza colonna) aggiungere un elemento <asp:editorzone>. Aggiungere un elemento <zonetemplate>, quindi un elemento <asp:appearanceeditorpart> e un elemento <asp:layouteditorpart>. Il codice nell'area dell'editor sarà analogo al seguente:

    <asp:editorzone id="EditorZone1" >
  <zonetemplate>
    <asp:appearanceeditorpart  
      id="AppearanceEditorPart1" />
    <asp:layouteditorpart  
      id="LayoutEditorPart1" />
  </zonetemplate>
</asp:editorzone>

  6. Salvare la pagina.

Per creare un controllo utente

  1. Creare un nuovo file nell'editor di testo. Il file conterrà un controllo utente che potrà essere aggiunto alla pagina come controllo Web part.

    Nota:

    Il controllo di ricerca di questa procedura dettagliata non implementa l'effettiva funzionalità di ricerca, in quanto viene utilizzato solo per illustrare le funzionalità Web part.

  2. All'inizio del nuovo file aggiungere una dichiarazione di controllo come illustrato nell'esempio riportato di seguito.

    <%@ control language="VB" classname="SearchUserControl" %>

    <%@ control language="C#" classname="SearchUserControl" %>

  3. Sotto la dichiarazione del controllo, aggiungere una coppia di tag <script> e inserire all'interno degli stessi del codice che crea una proprietà personalizzabile. La proprietà ResultsPerPage dispone di un attributo Personalizable e consente agli utenti del controllo di personalizzare il numero di risultati di ricerca da restituire per pagina, purché sia stato fornito un controllo di modifica con l'interfaccia utente per consentire la modifica dell'impostazione in visualizzazione Progettazione. Il codice relativo al controllo sarà analogo a quello riportato nell'esempio seguente.

    <%@ control language="VB" classname="SearchUserControl" %>
<script >
  Private results As Integer

  <Personalizable()> _
  Property ResultsPerPage() As Integer

    Get
      Return results
    End Get

    Set(ByVal value As Integer)
      results = value
    End Set

  End Property
</script>

    <%@ control language="C#" classname="SearchUserControl" %>
<script >
  private int results;

  [Personalizable]
  public int ResultsPerPage
  {
    get
      {return results;}

    set
      {results = value;}
  }    
</script>

  4. Aggiungere una casella di testo e un pulsante sotto l'elemento <script> per fornire l'interfaccia utente di base per un controllo di ricerca, come illustrato nell'esempio di codice riportato di seguito.

    <asp:textbox  id="inputBox"></asp:textbox>
<br />
<asp:button  id="searchButton" text="Search" />

  5. Denominare il file SearchUserControlVB.ascx o SearchUserControlCS.ascx (a seconda del linguaggio utilizzato) e salvarlo nella stessa directory della pagina WebPartsDemo.aspx.

    Nota sulla sicurezza:

    Il controllo include una casella di testo che accetta l'input dell'utente e rappresenta quindi una potenziale minaccia alla protezione. L'input dell'utente in una pagina Web potrebbe infatti contenere script client dannosi. Per impostazione predefinita, le pagine Web ASP.NET verificano che l'input dell'utente non includa script o elementi HTML. Se questa convalida è attivata, non occorrerà effettuare un controllo esplicito per escludere che l'input utente contenga script o elementi HTML. Per ulteriori informazioni, vedere Cenni preliminari sugli attacchi tramite script.

Per fare riferimento al controllo utente all'interno dell'area Web part principale

  1. All'inizio della pagina Web, subito sotto la dichiarazione di pagina, aggiungere la seguente dichiarazione per fare riferimento al controllo utente appena creato. Se non si utilizza l'esempio di controllo utente fornito in questo argomento, è necessario impostare l'attributo src sul percorso e sul nome file del controllo utente utilizzato e può essere opportuno assegnare un valore diverso all'attributo tagname.

    [VB]

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

    [C#]

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

  2. Nell'elemento <zonetemplate> dell'area principale, fare riferimento al controllo utente creato in precedenza.

    <uc1:SearchUserControl id="searchPart" 
  title="Search" />

  3. Salvare e chiudere la pagina.

Esempio

Nell'esempio di codice riportato di seguito viene fornito il listato di codice completo della pagina Web part di esempio utilizzata per contenere il controllo utente. Viene fornito inoltre il codice per il controllo utente di esempio a cui si fa riferimento nella pagina come controllo Web part. Per essere considerato come un effettivo controllo Web part in grado di supportare la personalizzazione, il controllo deve esporre una proprietà pubblica mediante l'attributo [Personalizable] nel codice.

<!-- Web Parts page to host the user control -->
<%@ page language="VB" %>
<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrol.ascx" %>

<html>
<head>
  <title>Web Parts Demo Page</title>
</head>
<body>
  <h1>Web Parts User Control Demonstration</h1>
  <form  id="form1">
  <asp:webpartmanager id="WebPartManager1"  />
  <asp:webpartpagemenu
    id="pagemenu1"
    
    Mode="Menu"
    MenuStyle-BorderWidth="1">
    <browsemodeverb text="Browse" />
    <designmodeverb text="Design" />
    <editmodeverb text="Edit" />
  </asp:webpartpagemenu>
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td valign="top">
        <asp:webpartzone id="SideBarZone"  
          headertext="Sidebar Zone">
          <zonetemplate>
            <asp:label  id="linksPart" title="My Links">
              <a href="www.asp.net">ASP.NET site</a> 
              <br />
              <a href="www.gotdotnet.com">GotDotNet</a> 
              <br />
              <a href="www.contoso.com">Contoso.com</a> 
              <br />
            </asp:label>
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <td valign="top">
        <asp:webpartzone id="MainZone"  
          headertext="Main Zone">
          <zonetemplate>
            <uc1:SearchUserControl id="searchPart" 
              title="Search" />
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <td valign="top">
        <asp:editorzone id="EditorZone1" >
          <zonetemplate>
            <asp:appearanceeditorpart  
              id="AppearanceEditorPart1" />
            <asp:layouteditorpart  
              id="LayoutEditorPart1" />
          </zonetemplate>
        </asp:editorzone>
      </td>
    </tr>
  </table>
  </form>
</body>
</html>


<!-- Web Parts user control -->
<%@ control language="VB" classname="SearchUserControl" %>
<script >
  Private results As Integer
  
  <Personalizable()> _
  Property ResultsPerPage() As Integer
    
    Get
      Return results
    End Get
    
    Set(ByVal value As Integer)
      results = value
    End Set
    
  End Property
</script>
<asp:textbox  id="inputBox"></asp:textbox>
<br />
<asp:button  id="searchButton" text="Search" />

<!-- Web Parts page to host the user control -->
<%@ page language="C#" %>
<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrol.ascx" %>

<html>
<head>
  <title>Web Parts Demo Page</title>
</head>
<body>
  <h1>Web Parts User Control Demonstration</h1>
  <form  id="form1">
  <asp:webpartmanager id="WebPartManager1"  />
  <asp:webpartpagemenu
    id="pagemenu1"
    
    Mode="Menu"
    MenuStyle-BorderWidth="1">
    <browsemodeverb text="Browse" />
    <designmodeverb text="Design" />
    <editmodeverb text="Edit" />
  </asp:webpartpagemenu>
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td valign="top">
        <asp:webpartzone id="SideBarZone"  
          headertext="Sidebar Zone">
          <zonetemplate>
            <asp:label  id="linksPart" title="My Links">
              <a href="www.asp.net">ASP.NET site</a> 
              <br />
              <a href="www.gotdotnet.com">GotDotNet</a> 
              <br />
              <a href="www.contoso.com">Contoso.com</a> 
              <br />
            </asp:label>
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <td valign="top">
        <asp:webpartzone id="MainZone"  
          headertext="Main Zone">
          <zonetemplate>
            <uc1:SearchUserControl id="searchPart" 
              title="Search" />
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <td valign="top">
        <asp:editorzone id="EditorZone1" >
          <zonetemplate>
            <asp:appearanceeditorpart  
              id="AppearanceEditorPart1" />
            <asp:layouteditorpart  
              id="LayoutEditorPart1" />
          </zonetemplate>
        </asp:editorzone>
      </td>
    </tr>
  </table>
  </form>
</body>
</html>


<!-- Web Parts user control -->
<%@ control language="C#" classname="SearchUserControl" %>
<script >
  private int results;
  
  [Personalizable]
  public int ResultsPerPage
  {
    get
      {return results;}
    
    set
      {results = value;}
  }    
</script>
<asp:textbox  id="inputBox"></asp:textbox>
<br />
<asp:button  id="searchButton" text="Search" />

Se si esegue il codice di esempio e si sceglie il menu Display Mode, è possibile alternare le diverse modalità di visualizzazione della pagina: Browse, Design ed Edit. In modalità Design è possibile modificare il layout della pagina facendo clic sull'intestazione dei due controlli Web part e trascinandoli in altre aree. In modalità Edit è possibile selezionare l'immagine di modifica nell'intestazione di uno dei controlli Web part e impostare varie proprietà dell'interfaccia utente per quel controllo.

Vedere anche

Attività

Procedura dettagliata: creazione di una pagina Web part

Concetti

Cenni preliminari su Web part ASP.NET

Utilizzo di controlli server ASP.NET in applicazioni Web part