Condividi tramite

Uso dell'estensione del controllo ColorPicker (VB)

di Microsoft

ColorPicker è un extender AJAX ASP.NET che fornisce 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'extender di controllo ColorPicker di AJAX Control Toolkit. L'extender 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.

Estendere 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 nell'elenco 1 contiene due controlli TextBox denominati txtCardText e txtCardColor. Quando si invia il modulo, vengono visualizzati i valori selezionati (vedere la figura 1).

Modulo semplice per la creazione di un biglietto da visita

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 l'ombreggiatura giusta del verde pisello, l'utente deve individuare il codice colore HTML senza alcun aiuto.

È possibile usare l'extender 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).

Estensione del controllo ColorPicker

Figura 02: Estensione del 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.

  1. Aggiungere un controllo ScriptManager alla pagina
  2. 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 <form> di apertura lato server. È possibile trascinare ScriptManager nella pagina dalla casella degli strumenti (ScriptManager si trova nella scheda Estensioni AJAX). In alternativa, è possibile digitare il tag seguente nella Visualizzazione del codice sorgente sotto il tag del 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 Design. 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 la Extender Wizard (vedere la figura 4).

Aggiunta di un extender

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

Selezione di un extender di controllo con la procedura guidata

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

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

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

Elenchi 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 di 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: la posizione, relativa al controllo di destinazione, della finestra di dialogo del selettore di 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à.

Listing 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 del selettore di colori viene visualizzata sopra il controllo TextBox. Se si seleziona un colore dalla 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'extender 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 a ColorPicker. ColorPicker modifica il colore di sfondo di questo controllo impostando il colore di sfondo attualmente selezionato.

Visualizzazione della finestra di dialogo selezione colori con un pulsante

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

Sommario

In questa esercitazione si è appreso come usare l'extender di controllo ColorPicker per visualizzare una finestra di dialogo di selezione colori popup. Prima, abbiamo esaminato come visualizzare la finestra di dialogo quando la focalizzazione viene spostata su un controllo TextBox. Successivamente, si è appreso come creare un pulsante che visualizza la finestra di dialogo selezione colori quando si fa clic sul pulsante.

Precedente

  • Last updated on