Uso dell'estensione del controllo ColorPicker (C#)
da Microsoft
ColorPicker è un estensione 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 di ASP.NET. Esso.
L'obiettivo di questa esercitazione è spiegare come usare l'estensione del controllo ColorPicker di AJAX Control Toolkit. Il controllo ColorPicker consente di visualizzare una finestra di dialogo popup che consente di selezionare un colore. ColorPicker è utile ogni volta che si vuole fornire un'interfaccia utente intuitiva per un utente per 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 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).
Figura 01: Modulo semplice per la creazione di un biglietto da visita (Fare clic per visualizzare l'immagine a dimensioni complete)
Elenco 1 - CreateCard.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
// Show the panel
pnlResults.Visible = true;
// Show the selected values
lblSelectedText.Text = txtCardText.Text;
lblSelectedColor.Text = txtCardColor.Text;
}
</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 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 colore quando si sposta lo stato attivo su un controllo TextBox (vedere La figura 2).
Figura 02: Estensione del controllo ColorPicker (Fare clic per visualizzare l'immagine a dimensioni complete)
È necessario completare due passaggi per usare l'estensione del controllo ColorPicker con il modulo in Elenco 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 è al di sotto del tag di modulo> lato <server aperto. È 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 di modulo lato server aperto:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
Il modo più semplice per aggiungere l'estensione del controllo ColorPicker alla pagina è in Visualizzazione progettazione. Se si passa il mouse sul txtCardColor TextBox, viene visualizzata un'opzione di attività intelligente che consente di aggiungere un estensione (vedere la figura 3). Se si seleziona questa opzione, viene visualizzata la Procedura guidata estensione (vedere la figura 4).
Figura 03: Aggiunta di un estensione (Fare clic per visualizzare l'immagine full-size)
Figura 04: selezione di un estensione di controllo con l'Estensione guidata (Fare clic per visualizzare l'immagine full-size)
È possibile selezionare l'estensione ColorPicker per estendere l'estensione txtCardColor TextBox con l'estensione ColorPicker. Fare clic su OK per chiudere la finestra di dialogo.
Dopo aver apportato queste modifiche, l'origine per la pagina è simile all'elenco 2.
Elenco 2 - CreateCard.aspx (con ColorPicker)
<%@ Page Language="C#" %>
<%@ 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 void btnSubmit_Click(object sender, EventArgs e)
{
// Show the panel
pnlResults.Visible = true;
// Show the selected values
lblSelectedText.Text = txtCardText.Text;
lblSelectedColor.Text = txtCardColor.Text;
}
</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'estensione ColorPicker supporta le proprietà seguenti:
- PopupButtonId: ID di un pulsante nella pagina che causa 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 usare queste proprietà per personalizzare il modo in cui viene visualizzata la finestra di dialogo selezione colori e come viene visualizzato il colore selezionato. La pagina nell'elenco 3 illustra come è possibile usare diverse di queste proprietà.
Elenco 3 - CreateCardButton.aspx
<%@ Page Language="C#" %>
<%@ 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 void btnSubmit_Click(object sender, EventArgs e)
{
// Show the panel
pnlResults.Visible = true;
// Show the selected values
lblSelectedText.Text = txtCardText.Text;
lblSelectedColor.Text = txtCardColor.Text;
}
</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 Selezione colore (vedere la figura 5). Quando si fa clic su questo pulsante, la finestra di dialogo selezione colori viene visualizzata sopra la casella di testo. 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'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 usata 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 dimensioni complete)
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 viene fatto clic sul pulsante.
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per