Utilisation de l’extendeur de contrôle ColorPicker (C#)

Article
07/13/2023

ColorPicker est un extendeur ASP.NET AJAX qui fournit des fonctionnalités de sélection de couleurs côté client avec l’interface utilisateur dans un contrôle contextuel. Il peut être attaché à n’importe quel contrôle TextBox ASP.NET. Il.

L’objectif de ce tutoriel est d’expliquer comment vous pouvez utiliser l’extendeur de contrôle ColorPicker ajax Control Toolkit. L’extendeur de contrôle ColorPicker affiche une boîte de dialogue contextuelle qui vous permet de sélectionner une couleur. Le ColorPicker est utile chaque fois que vous souhaitez fournir une interface utilisateur intuitive permettant à un utilisateur de choisir une couleur.

Extension d’un contrôle TextBox avec l’extendeur de contrôle ColorPicker

Imaginez, par exemple, que vous souhaitiez créer un site web qui permet aux visiteurs de créer des cartes de visite personnalisées. Les visiteurs peuvent entrer le texte d’un carte d’entreprise et choisir la couleur. La page ASP.NET de la liste 1 contient deux contrôles TextBox nommés txtCardText et txtCardColor. Lorsque vous envoyez le formulaire, les valeurs sélectionnées s’affichent (voir la figure 1).

Figure 01 : Formulaire simple pour la création d’une carte d’entreprise (cliquer pour afficher l’image en taille réelle)

Listing 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>

Le formulaire de la liste 1 fonctionne, mais il n’offre pas une expérience utilisateur optimale. L’utilisateur doit taper une couleur dans la zone de texte. Si l’utilisateur souhaite une couleur spécialisée( par exemple, juste la bonne nuance de vert pois), l’utilisateur doit déterminer le code de couleur HTML sans aucune aide.

Vous pouvez utiliser l’extendeur de contrôle ColorPicker pour créer une meilleure expérience utilisateur. ColorPicker affiche une boîte de dialogue de couleur lorsque vous déplacez le focus vers un contrôle TextBox (voir la figure 2).

Figure 02 : Extendeur de contrôle ColorPicker (cliquer pour afficher l’image en taille réelle)

Vous devez effectuer deux étapes pour utiliser l’extendeur de contrôle ColorPicker avec le formulaire figurant dans la liste 1 :

Ajouter un contrôle ScriptManager à la page
Ajouter l’extendeur de contrôle ColorPicker à la page

Avant de pouvoir utiliser colorpicker, vous devez ajouter un ScriptManager à votre page. Un bon endroit pour ajouter scriptManager se trouve juste en dessous de la balise de formulaire> côté <serveur ouvrante. Vous pouvez faire glisser le ScriptManager sur la page à partir de la boîte à outils (scriptManager se trouve sous l’onglet Extensions AJAX). Vous pouvez également taper la balise suivante dans La vue source sous la balise de formulaire côté serveur d’ouverture :

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

Le moyen le plus simple d’ajouter l’extendeur de contrôle ColorPicker à la page est en mode Création. Si vous placez votre souris sur le contrôle txtCardColor TextBox, une option de tâche active s’affiche pour vous permettre d’ajouter un extendeur (voir la figure 3). Si vous choisissez cette option, l’Assistant Extendeur s’affiche (voir la figure 4).

Figure 03 : Ajout d’un extendeur (Cliquer pour afficher l’image en taille réelle)

Figure 04 : Sélection d’un extendeur de contrôle avec l’Assistant Extendeur (Cliquer pour afficher l’image en taille réelle)

Vous pouvez choisir l’extendeur ColorPicker pour étendre la zone de texte txtCardColor avec l’extendeur ColorPicker. Cliquez sur OK pour fermer la boîte de dialogue.

Une fois ces modifications effectuées, la source de la page ressemble à Listing 2.

Listing 2 - CreateCard.aspx (avec 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>

Notez que la page contient désormais un contrôle ColorPickerExtender qui apparaît directement sous le contrôle txtCardColor TextBox. Le contrôle ColorPickerExtender étend le contrôle txtCardColor afin qu’il affiche une boîte de dialogue de sélecteur de couleurs.

Utilisation d’un bouton pour lancer la boîte de dialogue Sélecteur de couleurs

L’extendeur ColorPicker prend en charge les propriétés suivantes :

PopupButtonId : ID d’un bouton de la page qui provoque l’affichage de la boîte de dialogue du sélecteur de couleurs.
PopupPosition : position, par rapport au contrôle cible, de la boîte de dialogue du sélecteur de couleurs. Les valeurs possibles sont Absolute, Center, BottomLeft, BottomRight, TopLeft, TopRight, Right et Left (la valeur par défaut est BottomLeft).
SampleControlId : ID d’un contrôle qui affiche la couleur sélectionnée.
SelectedColor : couleur initiale sélectionnée par le ColorPicker.

Vous pouvez utiliser ces propriétés pour personnaliser l’affichage de la boîte de dialogue du sélecteur de couleurs et l’affichage de la couleur sélectionnée. La page de la liste 3 montre comment vous pouvez utiliser plusieurs de ces propriétés.

Listing 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 page de la description 3 inclut un bouton Choisir une couleur (voir la figure 5). Lorsque vous cliquez sur ce bouton, la boîte de dialogue du sélecteur de couleurs s’affiche au-dessus de la zone de texte. Si vous sélectionnez une couleur dans la boîte de dialogue, la couleur sélectionnée apparaît comme couleur d’arrière-plan du contrôle lblSample Label.

La propriété PopupButtonID ColorPicker est utilisée pour associer le bouton Choisir une couleur à l’extendeur ColorPicker. Lorsque vous fournissez une valeur pour la propriété PopupButtonID, la boîte de dialogue du sélecteur de couleurs n’apparaît plus lorsque le contrôle cible a le focus. Vous devez cliquer sur le bouton pour afficher la boîte de dialogue.

La propriété SampleControlID est utilisée pour associer un contrôle qui affiche la couleur sélectionnée à ColorPicker. ColorPicker remplace la couleur d’arrière-plan de ce contrôle par la couleur actuellement sélectionnée.

Figure 05 : Affichage de la boîte de dialogue du sélecteur de couleurs avec un bouton (Cliquer pour afficher l’image en taille réelle)

Résumé

Dans ce tutoriel, vous avez appris à utiliser l’extendeur de contrôle ColorPicker pour afficher une boîte de dialogue de sélecteur de couleurs contextuelle. Tout d’abord, nous avons examiné comment afficher la boîte de dialogue lorsque le focus est déplacé vers un contrôle TextBox. Ensuite, vous avez appris à créer un bouton qui affiche la boîte de dialogue du sélecteur de couleurs lorsque l’utilisateur clique sur le bouton.

Partager via

Utilisation de l’extendeur de contrôle ColorPicker (C#)

Extension d’un contrôle TextBox avec l’extendeur de contrôle ColorPicker

Utilisation d’un bouton pour lancer la boîte de dialogue Sélecteur de couleurs

Résumé

Commentaires

Ressources supplémentaires