Condividi tramite

Procedura dettagliata: creazione di elementi riutilizzabili con controlli utente ASP.NET

  • Articolo

Aggiornamento: novembre 2007

I controlli utente ASP.NET consentono di incapsulare le funzionalità di più controlli server in un'unità. I controlli utente sono composti da uno o più controlli server ASP.NET, i controlli Button, i controlli TextBox e così via, insieme ai codici richiesti per l'esecuzione, da parte dei controlli, della funzione che si desidera eseguire. Inoltre, nel controllo utente è possibile includere proprietà o metodi personalizzati che consentono di visualizzare la funzionalità del controllo utente in un contenitore, rappresentato in genere da una pagina ASP.NET.

In questa procedura dettagliata, verrà creato un controllo utente ASP.NET che funziona da controllo selezione. Nel controllo di selezione sono presenti due elenchi, con un insieme di opzioni in un elenco (l'origine). È possibile selezionare gli elementi nell'elenco SourceList e, successivamente, aggiungerli all'elenco TargetList.

Questa procedura dettagliata si compone di tre parti, come indicato di seguito.

  • Nella prima parte, sarà creato il controllo utente di base, aggiungendo i controlli e il codice.

  • Nella seconda parte, sarà creata una nuova pagina ASP.NET (la pagina host) e, successivamente, il controllo utente verrà aggiunto alla pagina ASP.NET.

  • Nella terza parte, al controllo utente saranno aggiunte proprietà e metodi personalizzati per consentire l'interazione con il controllo dalla pagina host.

Di seguito sono elencate le attività illustrate nella procedura dettagliata:

  • Creazione di un controllo utente e aggiunta di controlli server ASP.NET al controllo utente.

  • Creazione di proprietà e di un metodo nel controllo utente.

  • Aggiunta di un controllo utente a una pagina host.

  • Aggiunta di un codice alla pagina host per gestire il controllo utente.

Prerequisiti

Per completare questa procedura dettagliata, è necessario disporre dei seguenti elementi:

  • Strumento di sviluppo Web Microsoft Visual Web Developer.

  • Microsoft .NET Framework.

Per questa procedura dettagliata si presuppone una conoscenza generale dell'utilizzo di Visual Web Developer. Per un'introduzione, vedere Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer.

Creazione del sito Web

Se è già stato creato un sito Web in Visual Web Developer (ad esempio, completando Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer), è possibile utilizzare quel sito Web e passare alla sezione successiva. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla procedura riportata di seguito.

Per creare un sito Web di file system

  1. Aprire Visual Web Developer.

  2. Scegliere Nuovo dal menu File, quindi fare clic su Sito Web.

    Verrà visualizzata la finestra di dialogo Nuovo sito Web.

  3. In Modelli Visual Studio installati, fare clic su Sito Web ASP.NET.

  4. Nella casella Percorso situata più a destra, immettere il nome della cartella in cui salvare le pagine del sito Web.

    Digitare, ad esempio, il nome di cartella C:\WebSites.

  5. Nell'elenco Linguaggio scegliere il linguaggio di programmazione da utilizzare.

  6. Scegliere OK.

    In Visual Web Developer vengono create la cartella e una nuova pagina denominata Default.aspx.

Creazione del controllo utente

La creazione di un controllo utente è simile alla creazione di una pagina Web ASP.NET. In effetti, un controllo utente è un sottoinsieme di pagina ASP.NET, in cui è possibile includere la maggior parte dei tipi di elementi che vengono inseriti in una pagina ASP.NET.

Per creare un controllo utente

  1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiungi nuovo elemento.

  2. Nella finestra di dialogo Aggiungi nuovo elemento <Percorso>, in Modelli Visual Studio installati fare clic su Controllo utente Web.

  3. Nella casella Nome digitare ListPicker.

    Il file del controllo utente dispone di un'estensione ascx, che viene aggiunta in modo automatico a ListPicker.

  4. Nell'elenco Linguaggio selezionare il linguaggio di programmazione da utilizzare.

  5. Scegliere Aggiungi.

    Il nuovo controllo utente viene creato e aperto nella finestra di progettazione. Il markup per il controllo è simile a quello per la pagina, con un'importante eccezione: non è presente alcuna direttiva @ Page nella parte superiore della pagina. Al contrario, è presente una direttiva @ Control, mediante la quale il file ad ASP.NET viene identificato come controllo utente.

Aggiunta di controlli server al controllo utente

In questa parte della procedura dettagliata, saranno aggiunti i controlli mediante i quali creare l'interfaccia utente per il controllo utente.

Per aggiungere controlli server

  1. Passare alla visualizzazione Progettazione. Se si utilizza una pagina code-behind, passare al controllo ListPicker.ascx e, successivamente, alla visualizzazione Progettazione.

  2. Dal menu Tabella, scegliere Inserisci tabella.

  3. Utilizzare la finestra di dialogo Inserisci tabella per creare una tabella con una riga e tre colonne, quindi scegliere OK.

    Con questa procedura si crea la tabella in cui contenere i controlli, vale a dire, una tabella di layout.

  4. Nella colonna sinistra della tabella, digitare Available, quindi premere INVIO per creare una nuova riga.

  5. Nella colonna destra, digitare Selected, quindi premere INVIO per creare una nuova riga.

  6. Dal gruppo Standard nella Casella degli strumenti, trascinare i seguenti controlli nella tabella e impostare le relative proprietà come indicato.

    Controllo

    Proprietà

    Trascinare un controllo ListBox nella colonna sinistra e posizionarlo in Available.

    Height: 200px

    ID: SourceList

    Width: 200px

    Trascinare un controllo Button nella colonna centrale.

    ID: AddAll

    Text: >>

    Trascinare un controllo Button nella colonna centrale.

    ID: AddOne

    Text: (BARRA SPAZIATRICE)>( BARRA SPAZIATRICE)

    Trascinare un controllo Button nella colonna centrale.

    ID: Remove

    Text: (BARRA SPAZIATRICE)X( BARRA SPAZIATRICE)

    Trascinare un controllo ListBox nella colonna destra e posizionarlo in Selected.

    Height: 200px

    ID: TargetList

    Width: 200px

    I controlli ImageButton possono essere utilizzati al posto dei controlli Button, in modo da visualizzare un'immagine che risponde ai clic del mouse. Tuttavia, per questa procedura dettagliata, è sufficiente utilizzare un testo che emuli il tipo di immagine utilizzato in genere per indicare Aggiungi tutto, Aggiungi e Rimuovi che sono rispettivamente: le due parentesi angolari destre (>>), una parentesi angolare destra (>) e la X.

  7. È possibile regolare la larghezza e l'altezza delle colonne della tabella nel modo desiderato.

  8. Fare clic sull'elenco SourceList, quindi in Proprietà, per la proprietà Items, fare clic sul pulsante con i puntini di sospensione (...).

    Viene visualizzata la finestra Editor dell'insieme ListItem.

  9. Fare clic per tre volte su Aggiungi per aggiungere tre elementi.

  10. Per il primo, il secondo e il terzo elemento, in Proprietà ListItem impostare Text rispettivamente su A, B e C.

    Fino a questo punto, si sta procedendo alla creazione dei dati di test. Più avanti nella procedura dettagliata, in "Aggiunta di proprietà e metodi personalizzati al controllo utente", saranno eliminati i dati di test e verrà aggiunto il codice per caricare l'elenco SourceList in modo dinamico.

Aggiunta del codice per la gestione delle selezioni dell'utente

Gli utenti selezioneranno gli elementi utilizzando i pulsanti presenti nella colonna centrale della tabella. Pertanto, la maggior parte del codice del il controllo è contenuta nei gestori per gli eventi Click.

Per aggiungere il codice per la gestione delle selezioni dell'utente

  1. Nella visualizzazione Progettazione, fare doppio clic sul pulsante >> (AddAll) per creare un gestore eventi per l'evento Click e aggiungere il seguente codice evidenziato:

    Protected Sub AddAll_Click(ByVal sender As Object, _
        ByVal e As EventArgs) Handles AddAll.Click
   TargetList.SelectedIndex = -1   Dim li As ListItem   For Each li In SourceList.Items      AddItem(li)   Next
End Sub

    protected void AddAll_Click(object sender, EventArgs e)
{
    TargetList.SelectedIndex = -1;    foreach(ListItem li in SourceList.Items)    {        AddItem(li);    }
}

    Il codice consente di scorrere tutti gli elementi dell'elenco contenuti nell'elenco SourceList. Per ciascun elemento, viene chiamato il metodo AddItem che viene passato all'elemento corrente. Più avanti nella procedura, verrà scritto il codice per il metodo AddItem.

  2. Passare alla visualizzazione Progettazione, fare doppio clic sul pulsante > (AddOne) per creare un gestore eventi per l'evento Click e aggiungere il seguente codice evidenziato:

    Protected Sub AddOne_Click(ByVal sender As Object, _
       ByVal e As EventArgs) Handles AddOne.Click
   If SourceList.SelectedIndex >= 0 Then      AddItem(SourceList.SelectedItem)   End If
End Sub

    protected void AddOne_Click(object sender, EventArgs e)
{
    if(SourceList.SelectedIndex >= 0)    {        AddItem(SourceList.SelectedItem);    }
}

    Questo codice dapprima consente di verificare la presenza di una selezione nell'elenco SourceList.. Se la selezione è presente, il codice consente la chiamata al metodo AddItem, che verrà scritto più avanti nella procedura, e lo passa all'elemento selezionato correntemente nell'elenco SourceList.

  3. Passare alla visualizzazione Progettazione, fare doppio clic sul pulsante X (Remove) per creare un gestore eventi per l'evento Click e aggiungere il seguente codice evidenziato:

    Protected Sub Remove_Click(ByVal sender As Object, _
      ByVal e As EventArgs) Handles Remove.Click
   If TargetList.SelectedIndex >= 0 Then     TargetList.Items.RemoveAt(TargetList.SelectedIndex)     TargetList.SelectedIndex = -1   End If
End Sub

    protected void Remove_Click(object sender, EventArgs e)
{
    if (TargetList.SelectedIndex >= 0)    {        TargetList.Items.RemoveAt(TargetList.SelectedIndex);        TargetList.SelectedIndex = -1;      }
}

    Il primo codice consente di verificare che nell'elenco TargetList sia presente una selezione. Se la selezione è presente, il codice consente la rimozione dell'elemento e della selezione dall'elenco.

  4. Aggiungere il seguente metodo AddItem:

    Protected Sub AddItem(ByVal li As ListItem)
   TargetList.SelectedIndex = -1
   TargetList.Items.Add(li)
End Sub

    protected void AddItem(ListItem li)
{
    TargetList.SelectedIndex = -1;
    TargetList.Items.Add(li);
}

    Questo codice consente di aggiungere un elemento all'elenco TargetList in modo non condizionale. Più avanti nella procedura dettagliata, in "Aggiunta di proprietà e metodi personalizzati al controllo utente", questo codice verrà migliorato mediante l'aggiunta dell'opzione per determinare la presenza di duplicati.

Non è possibile eseguire direttamente il test di un controllo utente, dal momento che deve essere inserito in una pagina. Nella sezione successiva, verrà creata una pagina Web ASP.NET in cui utilizzare il controllo.

Utilizzo del controllo utente

Come tutti gli altri controlli, un controllo utente deve essere inserito in una pagina. In questa parte della procedura dettagliata, verrà creata una pagina host per il controllo e, successivamente, sarà aggiunto un controllo utente alla pagina.

Per creare una pagina host

  1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiungi nuovo elemento.

  2. In Modelli Visual Studio installati fare clic su Web Form.

  3. Nella casella Nome digitare HostUserControl.

  4. Nell'elenco Linguaggio scegliere il linguaggio di programmazione da utilizzare e fare clic su Aggiungi.

    La nuova pagina viene visualizzata nella finestra di progettazione.

Per aggiungere il controllo utente alla pagina

  1. Passare alla visualizzazione Progettazione.

  2. Da Esplora soluzioni, trascinare il file del controllo utente (ListPicker.ascx) nella pagina.

    Nota:

    Quando si trascina ListPicker.ascx nella pagina, accertarsi di utilizzare la visualizzazione Progettazione.

    Il controllo viene visualizzato nella finestra di progettazione.

  3. Passare alla visualizzazione Origine.

    Il posizionamento del controllo utente nella pagina consente la creazione di due nuovi elementi:

    • Nella parte superiore della pagina è presente una nuova direttiva @ Register simile a quella riportata di seguito:

      <%@ Register Src="ListPicker.ascx" TagName="ListPicker"
   TagPrefix="uc1" %>

      La direttiva @ Register è richiesta dal momento che il controllo utente è un componente esterno. I valori presenti nella direttiva consentono di fornire informazioni necessarie ad ASP:NET per trovare il controllo in fase di compilazione e di elaborazione della pagina. Insieme, gli attributi TagPrefix e TagName consentono di specificare la modalità con cui il controllo utente viene dichiarato nella pagina. Nell'attributo Src viene specificato il file e, se necessario, il percorso, in cui è posizionato il file di origine.

    • Il secondo elemento nuovo è l'elemento per il controllo utente ed è simile a quello riportato di seguito:

      <uc1:ListPicker id="ListPicker1" Runat="server" />

      L'elemento per un controllo utente è simile all'elemento per un controllo server ASP.NET normale. La differenza sta nel fatto che il controllo utente dispone di un prefisso di tag (uc1) diverso e di un nome di tag univoco (ListPicker). Sebbene i valori siano stati stabiliti in modo automatico dalla direttiva @ Register nel momento in cui il controllo utente è stato posizionato nella pagina, è possibile utilizzare qualsiasi prefisso di tag e nome di tag per il controllo utente purché i valori non siano ancora stati già utilizzati nella pagina.

Test del controllo utente

È ora possibile eseguire il test della versione preliminare del controllo utente.

Per eseguire il test del controllo utente

  1. Premere CTRL+F5 per eseguire la pagina.

    Nel browser viene visualizzata la pagina in cui sono presenti due elenchi e tre pulsanti che compongono il controllo utente.

  2. Fare clic sul pulsante >> (AddAll).

    Tutti i valori dell'elenco SourceList vengono copiati nell'elenco TargetList.

  3. Fare clic su ciascun elemento nell'elenco TargetList, quindi fare clic sul pulsante X (Remove) fino a rimuovere tutti gli elementi.

  4. Selezionare un solo valore nell'elenco SourceList, quindi fare clic sul pulsante > (AddOne).

    Il valore viene copiato nell'elenco TargetList.

  5. Se lo si desidera, utilizzare ancora il controllo per accertarsi del corretto funzionamento.

  6. Al termine, chiudere il browser.

Aggiunta di proprietà e metodi personalizzati al controllo utente.

Sebbene il controllo utente funzioni correttamente, non è ancora utile come controllo generico. Una versione più pratica del controllo utente dovrà consentire le seguenti operazioni:

  • Specificare l'elenco di elementi da visualizzare in modo dinamico nell'elenco SourceList.

  • Ottenere l'elenco di elementi selezionati nell'elenco TargetList.

  • Specificare se consentire la duplicazione, facoltativa, dei valori nell'elenco TargetList.

  • Fornire un metodo per cancellare rapidamente tutti gli elementi nell'elenco TargetList.

Per l'esecuzione di queste operazioni si richiede la comunicazione tra la pagina host e il controllo utente per la condivisione di valori (impostazione e lettura delle proprietà) e per l'esecuzione di comandi (chiamata ai metodi). In questa parte della procedura dettagliata, sarà possibile modificare il controllo utente e aggiungervi alcuni membri (proprietà e metodi).

Al controllo utente saranno aggiunte due proprietà. La prima proprietà consente di recuperare l'elenco di elementi contenuti nell'elenco TargetList. La seconda, consente di specificare se nell'elenco TargetList sono accettati valori duplicati. Più avanti nella sezione, sarà aggiunto un metodo che consente di compilare l'elenco SourceList.

Per aggiungere il codice per la definizione delle proprietà personalizzate

  1. Per il controllo ListPicker, aprire o passare al file di codice.

  2. Per creare la proprietà SelectedItems, utilizzare il codice riportato di seguito.

    Public ReadOnly Property SelectedItems() As ListItemCollection
   Get
      Return TargetList.Items
   End Get
End Property

    public ListItemCollection SelectedItems
{
   get { return TargetList.Items ; }
}

    La proprietà SelectedItems recupera i valori contenuti nell'elenco TargetList. Può essere in sola lettura, dal momento che non è necessario impostare i valori nell'elenco TargetList a livello di codice.

  3. Per creare la proprietà AllowDuplicates, utilizzare il codice riportato di seguito.

    Public Property AllowDuplicates() As Boolean
   Get
      Return CType(ViewState("allowDuplicates"), Boolean)
   End Get
   Set(ByVal value As Boolean)
      ViewState("allowDuplicates") = value
   End Set
End Property

    public Boolean AllowDuplicates
{
    get
    {
        return (Boolean)ViewState["allowDuplicates"];
    }
    set
    {
        ViewState["allowDuplicates"] = value;
    }
}

    La proprietà AllowDuplicates è una proprietà in lettura/scrittura. Il valore della proprietà AllowDuplicates deve essere salvato in modo esplicito in stato di visualizzazione per essere mantenuto nei percorsi di andata e ritorno. La proprietà SelectedItems non deve essere salvata in modo esplicito in stato di visualizzazione dal momento che, nell'elenco TargetList, tutti i valori vengono salvati in stato di visualizzazione.

Le proprietà sono state definite. Tuttavia, è ancora necessario modificare il codice esistente nel controllo utente per usufruire dell'impostazione della proprietà AllowDuplicates.

Per modificare il codice esistente per l'utilizzo della proprietà AllowDuplicates.

  • Individuare il metodo AddItem scritto in "Aggiunta del codice per la gestione delle selezioni dell'utente," in precedenza in questa procedura dettagliata, e sostituirne il contenuto con il codice evidenziato riportato di seguito.

    Protected Sub AddItem(ByVal li As ListItem)
   TargetList.Selectedindex = -1   If Me.AllowDuplicates = True Then      TargetList.Items.Add(li)   Else      If TargetList.Items.FindByText(li.Text) Is Nothing Then         TargetList.Items.Add(li)      End If   End If
End Sub

    protected void AddItem(ListItem li)
{
    TargetList.SelectedIndex = -1;    if (this.AllowDuplicates == true)    {        TargetList.Items.Add(li);    }    else    {        if (TargetList.Items.FindByText(li.Text) == null)        {            TargetList.Items.Add(li);        }    }
}

    Il codice consente di eseguire le funzioni precedenti (aggiungendo un elemento all'elenco TargetList), tuttavia, in questo caso, consente di determinare se la proprietà AllowDuplicate è impostata su true. Se la proprietà AllowDuplicate è impostata su true, l'elemento viene aggiunto. Se invece la proprietà AllowDuplicate è impostata su false, il codice avvia la ricerca di un elemento esistente avente un valore uguale a quello del nuovo elemento proposto e quindi, se tale ricerca ha esito negativo, viene aggiunto il nuovo elemento.

Dal momento che il contenuto dell'elenco SourceList sarà impostato utilizzando una proprietà, è possibile rimuovere i dati del test immessi in "Aggiunta di controlli server al controllo utente", in precedenza in questa procedura dettagliata.

Per rimuovere i dati di test per l'elenco SourceList

  1. Passare alla visualizzazione Progettazione.

  2. Fare clic sul controllo SourceList, quindi in Proprietà, per Items, fare clic sul pulsante con i puntini di sospensione (...).

    Viene visualizzato Editor dell'insieme ListItem.

  3. Fare clic sul pulsante Rimuovi per rimuovere ogni elemento di esempio, quindi scegliere OK.

Aggiunta di un metodo al controllo utente

È anche possibile aggiungere metodi per eseguire operazioni nel controllo utente quando si esegue la chiamata ai metodi tramite il codice nella pagina host. Per illustrare questa operazione, in questa procedura dettagliata saranno aggiunti due metodi. Il primo metodo può essere chiamato per aggiungere elementi all'elenco SourceList. Il secondo elemento consente di cancellare il contenuto dell'elenco TargetList.

Per aggiungere un metodo per cancellare l'elenco TargetList.

  1. Per aggiungere il metodo AddSourceItem, utilizzare il codice riportato di seguito.

    Public Sub AddSourceItem(ByVal sourceItem As String)
    SourceList.Items.Add(sourceItem)
End Sub

    public void AddSourceItem(String sourceItem)
{
    SourceList.Items.Add(sourceItem);
}

  2. Per aggiungere il metodo ClearAll, utilizzare il codice riportato di seguito.

    Public Sub ClearAll()
    SourceList.Items.Clear()
    TargetList.Items.Clear()
End Sub

    public void ClearAll()
{
    SourceList.Items.Clear();
    TargetList.Items.Clear();
}

  3. Dal menu File, fare clic su Salva tutto per salvare le modifiche apportate al controllo utente.

Test delle proprietà e del metodo del controllo utente

L'ultima operazione di questa procedura dettagliata consiste nel consentire alla pagina host di condividere i valori con il controllo utente. È possibile impostare in modo dichiarativo alcune delle proprietà per il controllo utente. In questa procedura dettagliata, l'elenco SourceList non può essere impostato in modo diretto utilizzando il codice, ma può essere impostato a livello di codice. In questa procedura, la proprietà AllowDuplicates sarà impostata su un valore predefinito di true.

Per impostare le proprietà del controllo utente in modo dichiarativo

  1. Passare alla pagina HostUserControl.aspx oppure aprire la pagina.

  2. In visualizzazione Origine, impostare AllowDuplicates in modo dichiarativo utilizzando una sintassi simile a quella riportata di seguito.

    <uc1:ListPicker id="ListPicker1" Runat="server"
    AllowDuplicates="true" />

    Notare che si ottiene la funzionalità Microsoft IntelliSense per AllowDuplicates.

Utilizzo del controllo utente a livello di codice

Inoltre, è possibile utilizzare il controllo utente a livello di codice, impostando e recuperando le proprietà ed eseguendo le chiamate ai metodi. Per illustrare come utilizzare il controllo utente a livello di codice, saranno aggiunti alcuni controlli alla pagina host.

Per utilizzare il controllo utente a livello di codice

  1. Passare alla visualizzazione Progettazione.

  2. Dal gruppo Standard della Casella degli strumenti, trascinare i controlli riportati di seguito nella tabella della pagina host, quindi impostare le proprietà come indicato.

    Controllo

    Proprietà

    TextBox

    ID: NewItem

    Text: (empty)

    Button

    ID: AddItem

    Text: Add Item

    Button

    ID: LoadFiles

    Text: File List

    Button

    ID: ClearSelection

    Text: Clear All

    CheckBox

    AutoPostBack: True

    Checked: True

    ID: AllowDuplicates

    Text: Allow duplicates

    Button

    ID: ShowSelection

    Text: Show Selection

    Label

    ID: Selection

    Text: (empty)

  3. Nella visualizzazione Progettazione, fare doppio clic su AllowDuplicates per creare un gestore eventi per l'evento CheckedChanged e aggiungere il seguente codice evidenziato:

    Protected Sub AllowDuplicates_CheckedChanged( _
ByVal sender As Object, _
ByVal e As EventArgs) Handles AllowDuplicates.CheckedChanged
    ListPicker1.AllowDuplicates = AllowDuplicates.Checked
End Sub

    protected void AllowDuplicates_CheckedChanged(Object sender, EventArgs e)
{
    ListPicker1.AllowDuplicates = AllowDuplicates.Checked;
}

  4. Passare alla visualizzazione Progettazione, fare doppio clic su AddItem per creare un gestore eventi per l'evento Click e aggiungere il seguente codice evidenziato:

    Protected Sub AddItem_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles AddItem.Click
    Dim sourceItem As String = Server.HtmlEncode(NewItem.Text)    ListPicker1.AddSourceItem(sourceItem)
End Sub

    protected void AddItem_Click(object sender, EventArgs e)
{
    ListPicker1.AddSourceItem(Server.HtmlEncode(NewItem.Text));
}

    Il codice consente di creare un insieme ListItemCollection nel codice e di compilarlo con dati di esempio. Successivamente, il codice consente di impostare la proprietà SourceItems sull'insieme.

  5. Passare alla visualizzazione Progettazione, fare doppio clic su LoadFiles per creare un gestore eventi per l'evento Click e aggiungere il seguente codice evidenziato:

    Protected Sub LoadFiles_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles LoadFiles.Click
   Dim path As String = Server.MapPath(Request.ApplicationPath)   Dim files() As String = System.IO.Directory.GetFiles(path)   Dim filename As String   For Each filename in Files      ListPicker1.AddSourceItem(filename)   Next
End Sub

    protected void LoadFiles_Click(object sender, EventArgs e)
{
   String path = Server.MapPath(Request.ApplicationPath);   String[] files = System.IO.Directory.GetFiles(path);   foreach(String filename in files)   {      ListPicker1.AddSourceItem(filename);   }
}

    Questo codice è simile al codice per AddItem, ad eccezione del fatto che consente di aggiungere un elenco di file alla directory principale del sito Web.

  6. Passare alla visualizzazione Progettazione, fare doppio clic su ShowSelection per creare un gestore eventi per l'evento Click e aggiungere il seguente codice evidenziato:

    Protected Sub ShowSelection_Click(ByVal sender As Object, _
      ByVal e As EventArgs) Handles ShowSelection.Click
   Dim lItem As ListItem   Dim selectedItemsString As String = ""   For Each lItem in ListPicker1.SelectedItems      selectedItemsString &= "<br>" & lItem.Text   Next   Selection.Text = selectedItemsString
End Sub

    protected void ShowSelection_Click(object sender, EventArgs e)
{
   String selectedItemsString = "";   foreach(ListItem lItem in ListPicker1.SelectedItems)   {      selectedItemsString += "<br>" + lItem.Text;   }   Selection.Text = selectedItemsString;
}

    Questo codice consente di recuperare un oggetto tipizzato come oggetto ListItemCollection, di leggere ogni elemento dell'insieme e di visualizzare i risultati in Selezione.

  7. Passare alla visualizzazione Progettazione, fare doppio clic su ClearSelection per creare un gestore eventi per l'evento Click e aggiungere il seguente codice evidenziato:

    Protected Sub ClearSelection_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles ClearSelection.Click
   ListPicker1.ClearAll()
End Sub

    protected void ClearSelection_Click(object sender, EventArgs e)
{
   ListPicker1.ClearAll();
}

    Questo codice consente di richiamare il metodo ClearAll per consentire al controllo utente di rimuovere tutti gli elementi dall'elenco TargetList.

Test dei controlli utente completati

È ora possibile eseguire il test del controllo utente completato

Per eseguire il test del controllo utente

  1. Premere CTRL+F5 per eseguire la pagina.

  2. Digitare un valore nella casella di testo, quindi fare clic su Aggiungi elemento.

  3. Ripetere più volte il passaggio 2 fino ad ottenere una selezione di elementi del controllo utente.

  4. Utilizzare i pulsanti per selezionare uno o più elementi di origine dall'elenco SourceList e aggiungerli all'elenco TargetList.

  5. Fare clic su Mostra selezione.

    Gli elementi dell'elenco TargetList vengono visualizzati in Selezione.

  6. Fare clic su Cancella tutto.

  7. Fare clic su Elenco dei file.

    Nell'elenco SourceList viene visualizzato un elenco di nomi di file.

  8. Nel controllo utente, scegliere Aggiungi per aggiungere altri elementi all'elenco TargetList.

  9. Provare ad aggiungere all'elenco TargetList un elemento già presente nell'elenco.

    Il valore duplicato viene aggiunto.

  10. Deselezionare la casella Allow duplicates, quindi provare nuovamente ad aggiungere i duplicati.

    Questa volta, i duplicati non vengono aggiunti all'elenco TargetList.

  11. Fare clic su Mostra selezione.

    L'elenco di elementi nell'elenco TargetList viene visualizzato nella pagina host.

Passaggi successivi

Sebbene il controllo creato non sia molto complesso, sono state illustrate molte delle funzionalità di base che è possibile incorporare in un controllo utente. Il miglioramento delle prestazioni del controllo dipende principalmente dalla scoperta di ulteriori proprietà e metodi che consentono di potenziare l'utilizzo del controllo. Di seguito sono riportati alcuni membri aggiuntivi:

  • Proprietà relative all'aspetto.

    È possibile creare proprietà del controllo utente che consentono di impostare lo sfondo, le dimensioni dell'elenco e così via, del controllo.

    Nota:

    Per impostazione predefinita, nel controllo utente si utilizza il tema corrente applicato ai controlli figlio. Ad esempio, se si dispone di un'interfaccia definita per un controllo Button, i pulsanti nel controllo utente sono visualizzati con quella interfaccia.

  • Proprietà dei dati.

    È possibile aggiungere proprietà che consentono al controllo utente di utilizzare un'ampia gamma di dati da visualizzare nell'elenco SourceList. Ad esempio, è possibile aggiungere proprietà che consentono di impostare un dataset, una tabella dati e un campo di visualizzazione dati.

  • Funzionalità.

    È possibile aggiungere al controllo utente ulteriori pulsanti e un codice per consentire non soltanto di copiare elementi dall'elenco SourceList all'elenco TargetList, ma anche di spostare elementi, vale a dire di rimuovere l'elemento dall'elenco SourceList e spostarlo nell'elenco TargetList. Inoltre, il controllo può disporre di pulsanti che consentono di spostare i dati dall'elenco TargetList nuovamente all'elenco SourceList.

Vedere anche

Attività

Procedura: convertire le pagine Web Form in controlli utente ASP.NET

Concetti

Cenni preliminari sui controlli utente ASP.NET

Cenni preliminari sui pericoli di protezione a cui sono esposte le applicazioni Web