Uso dell'estensione del controllo ColorPicker (VB)

Articolo
07/13/2023

ColorPicker è un extender AJAX ASP.NET che offre funzionalità di selezione dei colori lato client con l'interfaccia utente in un controllo popup. Può essere collegato a qualsiasi controllo TextBox ASP.NET. Esso.

L'obiettivo di questa esercitazione è spiegare come usare l'estensione del controllo ColorPicker di AJAX Control Toolkit. L'estensione del controllo ColorPicker visualizza una finestra di dialogo popup che consente di selezionare un colore. ColorPicker è utile ogni volta che vuoi fornire un'interfaccia utente intuitiva per consentire a un utente di scegliere un colore.

Estensione di un controllo TextBox con l'estensione del controllo ColorPicker

Si supponga, ad esempio, di voler creare un sito Web che consenta ai visitatori di creare biglietti da visita personalizzati. I visitatori possono immettere il testo per un biglietto da visita e scegliere il colore. La pagina ASP.NET in Listing 1 contiene due controlli TextBox denominati txtCardText e txtCardColor. Quando si invia il modulo, vengono visualizzati i valori selezionati (vedere la figura 1).

Figura 01: Modulo semplice per la creazione di un biglietto da visita (fare clic per visualizzare l'immagine a dimensione intera)

Elenco 1 - CreateCard.aspx

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

<script runat="server">

    Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Show the panel
        pnlResults.Visible = true
        
        ' Show the selected values
        lblSelectedText.Text = txtCardText.Text             
        lblSelectedColor.Text = txtCardColor.Text
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <h1>Create a Business Card</h1>
    
        <asp:Label 
            ID="lblCardText" 
            Text="Card Text"
            AssociatedControlID="txtCardText"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardText"
            Runat="server" />
            
        <br /><br />    
    
        <asp:Label 
            ID="lblCardColor" 
            Text="Card Color"
            AssociatedControlID="txtCardColor"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardColor"
            Runat="server" />
            
        <br /><br />
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <asp:Panel ID="pnlResults" Visible="false" runat="server">
 
            <h2>Your Selection</h2>

            Selected Card Text:
            <asp:Label
                ID="lblSelectedText"
                Runat="server" />
            <br />        
            Selected Card Color:
            <asp:Label
                ID="lblSelectedColor"
                Runat="server" />
        
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

Il modulo nell'elenco 1 funziona, ma non offre un'esperienza utente ottimale. L'utente deve digitare un colore nella casella di testo. Se l'utente vuole un colore specializzato, ad esempio, solo la giusta sfumatura di pea verde, l'utente deve capire il codice colore HTML senza alcun aiuto.

È possibile usare l'estensione del controllo ColorPicker per creare un'esperienza utente migliore. ColorPicker visualizza una finestra di dialogo di colore quando si sposta lo stato attivo su un controllo TextBox (vedere la figura 2).

Figura 02: Estensione controllo ColorPicker (fare clic per visualizzare l'immagine a dimensione intera)

È necessario completare due passaggi per usare l'estensione del controllo ColorPicker con il modulo in Listato 1:

Aggiungere un controllo ScriptManager alla pagina
Aggiungere l'estensione del controllo ColorPicker alla pagina

Prima di poter usare ColorPicker, è necessario aggiungere uno ScriptManager alla pagina. Un buon posto per aggiungere ScriptManager è proprio sotto il tag modulo> lato <server di apertura. È possibile trascinare ScriptManager nella pagina dalla casella degli strumenti (ScriptManager si trova nella scheda Estensioni AJAX). In alternativa, è possibile digitare il tag seguente in Visualizzazione origine sotto il tag modulo lato server di apertura:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

Il modo più semplice per aggiungere l'estensione del controllo ColorPicker alla pagina è in Visualizzazione struttura. Se si passa il puntatore del mouse sul controllo txtCardColor TextBox, viene visualizzata un'opzione di attività intelligente che consente di aggiungere un extender (vedere la figura 3). Se si seleziona questa opzione, viene visualizzata l'Estensione guidata (vedere la figura 4).

Figura 03: Aggiunta di un extender (fare clic per visualizzare l'immagine a dimensione intera)

Figura 04: Selezione di un extender di controllo con l'Estensione guidata (fare clic per visualizzare l'immagine a dimensione intera)

È possibile selezionare l'estensione ColorPicker per estendere txtCardColor TextBox con l'estensione ColorPicker. Fare clic su OK per chiudere la finestra di dialogo.

Dopo aver apportato queste modifiche, l'origine della pagina avrà un aspetto simile a Listato 2.

Listato 2 - CreateCard.aspx (con ColorPicker)

<%@ Page Language="VB" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

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

<script runat="server">

    Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Show the panel
        pnlResults.Visible = true
        
        ' Show the selected values
        lblSelectedText.Text = txtCardText.Text            
        lblSelectedColor.Text = txtCardColor.Text
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <h1>Create a Business Card</h1>
    
        <asp:Label 
            ID="lblCardText" 
            Text="Card Text"
            AssociatedControlID="txtCardText"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardText"
            Runat="server" />
        
        <br /><br />    
    
        <asp:Label 
            ID="lblCardColor" 
            Text="Card Color"
            AssociatedControlID="txtCardColor"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardColor"
            AutoCompleteType="None"
            Runat="server" />
            
        <cc1:ColorPickerExtender 
            ID="txtCardColor_ColorPickerExtender"  
            TargetControlID="txtCardColor"            
            Enabled="True" 
            runat="server">
        </cc1:ColorPickerExtender>
            
        <br /><br />
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <asp:Panel ID="pnlResults" Visible="false" runat="server">
 
            <h2>Your Selection</h2>

            Selected Card Text:
            <asp:Label
                ID="lblSelectedText"
                Runat="server" />
            <br />        
            Selected Card Color:
            <asp:Label
                ID="lblSelectedColor"
                Runat="server" />
        
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

Si noti che la pagina contiene ora un controllo ColorPickerExtender visualizzato direttamente sotto il controllo txtCardColor TextBox. Il controllo ColorPickerExtender estende il controllo txtCardColor in modo che visualizzi una finestra di dialogo selezione colori.

Uso di un pulsante per avviare la finestra di dialogo Selezione colori

L'extender ColorPicker supporta le proprietà seguenti:

PopupButtonId: ID di un pulsante nella pagina che determina la visualizzazione della finestra di dialogo selezione colori.
PopupPosition: posizione relativa al controllo di destinazione della finestra di dialogo selezione colori. I valori possibili sono Absolute, Center, BottomLeft, BottomRight, TopLeft, TopRight, Right e Left (il valore predefinito è BottomLeft).
SampleControlId: ID di un controllo che visualizza il colore selezionato.
SelectedColor: colore iniziale selezionato da ColorPicker.

È possibile utilizzare queste proprietà per personalizzare la modalità di visualizzazione della finestra di dialogo selezione colori e la modalità di visualizzazione del colore selezionato. La pagina nell'elenco 3 illustra come è possibile usare diverse di queste proprietà.

Elenco 3 - CreateCardButton.aspx

<%@ Page Language="VB" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

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

<script runat="server">

    Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Show the panel
        pnlResults.Visible = true
        
        ' Show the selected values
        lblSelectedText.Text = txtCardText.Text             
        lblSelectedColor.Text = txtCardColor.Text
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <h1>Create a Business Card</h1>
    
        <asp:Label 
            ID="lblCardText" 
            Text="Card Text"
            AssociatedControlID="txtCardText"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardText"
            Runat="server" />
            
        <br /><br />    
    
        <asp:Label 
            ID="lblCardColor" 
            Text="Card Color"
            AssociatedControlID="txtCardColor"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardColor"
            AutoCompleteType="None"
            Runat="server" />
        <asp:Button
            ID="btnPickColor"
            Text="Pick Color"
            Runat="server" />
        <asp:Label
            ID="lblSample"
            Runat="Server"> Sample </asp:Label>        
        <cc1:ColorPickerExtender 
            ID="txtCardColor_ColorPickerExtender"  
            TargetControlID="txtCardColor"
            PopupButtonID="btnPickColor"
            PopupPosition="TopRight"
            SampleControlID="lblSample"            
            Enabled="True" 
            runat="server">
        </cc1:ColorPickerExtender>
            
        <br /><br />
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <asp:Panel ID="pnlResults" Visible="false" runat="server">
 
            <h2>Your Selection</h2>

            Selected Card Text:
            <asp:Label
                ID="lblSelectedText"
                Runat="server" />
            <br />        
            Selected Card Color:
            <asp:Label
                ID="lblSelectedColor"
                Runat="server" />
        
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

La pagina nell'elenco 3 include un pulsante Seleziona colore (vedere la figura 5). Quando si fa clic su questo pulsante, la finestra di dialogo selezione colori viene visualizzata sopra il controllo TextBox. Se si seleziona un colore nella finestra di dialogo, il colore selezionato viene visualizzato come colore di sfondo del controllo lblSample Label.

La proprietà ColorPicker PopupButtonID viene utilizzata per associare il pulsante Pick Color all'estensione ColorPicker. Quando si specifica un valore per la proprietà PopupButtonID, la finestra di dialogo selezione colori non viene più visualizzata quando il controllo di destinazione ha lo stato attivo. È necessario fare clic sul pulsante per visualizzare la finestra di dialogo.

La proprietà SampleControlID viene utilizzata per associare un controllo che visualizza il colore selezionato con ColorPicker. ColorPicker modifica il colore di sfondo di questo controllo sul colore attualmente selezionato.

Figura 05: Visualizzazione della finestra di dialogo selezione colori con un pulsante (fare clic per visualizzare l'immagine a dimensione intera)

Riepilogo

In questa esercitazione si è appreso come usare l'estensione del controllo ColorPicker per visualizzare una finestra di dialogo selezione colori popup. Prima di tutto, è stato esaminato come visualizzare la finestra di dialogo quando lo stato attivo viene spostato in un controllo TextBox. Successivamente, si è appreso come creare un pulsante che visualizza la finestra di dialogo selezione colori quando si fa clic sul pulsante.

Indietro

Condividi tramite

Uso dell'estensione del controllo ColorPicker (VB)

Estensione di un controllo TextBox con l'estensione del controllo ColorPicker

Uso di un pulsante per avviare la finestra di dialogo Selezione colori

Riepilogo

Commenti e suggerimenti

Risorse aggiuntive