logo
border border
              
border border
border border
  Post Subject :: #26. [AjaxControlToolkit] NumericUpDown 컨트롤     [ASP.NET AJAX]
border border
border border
  작성일 : 2007-07-23 오전 12:46:37 | 조회 : 2206 최지훈  
NumericUpDown 컨트롤

소개

이번 포스트에서는 NumericUpDown 컨트롤에 대해서 알아보도록 하겠습니다. 이 포스트는 ajax.asp.net(http://ajax.asp.net/ajaxtoolkit/NumericUpDown/NumericUpDown.aspx)를 참고하여 만들었습니다.

NumericUpDown 컨트롤은 지정된 버튼을 이용하여 TextBox 컨트롤안의 값을 증감하는 역할을 하는 컨트롤입니다. 이는 Windows Form에서는 NumericUpDown 컨트롤로 제공이 되고 있으나, Web Form에서는 별도로 제공되지 않고 있었는데, 이번 ASP.NET AJAX에서 AJAX Control ToolKit 중의 하나의 컨트롤로 나오게 되었습니다.

속성

이제, NumericUpDown 컨트롤이 가지고 있는 속성에 대해서 알아보도록 하겠습니다.

<ajaxToolkit:NumericUpDownExtender ID="NUD1" runat="server"
TargetControlID="TextBox1"
Width="100"
RefValues="January;February;March;April"
TargetButtonDownID="Button1"
TargetButtonUpID="Button2"
ServiceDownPath="WebService1.asmx"
ServiceDownMethod="PrevValue"
ServiceUpPath="WebService1.asmx"
ServiceUpMethod="NextValue"
Tag="1"/>


이탤릭체로 표시된 속성은 옵션 형식으로 사용할 수 있는 속성입니다.

속성에 대해서 차례로 알아보도록 하겠습니다.

1. TargetControlID : 수정을 하기 위한 TextBox 컨트롤의 ID입니다.

2. Width : TextBox와 Up/Down 버튼의 결합 크기입니다.(최소값은 25입니다.). 이 속성은 만약 커스텀 버튼을 제공한다고 해도 사용할 수 없습니다.

3. RefValues : NumericUpDown에 의해 열거되어 사용될 세미콜론(;)에 의해 구분되어진 글자의 목록입니다.

4. Step : 단순한 숫자의 증감을 사용하기 위한 순서입니다. 기본값은 1입니다.

5. TargetButtonDownID/TargetButtonUpID : 기본 Up/Down 버튼 대신 사용할 이미지 버튼의 ID입니다.

6. ServiceDownPath/ServiceUpPath : 이전 값 또는 다음 값을 얻기 위해서 사용되는 데이터가 반환될 웹 서비스의 경로를 지정합니다. 이 속성은 만약, ServiceUpMethod 또는 ServiceDownMethod가 페이지 메소드로 언급되었다면 null값으로 남겨두어야 합니다.

7. ServiceDownMethod/ServiceUpMethod : 이전 값 또는 다음 값을 얻기 위해서 사용되는 데이터가 반환되는 웹 서비스의 메소드명 또는 WebMethodAttribute으로 지정된 페이지상에 선언된 메소드명입니다. 메소드의 시그너처는 다음과 일치해야 합니다.

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public int NextValue(int current, string tag) { ... }


"NextValue" 메소드명은 선택적으로 다른 메소드명으로 바꿀 수 있지만, 리턴 타입이나, 파라미터명이나 타입은 정확하게 일치해야 합니다.

8. Tag : 웹 서비스를 통한 커스텀 파라미터를 정의합니다.

9. Minimum : 확장 컨트롤에서 허락되는 최소값입니다.

10. Maximum - 확장 컨트롤에서 허락되는 최대값입니다.

코드 예제

이제, NumericUpDown 컨트롤을 사용하는 방법에 대해서 알아보도록 하겠습니다. 다음과 같이 새로운 웹 폼을 하나 생성하고, TextBox 3개를 위치시킨 후 NumericUpDown Extender를 마찬가지로 3개를 웹 폼에 위치시킵니다. 그리고, 다음과 같이 웹 폼에 코드를 작성합니다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NumericUpDown.aspx.cs" Inherits="NumericUpDown" %>

 

<%@ 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">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>NumericUpDown Control</title>

</head>

<body>

<form id="form1" runat="server">

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

    </asp:ScriptManager>

 

    <table border="0" cellpadding="0" cellspacing="0" style="background-color:#959695;" width="400px">

        <tr style="height: 30px" valign="middle">

            <td style="width: 100%; font-size: 11pt; color: White;" align="center" colspan="4">

                NumericUpDown Control

            </td>

        </tr>

        <tr style="height: 30px" valign="middle">

            <td style="width: 1%">

            </td>

            <td style="width: 40%; background-color: White; font-size: 9pt;" align="left">

                &nbsp;&nbsp;-10부터 10까지의 범위에서 숫자가 증감하게 됩니다.

            </td>

            <td style="width: 58%; background-color: White; font-size: 9pt;" align="center">

                <asp:TextBox ID="txtBox1" runat="server" Text="0" Width="120" style="text-align:center"></asp:TextBox>

            </td>

            <td style="width: 1%">

            </td>

        </tr>

        <tr style="height: 2px" valign="middle">

            <td style="width: 100%;" align="center" colspan="4">

            </td>

        </tr>

        <tr style="height: 30px" valign="middle">

            <td style="width: 1%">

            </td>

            <td style="width: 40%; background-color: White; font-size: 9pt;" align="left">

                &nbsp;&nbsp;한글 "가"부터 "하"까지 증감 버튼을 클릭함으로써 글자가 변경됩니다.

            </td>

            <td style="width: 58%; background-color: White; font-size: 9pt;" align="center">

                <asp:TextBox ID="txtBox2" runat="server" Text="아" Width="120" style="text-align:center"></asp:TextBox>

            </td>

            <td style="width: 1%">

            </td>

        </tr>

        <tr style="height: 2px" valign="middle">

            <td style="width: 100%;" align="center" colspan="4">

            </td>

        </tr>

        <tr style="height: 30px" valign="middle">

            <td style="width: 1%">

            </td>

            <td style="width: 40%; background-color: White; font-size: 9pt;" align="left">

                &nbsp;&nbsp;기존 Up/Down 이미지 대신 사용자의 이미지로 대체합니다. (값은 현재의 값에서 5씩 증감됩니다.)

            </td>

            <td style="width: 58%; background-color: White; font-size: 9pt;" align="center">

                <asp:TextBox ID="txtBox3" runat="server" Text="0" Width="80" style="text-align:center"></asp:TextBox>

                <asp:ImageButton ID="imgUp" runat="server" Width="16" Height="16" ImageAlign="AbsMiddle" ImageUrl="~/NumericUpDownImages/up.gif" />

                <asp:ImageButton ID="imgDown" runat="server" Width="16" Height="16" ImageAlign="AbsMiddle" ImageUrl="~/NumericUpDownImages/dn.gif" />

            </td>

            <td style="width: 1%">

            </td>

        </tr> 

        <tr style="height: 2px" valign="middle">

            <td style="width: 100%;" align="center" colspan="4">

            </td>

        </tr>

    </table>

 

    <cc1:NumericUpDownExtender

                                            ID="NumericUpDownExtender1"

                                            runat="server"

                                            TargetControlID="txtBox1"

                                            Width="120"

                                            Minimum="-10"

                                            Maximum="10">

    </cc1:NumericUpDownExtender>

 

    <cc1:NumericUpDownExtender

                                            ID="NumericUpDownExtender2"

                                            runat="server"

                                            TargetControlID="txtBox2"

                                            Width="120"

                                            RefValues="가;나;다;라;마;바;아;자;차;카;타;파;하">

    </cc1:NumericUpDownExtender>

 

    <cc1:NumericUpDownExtender

                                            ID="NumericUpDownExtender3"

                                            runat="server"

                                            TargetControlID="txtBox3"

                                            Width="120"

                                            ServiceUpMethod="PlusNumber"

                                            ServiceDownMethod="MinusNumber"

                                            TargetButtonUpID="imgUp"

                                            TargetButtonDownID="imgDown">

    </cc1:NumericUpDownExtender>

</form>

</body>

</html>



첫 번째 텍스트 박스는 NumericUpDownExtender의 MinValue, MaxValue 속성을 이용하여, 단순한 숫자의 증감한 결과를 나오게 하였고, 두 번째 텍스트 박스는 NumericUpDownExtender의 RefValues 속성을 이용하여, 한글의 "가"부터 "하"의 단어까지 Up/Down 버튼을 클릭시에 이전, 다음 글자가 나오도록 하였습니다. 마지막 텍스트 박스는 NumericUpDownExtender에서 제공하는 이미지 대신 TargetButtonUpID 와 TargetButtonDownID 속성을 사용하여 사용자가 대신 넣고 싶은 이미지를 넣도록 설정하였고, 페이지 메소드를 이용하여 Up/Down 버튼을 클릭시에 각각 PlusNumber, MinusNuber라는 메소드를 호출하여 현재의 값에서 5를 증감하도록 하였습니다. 이제, 페이지 메소드에서 정의한 PlusNumber 메소드와 MinusNuber 메소드의 코드는 다음과 같습니다.

[System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

public static int PlusNumber(int current, string tag)

{

    return current + 5;

}

 

[System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

public static int MinusNumber(int current, string tag)

{

    return current - 5;

}



설명드릴 필요 없는 간단한 코드입니다. 그럼, 웹 브라우저를 실행시키면 다음과 같은 화면이 뜨게 됩니다.

그림 1. 단순 숫자값의 증감 화면

그림 2. "가"부터 "하"까지의 글자 변경 화면

그림 3. 사용자 정의 이미지로 대체된 NumericUpDown 컨트롤

이상으로 NumericUpDown 컨트롤에 대한 설명을 모두 마치겠습니다. 실무에서 쉽게 사용하시기 바랍니다.


포스팅을 마치며... ----------------------------------------------------------------------------
가끔씩 ASP.NET 컨트롤 중에서 NumericUpDown 컨트롤이 있느냐는 질문을 웹 상에서 많이 보았는데, ASP.NET AJAX에 다행히도 NumericUpDown 컨트롤이 추가되었군요. 더군다나 사용 방법도 무척이나 쉬우니... 많이 활용하시기 바랍니다.

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
border border
border border
  이전 포스트 :: #25. [AjaxControlToolkit] SlideShow 컨트롤
  다음 포스트 :: #27. [AjaxControlToolkit] PagingBulletedList 컨트롤
border border
border border
  
# Commented By :: purple At 11/22/2007 5:18:22 PM [M] [D]
그리드뷰내에서 컨트롤은 불가능한가요? 열심히 삽질중입니다만 잘 안되네요^^
# Commented By :: 최지훈 At 11/22/2007 7:54:33 PM [M] [D]
글쎄요... 그리드뷰에서는 ModalPopup 컨트롤만 사용을 해 보아서.. ^^;;

제가 쓴 포스트 중 "http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=070731154231689&categoryname=Dev+Story(.Net)" 를 보시면, 화면 중간쯔음에 TemplateField 필드를 사용하여, 그 안에 ModalPopUp 컨트롤을 사용하는 코드가 있습니다.

이 코드를 보고 응용을 하신다면, NumericUpDown 컨트롤도 충분하게 사용가능할 것이라고 봅니다. 화이팅입니다. ^^;;
# Commented By :: purple At 11/26/2007 5:51:23 PM [M] [D]
답글 달아주셔서 감사합니다. TemplateField를 사용하여 해보았으나 실력이 미천한지라
아직 원하는 답을 얻지는 못했습니다^^ ㅎㅎ
# Commented By :: 최지훈 At 11/27/2007 8:27:06 AM [M] [D]
아~ 그러시군요 ^^;;
꾸준하게 시도하시면, 아마도 원하는 답을 구현하실 수 있으실 것입니다.~
がんばれ(간바레)~~~
# Commented By :: Moses At 1/14/2010 2:00:35 PM [D]
참고가 되었습니다. 감사합니다.
  NAME ::   PASSWORD ::
  MAIL ::   HOMEPAGE ::
  COMMENT ::
border border
border border
COPYLEFT NX Blogs.   opml

[ LogIn ]  [ Join NX Blog's ]
border border
border border
mvp
border border
border border
  border
   Personal Thought
   ASP.NET
   ASP.NET AJAX
   ASP.NET MVC Framework
   Dev Story(Etc.)
   Reading the Articles
   About Microsoft / MSDN
   Certification Talk
   Useful Dev Tools
border border
border border
  border
   2010 년 09 월 (2)
   2010 년 06 월 (1)
   2010 년 05 월 (1)
   2010 년 04 월 (1)
   2010 년 03 월 (1)
   2010 년 02 월 (5)
   2010 년 01 월 (1)
   2009 년 04 월 (2)
   2009 년 03 월 (3)
   2009 년 02 월 (6)
   2009 년 01 월 (1)
   2008 년 10 월 (1)
   2008 년 06 월 (8)
   2008 년 05 월 (10)
   2008 년 04 월 (13)
   2008 년 03 월 (9)
   2008 년 02 월 (17)
   2008 년 01 월 (5)
   2007 년 12 월 (8)
   2007 년 11 월 (15)
   2007 년 10 월 (36)
   2007 년 09 월 (33)
   2007 년 08 월 (17)
   2007 년 07 월 (23)
   2007 년 06 월 (4)
   2007 년 05 월 (16)
   2007 년 04 월 (26)
   2007 년 03 월 (14)
   2007 년 02 월 (25)
   2007 년 01 월 (41)
   2006 년 12 월 (38)
   2006 년 11 월 (0)
   2006 년 10 월 (0)
   2006 년 09 월 (1)
   2006 년 08 월 (9)
   2006 년 07 월 (1)
border border
border border
  border
   #129. 無題(2)
    By 최지훈 At 9/6/2010
   #128. 無題
    By 최지훈 At 9/3/2010
   127. [예약구매] 실전. jQ...
    By 최지훈 At 6/13/2010
   #126. 무제
    By 최지훈 At 5/23/2010
   #125. 요즘 근황?
    By 최지훈 At 4/15/2010
   #124. ASP.NET 4 책을...
    By 최지훈 At 3/12/2010
   #97. ASP.NET 4 New...
    By 최지훈 At 2/12/2010
   #96. ASP.NET 4 New...
    By 최지훈 At 2/10/2010
   #95. ASP.NET 4 New...
    By 최지훈 At 2/9/2010
   #94. ASP.NET 4 New...
    By 최지훈 At 2/2/2010
border border
border border
  border
   태풍의 끝자락이 대지를 쓸고 지나...
    By 조재문 At 9/7/2010
   배는숨겨야지 에서 나도 모르게 빵...
    By ㅋㅋ At 8/17/2010
   Sorry. I don't hav...
    By 최지훈 At 8/16/2010
   내 생애 번역서는 이걸루 끝이다....
    By 최지훈 At 8/16/2010
   네..^^;; 저도 감사합니다.
    By 최지훈 At 8/16/2010
   IIS 버전이 업그레이드되면서 해...
    By 최지훈 At 8/16/2010
   나중에 비슷한 차로 태워는 줄께~...
    By 최지훈 At 8/16/2010
   나도 사주세요 저 차
    By ㅋㅋ At 8/12/2010
   저도 URL Rewriting 이...
    By 초보 At 8/7/2010
   감사드립니다^^
    By 이한철 At 7/28/2010
border border