Bagikan melalui

Menggunakan ColorPicker Control Extender (C#)

oleh Microsoft

ColorPicker adalah ASP.NET extender AJAX yang menyediakan fungsionalitas pemilihan warna sisi klien dengan UI dalam kontrol popup. Ini dapat dilampirkan ke kontrol ASP.NET TextBox apa pun. Itu.

Tujuan dari tutorial ini adalah untuk menjelaskan bagaimana Anda dapat menggunakan extender kontrol AJAX Control Toolkit ColorPicker. Extender kontrol ColorPicker menampilkan dialog popup yang memungkinkan Anda memilih warna. ColorPicker berguna setiap kali Anda ingin menyediakan antarmuka pengguna yang intuitif bagi pengguna untuk memilih warna.

Memperluas Kontrol Kotak Teks dengan Extender Kontrol ColorPicker

Bayangkan, misalnya, bahwa Anda ingin membuat situs web yang memungkinkan pengunjung untuk membuat kartu nama yang disesuaikan. Pengunjung dapat memasukkan teks untuk kartu nama dan memilih warna. Halaman ASP.NET di Daftar 1 berisi dua kontrol TextBox bernama txtCardText dan txtCardColor. Saat Anda mengirimkan formulir, nilai yang dipilih ditampilkan (lihat Gambar 1).

Formulir sederhana untuk membuat kartu nama

Gambar 01: Formulir sederhana untuk membuat kartu nama (Klik untuk melihat gambar ukuran penuh)

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

Formulir dalam Daftar 1 berfungsi, tetapi tidak memberikan pengalaman pengguna yang hebat. Pengguna harus mengetik warna ke dalam kotak teks. Jika pengguna menginginkan warna khusus - misalnya, hanya bayangan hijau kacang yang tepat - maka pengguna harus mencari tahu kode warna HTML tanpa bantuan.

Anda dapat menggunakan extender kontrol ColorPicker untuk menciptakan pengalaman pengguna yang lebih baik. ColorPicker menampilkan dialog warna saat Anda memindahkan fokus ke kontrol Kotak Teks (lihat Gambar 2).

Extender Kontrol ColorPicker

Gambar 02: ColorPicker Control Extender (Klik untuk melihat gambar ukuran penuh)

Anda perlu menyelesaikan dua langkah untuk menggunakan extender kontrol ColorPicker dengan formulir di Daftar 1:

  1. Menambahkan kontrol ScriptManager ke halaman
  2. Menambahkan extender kontrol ColorPicker ke halaman

Sebelum dapat menggunakan ColorPicker, Anda harus menambahkan ScriptManager ke halaman Anda. Tempat yang baik untuk menambahkan ScriptManager tepat di bawah tag bentuk> sisi <server pembuka. Anda dapat menyeret ScriptManager ke halaman dari kotak alat (ScriptManager terletak di bawah tab Ekstensi AJAX). Atau, Anda dapat mengetikkan tag berikut ke dalam Tampilan Sumber di bawah tag formulir sisi server pembuka:

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

Cara termampu untuk menambahkan extender kontrol ColorPicker ke halaman ada di Tampilan Desain. Jika Anda mengarahkan mouse ke atas txtCardColor TextBox, opsi tugas cerdas muncul memungkinkan Anda menambahkan extender (lihat Gambar 3). Jika Anda memilih opsi ini, Wizard Extender muncul (lihat Gambar 4).

Menambahkan extender

Gambar 03: Menambahkan extender (Klik untuk melihat gambar ukuran penuh)

Memilih extender kontrol dengan Wizard Extender

Gambar 04: Memilih extender kontrol dengan Wizard Extender (Klik untuk melihat gambar ukuran penuh)

Anda dapat memilih extender ColorPicker untuk memperluas txtCardColor TextBox dengan extender ColorPicker. Klik OK untuk menutup dialog.

Setelah Anda membuat perubahan ini, sumber untuk halaman terlihat seperti Daftar 2.

Daftar 2 - CreateCard.aspx (dengan 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>

Perhatikan bahwa halaman sekarang berisi kontrol ColorPickerExtender yang muncul tepat di bawah kontrol txtCardColor TextBox. Kontrol ColorPickerExtender memperluas kontrol txtCardColor sehingga menampilkan dialog pemilih warna.

Menggunakan Tombol untuk Meluncurkan Dialog Pemilih Warna

Extender ColorPicker mendukung properti berikut:

  • PopupButtonId - ID tombol pada halaman yang menyebabkan dialog pemilih warna muncul.
  • PopupPosition - Posisi, relatif terhadap kontrol target, dari dialog pemilih warna. Nilai yang mungkin adalah Absolut, Tengah, BottomLeft, BottomRight, TopLeft, TopRight, Kanan, dan Kiri (defaultnya adalah BottomLeft).
  • SampleControlId - ID kontrol yang menampilkan warna yang dipilih.
  • SelectedColor - Warna awal yang dipilih oleh ColorPicker.

Anda dapat menggunakan properti ini untuk menyesuaikan bagaimana dialog pemilih warna ditampilkan dan bagaimana warna yang dipilih ditampilkan. Halaman di Daftar 3 menggambarkan bagaimana Anda bisa menggunakan beberapa properti ini.

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

Halaman di Daftar 3 menyertakan tombol Pilih Warna (lihat Gambar 5). Saat Anda mengklik tombol ini, dialog pemilih warna muncul di atas Kotak Teks. Jika Anda memilih warna dari dialog, warna yang dipilih akan muncul sebagai warna latar belakang kontrol Label lblSample.

Properti ColorPicker PopupButtonID digunakan untuk mengaitkan tombol Pilih Warna dengan extender ColorPicker. Saat Anda menyediakan nilai untuk properti PopupButtonID, dialog pemilih warna tidak lagi muncul saat kontrol target memiliki fokus. Anda harus mengklik tombol untuk menampilkan dialog.

Properti SampleControlID digunakan untuk mengaitkan kontrol yang menampilkan warna yang dipilih dengan ColorPicker. ColorPicker mengubah warna latar belakang kontrol ini ke warna yang saat ini dipilih.

Menampilkan dialog pemilih warna dengan tombol

Gambar 05: Menampilkan dialog pemilih warna dengan tombol (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Dalam tutorial ini, Anda mempelajari cara menggunakan extender kontrol ColorPicker untuk menampilkan dialog pemilih warna popup. Pertama, kami memeriksa bagaimana Anda dapat menampilkan dialog saat fokus dipindahkan ke kontrol TextBox. Selanjutnya, Anda mempelajari cara membuat tombol yang menampilkan dialog pemilih warna saat tombol diklik.

Berikutnya