다음을 통해 공유

ColorPicker 컨트롤 Extender 사용(VB)

  • 아티클

작성자: Microsoft

ColorPicker는 팝업 컨트롤에서 UI를 사용하여 클라이언트 쪽 색 선택 기능을 제공하는 ASP.NET AJAX 확장기입니다. 모든 ASP.NET TextBox 컨트롤에 연결할 수 있습니다. 그것은.

이 자습서의 목표는 AJAX 컨트롤 도구 키트 ColorPicker 컨트롤 확장기를 사용하는 방법을 설명하는 것입니다. ColorPicker 컨트롤 확장자에는 색을 선택할 수 있는 팝업 대화 상자가 표시됩니다. ColorPicker는 사용자가 색을 선택할 수 있도록 직관적인 사용자 인터페이스를 제공하려는 경우에 유용합니다.

ColorPicker 컨트롤 Extender를 사용하여 TextBox 컨트롤 확장

예를 들어 방문자가 사용자 지정된 명함을 만들 수 있는 웹 사이트를 만들려고 하는 경우를 상상해 보십시오. 방문자는 비즈니스 카드 텍스트를 입력하고 색을 선택할 수 있습니다. 목록 1의 ASP.NET 페이지에는 txtCardText 및 txtCardColor라는 두 개의 TextBox 컨트롤이 포함되어 있습니다. 양식을 제출하면 선택한 값이 표시됩니다(그림 1 참조).

비즈니스 카드 만들기 위한 간단한 양식

그림 01: 비즈니스 카드 만들기 위한 간단한 양식(전체 크기 이미지를 보려면 클릭)

목록 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>

목록 1의 양식은 작동하지만 훌륭한 사용자 환경을 제공하지는 않습니다. 사용자는 텍스트 상자에 색을 입력해야 합니다. 사용자가 특수한 색(예: 완두콩 녹색의 오른쪽 음영)을 원하는 경우 사용자는 아무 도움 없이 HTML 색 코드를 파악해야 합니다.

ColorPicker 컨트롤 확장기를 사용하여 더 나은 사용자 환경을 만들 수 있습니다. 포커스를 TextBox 컨트롤로 이동할 때 ColorPicker에 색 대화 상자가 표시됩니다(그림 2 참조).

ColorPicker 컨트롤 Extender

그림 02: ColorPicker 컨트롤 확장기(전체 크기 이미지를 보려면 클릭)

ColorPicker 컨트롤 extender를 목록 1의 양식과 함께 사용하려면 두 단계를 완료해야 합니다.

  1. 페이지에 ScriptManager 컨트롤 추가
  2. 페이지에 ColorPicker 컨트롤 확장기 추가

ColorPicker를 사용하려면 먼저 ScriptManager를 페이지에 추가해야 합니다. ScriptManager를 추가하는 것이 좋은 위치는 여는 서버 쪽 <양식> 태그 바로 아래에 있습니다. ScriptManager를 도구 상자에서 페이지로 끌 수 있습니다(ScriptManager는 AJAX 확장 탭 아래에 있음). 또는 다음 태그를 여는 서버 쪽 양식 태그 아래의 원본 뷰에 입력할 수 있습니다.

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

ColorPicker 컨트롤 확장자를 페이지에 추가하는 가장 쉬운 방법은 디자인 뷰입니다. txtCardColor TextBox 위로 마우스를 가져가면 확장기를 추가할 수 있는 스마트 작업 옵션이 나타납니다(그림 3 참조). 이 옵션을 선택하면 Extender 마법사가 나타납니다(그림 4 참조).

extender 추가

그림 03: 확장기 추가(전체 크기 이미지를 보려면 클릭)

Extender 마법사를 사용하여 컨트롤 확장기 선택

그림 04: 확장 마법사를 사용하여 컨트롤 확장기 선택(전체 크기 이미지를 보려면 클릭)

ColorPicker extender를 선택하여 ColorPicker extender를 사용하여 txtCardColor TextBox를 확장할 수 있습니다. 확인을 클릭하여 대화 상자를 닫습니다.

이러한 변경을 수행한 후 페이지의 원본은 목록 2와 같습니다.

목록 2 - CreateCard.aspx(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>

이제 페이지에 txtCardColor TextBox 컨트롤 바로 아래에 표시되는 ColorPickerExtender 컨트롤이 포함되어 있습니다. ColorPickerExtender 컨트롤은 txtCardColor 컨트롤을 확장하여 색 선택 대화 상자를 표시합니다.

단추를 사용하여 색 선택 대화 상자 시작

ColorPicker extender는 다음 속성을 지원합니다.

  • PopupButtonId - 색 선택 대화 상자가 표시되도록 하는 페이지의 단추 ID입니다.
  • PopupPosition - 색 선택 대화 상자의 대상 컨트롤을 기준으로 하는 위치입니다. 가능한 값은 Absolute, Center, BottomLeft, BottomRight, TopLeft, TopRight, Right 및 Left입니다(기본값은 BottomLeft).
  • SampleControlId - 선택한 색을 표시하는 컨트롤의 ID입니다.
  • SelectedColor - ColorPicker에서 선택한 초기 색입니다.

이러한 속성을 사용하여 색 선택 대화 상자가 표시되는 방법과 선택한 색이 표시되는 방식을 사용자 지정할 수 있습니다. 목록 3의 페이지에서는 이러한 속성 중 몇 가지를 사용하는 방법을 보여 줍니다.

목록 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>

목록 3의 페이지에는 색 선택 단추가 포함되어 있습니다(그림 5 참조). 이 단추를 클릭하면 TextBox 위에 색 선택 대화 상자가 나타납니다. 대화 상자에서 색을 선택하면 선택한 색이 lblSample 레이블 컨트롤의 배경색으로 표시됩니다.

ColorPicker PopupButtonID 속성은 색 선택 단추를 ColorPicker extender와 연결하는 데 사용됩니다. PopupButtonID 속성에 대한 값을 제공하면 대상 컨트롤에 포커스가 있을 때 색 선택 대화 상자가 더 이상 나타나지 않습니다. 대화 상자를 표시하려면 단추를 클릭해야 합니다.

SampleControlID 속성은 선택한 색을 표시하는 컨트롤을 ColorPicker와 연결하는 데 사용됩니다. ColorPicker는 이 컨트롤의 배경색을 현재 선택한 색으로 변경합니다.

단추로 색 선택 대화 상자 표시

그림 05: 단추가 있는 색 선택 대화 상자 표시(전체 크기 이미지를 보려면 클릭)

요약

이 자습서에서는 ColorPicker 컨트롤 확장기를 사용하여 팝업 색 선택 대화 상자를 표시하는 방법을 알아보았습니다. 먼저 포커스가 TextBox 컨트롤로 이동될 때 대화 상자를 표시하는 방법을 검토했습니다. 다음으로, 단추를 클릭할 때 색 선택 대화 상자를 표시하는 단추를 만드는 방법을 알아보았습니다.

이전