123

2009.08.12 10:08

사용자 삽입 이미지

네오딕스

Posted by 엔틱스

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

원문 글은 http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=070423000523171&categoryname=ASP.NET+AJAX에서 보실 수 있습니다.

CascadingDropDown 컨트롤

소개

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

CascadingDropDown 컨트롤은 여러 개의 DropDownList가 있을 경우, 맨 처음의 DropDownList 컨트롤을 선택하면, 선택한 값에 해당하는 하위의 값들이 다음 번의 DropDownList 컨트롤에 바인딩되어 보여주는 형태를 좀 더 쉽게 구현할 수 있는 기능을 제공하는 컨트롤입니다. 이에 대한 질문이 심심치 않게 데브피아에 올라오곤 했는데, CascadingDropDown 컨트롤을 사용하면 이러한 문제는 거의 사라질 것이라고 보여집니다.

속성

자, 그러면 CascadingDropDown 컨트롤이 가지고 있는 속성에 대해서 알아보도록 하겠습니다.

<ajaxToolkit:CascadingDropDown ID="CDD1" runat="server"
TargetControlID="DropDownList2"
Category="Model"
PromptText="Please select a model"
LoadingText="[Loading models...]"
ServicePath="CarsService.asmx"
ServiceMethod="GetDropDownContents"
ParentControlID="DropDownList1"
SelectedValue="SomeValue" />


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

1. TargetControlID : DropDownList의 ID입니다.

2. Category : DropDownList가 표현하는 카테고리명입니다.

3. PromptText : DropDownList의 값이 없을 경우 사용자에게 명령을 요청하는 글자를 지정합니다.

4. LoadingText : DropDownList가 데이터를 로드할 때에 표현할 글자를 지정합니다.

5. ServicePath : DropDownList로 위치시킬 데이터가 리턴하는 웹 서비스의 경로입니다. 이 속성은 만약 ServiceMethod가 페이지 메소드로 지정된다면 null로 될 수 있습니다. 웹 서비스는 Microsoft.Web.Script.Services.ScriptService 속성이 추가되어 구성되어야 합니다.

6. ServiceMethod : DropDownList로 위치시킬 데이터를 리턴시키는 웹 서비스의 메소드입니다. 이 메소드의 구조는 다음과 일치해야 합니다.

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public CascadingDropDownNameValue[] GetDropDownContents(
    string knownCategoryValues, string category) { ... }


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

7. ParentControlID : 이 DropDownList의 컨텐츠를 제어하는 상위 DropDownList 컨트롤의 ID입니다.

8. SelectedValue : 기본값으로 선택될 값입니다. 이것은 특히 DropDownList에서 스트링 형식의 값이 일치해야 할 때 필요합니다.

이상으로, 속성에 대해서 알아보았습니다. 이제, 이 속성을 가지고 하나하나씩 적용을 해 보도록 하겠습니다.

코드 예제

웹 페이지를 하나 생성하고 다음과 같이 코드를 작성합니다.

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

 

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

 

<!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>제목 없음</title>

</head>

<body>

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

    <div>

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

        </asp:ScriptManager>

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

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

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

                    CascadingDropDown Control

                </td>

            </tr>

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

                <td style="width: 1%">

                </td>

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

                    년도를 선택하세요. ::

                </td>

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

                    <asp:DropDownList ID="ddlYear" runat="server" Width="300px"></asp:DropDownList>

                </td>

                <td style="width: 1%">

                </td>

            </tr>

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

                <td style="width: 1%">

                </td>

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

                    월을 선택하세요. ::

                </td>

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

                    <asp:DropDownList ID="ddlMonth" runat="server" Width="300px"></asp:DropDownList>

                </td>

                <td style="width: 1%">

                </td>

            </tr>

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

                <td style="width: 1%">

                </td>

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

                    일을 선택하세요. ::

                </td>

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

                    <asp:DropDownList ID="ddlDay" runat="server" Width="300px" AutoPostBack="true" OnSelectedIndexChanged="ddlDay_OnSelectedIndexChanged">

                    </asp:DropDownList>

                </td>

                <td style="width: 1%">

                </td>

            </tr>

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

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

                </td>

            </tr>

        </table>

 

    </div>

    </form>

</body>

</html>



제가 하려고 하는 것은 척 보면 아시겠지만, 년도가 바인딩되어 있는 DropDownList 컨트롤의 특정 년도를 선택 시, 해당하는 년도에 속해 있는 달의 목록을 두 번째 DropDownList 컨트롤에 바인딩시킬 것이고, 다시 특정 달을 선택하면, 선택한 달에 속해있는 일자를 세 번째 DropDownList 컨트롤에 바인딩시켜서 선택한 년도와 달, 그리고 일을 출력하게 할 것입니다. 또한, 여기에서 중요한 것은 Page 지시자에 EnableEventValidation 속성을 false로 설정해야 한다는 점을 기억해야 합니다.

이제, 도구 상자에서 3개의 CascadingDropDown 컨트롤을 웹 폼으로 드래그 앤 드랍으로 위치시키고, 다음과 같이 코드를 추가합니다.

        <ajaxToolkit:CascadingDropDown

                                                ID="CascadingDropDown1"

                                                runat="server"

                                                TargetControlID="ddlYear"

                                                Category="Year"

                                                LoadingText="년도를 로딩중입니다."

                                                ServicePath="CascadingDropDownWebService.asmx"

                                                ServiceMethod="GetDropDownContents"

                                                PromptText="년도를 선택하세요.">

        </ajaxToolkit:CascadingDropDown>

        <ajaxToolkit:CascadingDropDown

                                                ID="CascadingDropDown2"

                                                runat="server"

                                                TargetControlID="ddlMonth"

                                                Category="Month"

                                                LoadingText="월을 로딩중입니다."

                                                ServicePath="CascadingDropDownWebService.asmx"

                                                ServiceMethod="GetDropDownContents"

                                                PromptText="월을 선택하세요."

                                                ParentControlID="ddlYear">

        </ajaxToolkit:CascadingDropDown>

        <ajaxToolkit:CascadingDropDown

                                                ID="CascadingDropDown3"

                                                runat="server"

                                                TargetControlID="ddlDay"

                                                Category="Day"

                                                LoadingText="일을 로딩중입니다."

                                                ServiceMethod="GetDropDownContentsFromPage"

                                                PromptText="일을 선택하세요."

                                                ParentControlID="ddlMonth">

        </ajaxToolkit:CascadingDropDown>



다음은, DropDown 컨트롤의 어떠한 값을 선택했는지와, 페이지에 지정된 웹 서비스 메소드를 호출하기 위한 코드를 확인하기 위해 코드 비하인드에 다음과 같은 코드를 작성합니다.

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

 

using System.Web.Services;

using AjaxControlToolkit;

 

public partial class CascadingDropDown : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

 

    }

 

    protected void ddlDay_OnSelectedIndexChanged(object sender, EventArgs e)

    {

        if (ddlYear.SelectedValue.Length != 0 && ddlMonth.SelectedValue.Length != 0 && ddlDay.SelectedValue.Length != 0)

        {

            Response.Write("<script language='javascript'>alert('"

                    + string.Format("{0}년 {1}월 {2}일을 선택하셨습니다."

                        , ddlYear.SelectedItem.Text, ddlMonth.SelectedItem.Text, ddlDay.SelectedItem.Text)

                    + "');</script>");

        }

    }

 

    [WebMethod]

    [System.Web.Script.Services.ScriptMethod]

    public static CascadingDropDownNameValue[] GetDropDownContentsFromPage(string knownCategoryValues, string category)

    {

        return new CascadingDropDownWebService().GetDropDownContents(knownCategoryValues, category);

    }

}



이제, CascadingDropDown 컨트롤에서 호출할 웹 서비스 파일을 생성해보도록 하겠습니다. "새 항목 추가"를 눌러 "웹 서비스" 템플릿을 선택하고 웹 서비스의 명은 "CascadingDropDownWebService.asmx"라고 합니다. 추가하면, "App_Code" 폴더 밑에 "CascadingDropDownWebService.cs" 파일이 생기는 데 다음과 같이 코드를 작성합니다.

using System;

using System.Web;

using System.Collections;

using System.Collections.Specialized;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Xml;

 

/// <summary>

/// CascadingDropDownWebService의 요약 설명입니다.

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class CascadingDropDownWebService : System.Web.Services.WebService

{

    private static XmlDocument _document;

    private static object _lock = new object();

 

    public CascadingDropDownWebService()

    {

 

    }

 

    public static XmlDocument Document

    {

        get

        {

            lock (_lock)

            {

                if (_document == null)

                {

                    // Read XML data from disk

                    _document = new XmlDocument();

                    _document.Load(HttpContext.Current.Server.MapPath("~/App_Data/CascadingService.xml"));

                }

            }

            return _document;

        }

    }

 

    public static string[] Hierarchy

    {

        get { return new string[] { "year", "month" }; }

    }

 

    [WebMethod]

    public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)

    {

        StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

 

        return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category);

    }

}



여기에서, CascadingDropDown 컨트롤에서 호출할 서비스 메소드명인 "GetDropDownContents"의 코드를 잠시 보도록 하겠습니다.

    [WebMethod]

    public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)

    {

        StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

 

        return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category);

    }



이 메소드는 두 개의 인자인 knownCategoryValues, category를 받습니다. 그리고, StringDictionary 클래스를 만들어서 최종적으로 "QuerySimpleCascadingDropDownDocument" 메소드를 반환하게 됩니다. QuerySimpleCascadingDropDownDocument 메소드의 인자 형식은 차례대로 QuerySimpleCascadingDropDownDocument(XmlDocument Document, string[] Hierarchy, StringDictionary knownCategoryValuesDictionary, string category)가 됩니다. 인자 중에 XmlDocument가 들어가야 하므로, "새 항목 추가"를 눌러서 "XML 파일"을 선택한 후 xml 파일의 이름을 "CascadingService.xml"이라고 한 후, 확인을 누릅니다. 그리고, 생성된 xml 파일의 내용을 다음과 같이 채웁니다.

<?xml version="1.0" encoding="utf-8" ?>

<CascadingService>

  <year name="2006">

    <month name="1">

      <day name="1"></day>

      <day name="11"></day>

      <day name="21"></day>

      <day name="31"></day>

    </month>

    <month name="2">

      <day name="1"></day>

      <day name="10"></day>

      <day name="20"></day>

      <day name="28"></day>

    </month>

    <month name="3">

      <day name="1"></day>

      <day name="11"></day>

      <day name="21"></day>

      <day name="31"></day>

    </month>

  </year>

  <year name="2007">

    <month name="1">

      <day name="1"></day>

      <day name="11"></day>

      <day name="21"></day>

      <day name="31"></day>

    </month>

    <month name="2">

      <day name="1"></day>

      <day name="10"></day>

      <day name="20"></day>

      <day name="28"></day>

    </month>

    <month name="3">

      <day name="1"></day>

      <day name="11"></day>

      <day name="21"></day>

      <day name="31"></day>

    </month>

  </year>

  <year name="2008">

    <month name="1">

      <day name="1"></day>

      <day name="11"></day>

      <day name="21"></day>

      <day name="31"></day>

    </month>

    <month name="2">

      <day name="1"></day>

      <day name="10"></day>

      <day name="20"></day>

      <day name="28"></day>

    </month>

    <month name="3">

      <day name="1"></day>

      <day name="11"></day>

      <day name="21"></day>

      <day name="31"></day>

    </month>

  </year>

</CascadingService>



이제 브라우저를 실행시키면 다음과 같은 화면을 볼 수 있습니다.




그림 1. 브라우저에서 실행시킨 화면

이제, 년도를 선택하면, 월을 선택할 수 있게 DropDown 컨트롤이 변경되고, 다시 월을 선택하면 일을 선택할 수 있게 DropDown 컨트롤이 변경되게 됩니다.




그림 2. 각 DropDownList 컨트롤을 선택 시에 다음 DropDownList 컨트롤이 선택될 수 있도록 바뀌는 화면

일까지 선택을 하게 되면, 선택한 년, 월, 일에 대한 정보가 보이게 됩니다.
CascadingDropDown 컨트롤은 이와 같이 사용하시면 됩니다. 생각보다는 처리해야 할 것이 많은 컨트롤인데요.... 한 번 더 정독하시고 적용해 보시기 바랍니다.



포스팅을 마치며... ----------------------------------------------------------------------------
포스트 내용에서도 설명했듯이 선택된 항목에 대한 정보를 반환하기 위한 메소드인 "QuerySimpleCascadingDropDownDocument" 메소드의 인자 형식에 들어가는 것이 XmlDocument와 StringDictionary같이 잘 쓰지 않는 객체들을 사용하여야 하기 때문에 초반에는 어려움이 좀 있을 듯합니다. 그러나, 이러한 방법으로 사용자에게 선택할 수 있는 DropDownList 컨트롤을 만들어야 하는 개발자에게는 상당히 유용한 컨트롤일 것 같습니다.




Creative Commons License
저작물크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 엔틱스

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 2008.03.10 19:30
    댓글 주소 수정/삭제 댓글
    테스트 글입니다.
    잘 되겠죵?
    • 123123
      2009.08.17 16:20
      댓글 주소 수정/삭제
      123
  2. 2008.03.11 15:37
    댓글 주소 수정/삭제 댓글
    sdfasfd
    safdsafdsaf
  3. 지노
    2010.07.08 11:50
    댓글 주소 수정/삭제 댓글
    좋은 내용의 자료네요. 잘쓰겠습니다.
    그런데 스크롤이 너무 많아서 한눈에 보기가 불편하네요 ^^;

원문 글은 http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=070420084820524&categoryname=ASP.NET+AJAX 에서 보실 수 있습니다.


MutuallyExclusiveCheckBox 컨트롤

소개

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

MutuallyExclusiveCheckBox 컨트롤은 Radio 버튼이 구현하는 기능을 CheckBox 컨트롤로 구현하는 기능을 제공하는 컨트롤입니다. Radio 버튼(ASP.NET 컨트롤) 이나, radio 형식(HTML 컨트롤) 일 경우, GroupName(ASP.NET) 이나 name(HTML)의 속성명을 동일하게 지정하면, GroupName이나 name의 속성에 정의된 그룹명이 동일한 Radio 버튼 중 오직 하나의 Radio 버튼만이 선택되게 됩니다. 기존의 ASP.NET 컨트롤 중에서 CheckBox 컨트롤의 경우는 이러한 속성 없이 Check가 되었는지 되지 않았는지만을 단순히 체크하는 기능만을 가지고 있었는데, MutuallyExclusiveCheckBox 컨트롤을 제공함으로써 좀 더 사용자에게 편한 UI를 제공할 수 있게 되었습니다.

속성

MutuallyExclusiveCheckBox 컨트롤의 속성은 다음과 같습니다.

<ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server"
ID="MustHaveGuestBedroomCheckBoxEx"
TargetControlID="MustHaveGuestBedroomCheckBox"
Key="GuestBedroomCheckBoxes" />



1. TargetControlID : 수정할 CheckBox 컨트롤의 ID입니다.

2. Key : 연계될 CheckBox들의 유일키입니다.

코드 예제

MutuallyExclusiveCheckBox 컨트롤을 이해하기 위해 다음과 같은 코드를 작성합니다.

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

 

<!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>제목 없음</title>

</head>

<body>

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

    <div>

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

        </asp:ScriptManager>

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

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

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

                    MutuallyExclusiveCheckBox 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;개발자이십니까?

                </td> 

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

                    <asp:CheckBox ID="chkYesDeveloper" runat="server" Text="개발자이다." />

                </td>

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

                    <asp:CheckBox ID="chkNoDeveloper" runat="server" Text="개발자가 아니다." />

                </td> 

                <td style="width: 1%">

                </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: 29%; background-color: White; font-size: 9pt;" align="left">

                    <asp:CheckBox ID="chkHaveDream" runat="server" Text="꿈이 있다." />

                </td>

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

                    <asp:CheckBox ID="chkNotHaveDream" runat="server" Text="꿈이 없다." />

                </td> 

                <td style="width: 1%">

                </td>

            </tr>

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

                <td style="width: 1%">

                </td>

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

                    <asp:Label ID="lblResult" runat="server"></asp:Label>

                </td> 

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

                    <asp:Button ID="btnSubmit" runat="server" Text="출력" OnClick="btnSubmit_OnClick" />

                </td>  

                <td style="width: 1%">

                </td>

            </tr>

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

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

                </td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>



그리고, MutuallyExclusiveCheckBox 컨트롤을 4개 웹 폼에 드래그 앤 드랍으로 위치시키고, 다음과 같이 코드를 작성합니다.

        <ajaxToolkit:MutuallyExclusiveCheckBoxExtender

                                                                        ID="MutuallyExclusiveCheckBoxExtender1"

                                                                        runat="server"

                                                                        TargetControlID="chkYesDeveloper"

                                                                        Key="Developer">

        </ajaxToolkit:MutuallyExclusiveCheckBoxExtender>

 

        <ajaxToolkit:MutuallyExclusiveCheckBoxExtender

                                                                        ID="MutuallyExclusiveCheckBoxExtender2"

                                                                        runat="server"

                                                                        TargetControlID="chkNoDeveloper"

                                                                        Key="Developer">

        </ajaxToolkit:MutuallyExclusiveCheckBoxExtender>

 

        <ajaxToolkit:MutuallyExclusiveCheckBoxExtender

                                                                        ID="MutuallyExclusiveCheckBoxExtender3"

                                                                        runat="server"

                                                                        TargetControlID="chkHaveDream"

                                                                        Key="Dream">

        </ajaxToolkit:MutuallyExclusiveCheckBoxExtender>

 

        <ajaxToolkit:MutuallyExclusiveCheckBoxExtender

                                                                        ID="MutuallyExclusiveCheckBoxExtender4"

                                                                        runat="server"

                                                                        TargetControlID="chkNotHaveDream"

                                                                        Key="Dream">

        </ajaxToolkit:MutuallyExclusiveCheckBoxExtender>



또한, Button을 클릭했을 때 어떠한 CheckBox 컨트롤이 체크되었는 지를 Label 컨트롤에 보여주기 위해서 코드 비하인드에 Button_Click 이벤트를 하나 만듭니다.

    protected void btnSubmit_OnClick(object sender, EventArgs e)

    {

        lblResult.Text = "";

 

        if (chkYesDeveloper.Checked)

        {

            lblResult.Text += chkYesDeveloper.Text;

        }

 

        if (chkNoDeveloper.Checked)

        {

            lblResult.Text += chkNoDeveloper.Text;

        }

 

        if (chkHaveDream.Checked)

        {

            lblResult.Text += chkHaveDream.Text;

        }

 

        if (chkNotHaveDream.Checked)

        {

            lblResult.Text += chkNotHaveDream.Text;

        }

    }



이제, 브라우저에서 실행해 보면 다음과 같습니다.




그림 1. MutuallyExclusiveCheckBox 기능이 적용된 CheckBox 컨트롤이 있는 화면

CheckBox 컨트롤들을 클릭하면 Radio 컨트롤의 기능을 하는 CheckBox 컨트롤들을 확인하실 수 있습니다.




그림 2. Radio 컨트롤의 기능을 하는 CheckBox 컨트롤

이제 Button 컨트롤을 눌르면 CheckBox에서 Check된 항목의 Text가 Label 컨트롤에 표현되게 됩니다.




그림 3. 선택한 CheckBox 컨트롤의 Text가 보여지는 화면

이상으로 MutuallyExclusiveCheckBox 컨트롤에 대해서 알아보았습니다. 다음에 다시 다른 AJAX 컨트롤을 가지고 설명을 드리도록 하겠습니다.


포스팅을 마치며... ----------------------------------------------------------------------------
MutuallyExclusiveCheckBox은 사용법이 단순하니만큼 많이 사용될 것이라고 생각됩니다. Radio 컨트롤이 사용되는 곳에 Radio 컨트롤 대신 좀 더 나은 UI 및 사용자의 호기심을 주기 위해서 MutuallyExclusiveCheckBox 컨트롤을 사용하는 방법도 있겠습니다. 판단은 개발자 여러분의 몫이 될 것이니, 잘 생각하시고 사용을 한 번 해보시기 바랍니다.




Creative Commons License
저작물크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 엔틱스

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

원본 글은 http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=070419005119221&categoryname=ASP.NET+AJAX 입니다.

ListSearch 컨트롤


소개

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

ListSearch 컨트롤은 SlideShow 컨트롤과 같이 이번에 새로 배포된 컨트롤입니다. ListSearch 컨트롤은 어떠한 목록 중에서 사용자가 타이핑할 때 타이핑한 글자와 목록의 글자가 일치하면, 해당 목록으로 포커스를 이동시켜 주는 역할을 하는 컨트롤입니다. 예를 들면, 우리가 윈도우 탐색기를 열고, 좌측의 폴더 목록이 보여지는 트리에서 특정 폴더를 선택하면, 우측에는 선택한 폴더에 해당하는 폴더와 파일의 목록들이 나타나게 됩니다. 여기에서 제일 위의 폴더 또는 파일을 마우스로 클릭 후 찾기를 원하는 단어를 키보드로 치면, 키보드로 입력한 글자와 일치하는 폴더 또는 파일로 포커스가 넘어가게 됩니다. 아래의 그림을 참조하시기 바랍니다. (저는 "001 ASP.NET" 폴더를 마우스로 선택한 후 키보드로 "020"을 타이핑하였습니다. 그러면, "020 ECT" 폴더가 선택되게 됩니다.) 이러한 기능을 웹에서 사용할 수 있도록 구현한 것이 ListSearch 컨트롤이라고 생각하시면 됩니다.



그림 1. 윈도우 탐색기에서 키보드를 클릭했을 때 포커스가 이동되는 화면

속성

자, 그러면 ListSearch 컨트롤이 가지고 있는 속성에 대해서 알아보도록 하겠습니다.

<ajaxToolkit:ListSearchExtender id="LSE" runat="server"
TargetControlID="ListBox1"
PromptText="Type to search"
PromptCssClass="ListSearchExtenderPrompt"
PromptPosition="Top" />


이탤릭체로 되어 있는 속성은 필요할 때 사용하는 옵션 형식의 속성입니다.

1. PromptText : ListBox 또는 DropDownList 컨트롤에 포커스를 줄 때, 즉 컨트롤을 선택할 때 표시될 텍스트입니다. 기본값은 "Type to search"입니다. PromptText는 사용자가 찾고자 하는 단어를 입력할 수 있는 곳입니다.

2. PromptCssClass : Prompt 메시지에 적용할 Css의 클래스명입니다.

3. PromptPosition : Prompt 메시지가 리스트 박스의 상단이나 하단에 나타나게 할 것인지를 지정합니다. 기본값은 Top입니다.

코드 예제

자, 이제 속성에 대해서 한 번 살펴보았으니, 또 이 속성을 가지고 하나하나씩 적용을 해 보도록 하겠습니다.

웹 페이지를 하나 생성하고 다음과 같이 코드를 작성합니다.

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

 

<%@ 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>제목 없음</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="600px">

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

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

                    ListSearch Controls

                </td>

            </tr>

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

                <td style="width: 1%">

                </td>

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

                    <asp:ListBox ID="ListBox1" runat="server" Width="400px" Rows="20"></asp:ListBox>

                </td>

                <td style="width: 1%">

                </td>

            </tr>

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

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

                </td>

            </tr>

        </table>

    </form>

</body>

</html>



그리고, ListBox 컨트롤에 데이터를 입력하기 위해서 코드 비하인드에서 0부터 9999까지의 숫자를 생성시켜 ListBox 컨트롤에 추가하는 코드를 다음과 같이 작성합니다.

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

 

public partial class ListSearch : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        MakeItem();

    }

 

    private void MakeItem()

    {

        ListItem li = null;

        int iCount = 10000;

 

        for (int i = 0; i < iCount; i++)

        {

            li = new ListItem(i.ToString(), i.ToString());

            ListBox1.Items.Add(li);

            li = null;

        }

    }

}



이제 도구상자에서 ListSearchExtender 컨트롤을 웹 폼으로 드래그 앤 드랍합니다. 그리고, ListSearchExtender 의 속성을 다음과 같이 정의합니다.

        <cc1:ListSearchExtender

                                    ID="ListSearchExtender1"

                                    runat="server"

                                    TargetControlID="ListBox1"

                                    PromptText="찾으실 단어를 입력하세요">

        </cc1:ListSearchExtender>



이제 브라우저에서 실행해보면, ListBox 컨트롤에는 0부터 9999까지의 숫자가 추가되어 있는 것을 확인할 수 있습니다. ListBox 컨트롤의 아무 항목이나 선택을 하면, ListBox 컨트롤 위에 "찾으실 단어를 입력하세요"라는 단어가 보이는 것을 확인할 수 있습니다.




그림 2. ListBox 컨트롤 아이템 선택시에 보여지는 PromptText

그리고, 또한 "찾으실 단어를 입력하세요"라는 글자가 보이면, 키보드에서 숫자를 눌러보시기 바랍니다. 그러면 누른 숫자와 일치하는 ListBox 컨트롤의 아이템이 선택이 되게 됩니다.




그림 3. 키보드를 누른 숫자와 일치하는 ListBox 컨트롤의 아이템이 선택된 화면

이렇게 ListSearch 컨트롤을 사용하시면 되겠습니다. 아, 너무 간단한가요? 그럼, 나머지 속성을 사용하여 PromptText를 ListBox 컨트롤의 아래에 표시되게 하고, 스타일을 주도록 하겠습니다. ListSearchExtender 컨트롤에 PromptPosition 속성과 PromptCssClass 속성을 추가하고, 각각의 값을 "bottom"과 "text"로 설정합니다. 그리고, 다음과 같이 스타일을 추가합니다.

    <style type="text/css">

        .text {

            background-Color : #000000;

            color : #FFFFFF;

        } 

    </style>



자, 이제 브라우저에서 확인하면, PromptText가 ListBox 컨트롤의 하단에 보이게 되고, 정의된 스타일이 적용되게 됩니다.




그림 4. PromptText가 ListBox 컨트롤의 하단에 위치한 모습

이로써 ListSearch 컨트롤에 대한 설명이 모두 끝났습니다. 잘 사용하시기 바랍니다.


포스팅을 마치며... ----------------------------------------------------------------------------
ListSearch 컨트롤도 생각보다 속성이 많지 않아서 포스트를 작성하는데 별 무리는 없었습니다. 게다가 가지고 있는 속성도 너무 단순해서 정말 개발시에 사용하기에는 별 무리가 없어 보입니다.
이, ListSearch 컨트롤은 웹 상에서 리스트를 보여줄 때 밑으로 스크롤을 내리지 않고, 일치하는 항목을 찾고자 할 때 정말로 유용할 것 같습니다. ^^;; 실무에 활용을 해보도록 해야겠습니다.




Creative Commons License
저작물크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Posted by 엔틱스

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

글에 대한 내용은 http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=070413125713874&categoryname=ASP.NET+AJAX를 눌러서 보시기 바랍니다.

포스트를 읽기에 앞서...
- 이 포스트는 영문으로 작성되어 제공되어진 것을 제가 제 나름대로 한글로 번역하였습니다.
- 직역보다는 의역에 충실하도록 노력을 하였으며, 충분하게 잘못된 번역이 있을 수 있습니다. 잘못된 번역 부분에 대해서는 덧글로 달아주시면 수정하도록 하겠습니다.
- 이 포스트에는 깔끔하게 번역되지 않은 부분이 있을 수 있습니다. 크게 양해해주시고, 영문 웹 페이지를 참조하시기 바라며, 영문 웹 페이지의 링크에 대한 경로는 필요하지 않은 이상 링크를 추가하지 않았습니다.
- 이 포스트는 단지 번역을 한 것 뿐이며, 모든 저작권에 대해서는 영문 웹 페이지에 명시된 곳에 있습니다.

비동기 커뮤니케이션 레이어 개요

소개

Microsoft ASP.NET AJAX 비동기 커뮤니케이션 레이어는 브라우저가 ECMAScript(Javascript)를 사용하여 서버상에 있는 웹 서비스의 메소드를 호출하는 것을 가능하게 합니다. Microsoft ASP.NET AJAX 비동기 커뮤니케이션 레이어는 자바스크립트 함수가 어떠한 브라우저에서건 서버에 있는 웹 서비스의 메소드의 사용이 가능한 API를 노출시킵니다. 이들 API는 브라우저의 XMLHTTP 객체에 의해 제공되는 브라우저의 비동기 행동의 기능을 사용합니다. 더 많은 정보를 보시려면 MSDN 웹 사이트에 있는 About Native XMLHTTP를 보시기 바랍니다.

비동기 커뮤니케이션 레이어는 서버상의 비지니스 계층과 데이터 계층, 그리고 클라이언트상의 프리젠테이션 계층간의 명쾌한 구분을 제공합니다. 브라우저는 프리젠테이션 계층의 컨트롤을 가지고, 풍부하고 바로 응답하는 사용자 인터페이스를 제공하며, 서버는 비지니스 계층과 데이터 계층의 작업을 수행합니다.

이 토픽은 다음과 같은 정보를 포함합니다.

  비동기 커뮤니케이션 레이어의 특징
  배경
  코드 예제
  클래스 참조
  추가적인 자원들
  무엇이 새로운가?

비동기 커뮤니케이션 레이어의 특징

비동기 커뮤니케이션 레이어는 다음과 같은 특징을 제공합니다.


  • 서버로 비동기적 호출을 수행하기 위한 자바스크립트 코드가 가능합니다.
  • .asmx 파일로 구현된 웹 서비스의 메소드를 포함할 수 있습니다.
  • 마치 웹 서비스 메소드가 있는 것처럼 ASP.NET 정적 페이지 메소드를 포함할 수 있습니다.
  • ASP.NET AJAX 응용 프로그램에서 웹 서비스들을 호출하기 위한 기능을 가능 또는 불가능하도록 구성할 수 있습니다.
  • 브라우저와 서버간에 데이터를 주고받기 위한 Javascript Object Notation(JSON), 스트링 데이터, Xml 데이터를 포함하고 있는 직렬화 포맷의 종류를 제공합니다.
  • 클라이언트 스크립트에서 액세스될 수 있는 웹 서비스를 위한 JavaScript 프락시에 의한 웹 서비스와의 상호작용을 더 쉽게 만듭니다.
  • 프락시 객체에 의해 사용되는 클라이언트 실행자를 위한 확장성을 제공합니다. 실행자는 클라이언트 웹 요청과 네트워크 또는 다른 미디어 사이에서의 인터페이스로써 작용되는 컴포넌트입니다. 비동기 커뮤니케이션 레이어 안에서 실행되는 자신의 실행자를 작성할 수 있습니다. 더 많은 정보는, XMLHttpExecutor Class를 보시기 바랍니다.
  • 신뢰의 매개체로 사용될 수 있습니다.


배경

비동기 커뮤니케이션 레이어는 브라우저와 서버에 있는 JavaScript에서 클라이언트-서버 통신을 수행하는 것이 가능한 낮은 레벨의 컴포넌트들의 추상적 개념을 제공합니다.

AJAX

Asynchronous JavaScript and XML (AJAX)는 오로지 페이지의 포스트백이 완료된 것이라고 믿는 것보다 더욱 영향을 미치고, 더욱 바로 응답할 수 있는 웹 응용 프로그램을 만드는 것을 가능하게 해줍니다. AJAX 스타일 프로그래밍으로, 브라우저는 완전한 페이지의 업데이트를 할 필요없이, 오직 서버와 함께 필요한 데이터만 교환할 수 있습니다.

AJAX는 다음과 같은 기술의 결합을 신뢰합니다.


  • 브라우저의 안에서 만들어지는 XMLHTTP 객체를 사용함에 의한 브라우저와 서버간의 비동기 커뮤니케이션
  • 브라우저와 서버 사이에서 교환하고 있는 데이터의 형식. 이 형식은 보통 XML이지만, 또한 JSON 또는 다른 형식도 가능합니다.
  • XHTML, HTML, CSS의 사용에 의한 브라우저에서의 데이터 표현
  • 바로 응답하는 사용자 인터페이스를 만들기 위한 브라우저의 document object model (DOM)과 JavaScript를 사용하는 클라이언트 스크립팅


JSON

JavaScript Object Notation (JSON)은 객체들과 객체들의 상태를 표현하기 위한 경량화된 형식입니다. 비동기 커뮤니케이션 레이어는 웹 서비스에서 전형적으로 사용되는SOAP 형식 대신에 직렬화 형식으로 JSON을 사용합니다. JSON을 사용하여 SOAP과 XML에서 사용하는 구조적인 요청을 위한 대규모의 클라이언트 스크립트를 제거했기 때문에 클라이언트-서버간 상호 작용을 간단하게 할 수 있습니다.

Note
시스템의 특성을 확장 또는 커스터마이징하지 않는 이상은 JSON 형식 또는 직렬화의 자세한 사항까지 이해할 필요는 없습니다. 예를 들어, 만약 ASP.NET 2.0 AJAX Extension이 명시된 보통의 형식을 직렬화하는 방법의 수정을 원한다면 JSON 형식을 알아야 할 것입니다.


웹 서비스 메소드의 호출

ASP.NET 2.0 AJAX Extension은 클라이언트 스크립트에 의해 브라우저에서 ASP.NET 웹 서비스를 호출하는 것을 가능하게 합니다. 페이지는 단지 브라우저와 웹 서버 사이에서 데이터만 전송되기 때문에 포스트백과 전체 페이지의 새로고침없이 서버에 기반한 메소드를 호출할 수 있습니다. 아래의 코드 예제는 어떻게 ASP.NET 웹 페이지에서 웹 서비스 메소드를 노출시키는지를 보여줍니다.

[실행화면]   [소스보기]

HTTP 요청 만들기

스크립트에서 웹 서비스 메소드를 호출하는 이전 예제는 HTTP 요청에 대한 지식이 필요하지 않습니다. 더 많이 진보된 시나리오를 위해, 비동기 커뮤니케이션 레이어는 Sys.Net.WebRequest 클래스의 사용에 의해 네트워크상의 어떠한 HTTP 종료점의 요청을 만들기 위한 JavaScript를 가능하게 합니다.

다음의 예제는 명시된 URL로 연결하는 GET과 POST 웹 요청을 구현하기 위한 WebRequest 객체를 어떻게 사용하는지를 보여줍니다.

[실행화면]   [소스보기]

예제를 실행하기 위해서는 다음이 필요합니다.


  • ConnectionEndPoints.aspx 테스트 페이지가 필요합니다. 이 페이지는 GET 요청과 POST 요청을 만들기 위한 스크립트를 실행하는 버튼을 포함합니다. 비동기적으로 Sys.Net.XmlHttpExecutor 인스턴스에 의해서 반환되며, 페이지에 결과가 표시됩니다.
  • GetTarget.htm과 PostTarget.aspx 페이지가 필요합니다. 이들은 각각 GET 요청과 POST 요청을 위한 대상 페이지입니다.
  • ConnectionEndPoints.js 스트립트 페이지가 필요합니다. 이 스크립트는 요청을 만드는 실제적인 작업을 하며, 요청의 결과를 받기위한 핸들러 함수를 제공합니다.


클라이언트-서버간 통신

아래 그림은 어떻게 비동기 커뮤니케이션 레이어가 클라이언트와 서버간에서 통신을 하는지를 보여줍니다.



물리적 교환에서, 비동기 커뮤니케이션 레이어의 일부분은 클라이언트측의 폼 안에 다운로드된 스크립트 형태로 있으며, 다른 부분은 서버측에서 폼의 핸들러와 웹 서비스 형태로 있게 됩니다.

클라이언트 구조

클라이언트 비동기 커뮤니케이션 레이어는 몇개의 JavaScript 컴포넌트들로 구성됩니다. 아래의 그림은 비동기 커뮤니케이션 레이어의 클라이언트 구조를 보여줍니다.



클라이언트 구조는 두개의 주요 그룹인 communication group과 support group을 포함합니다.

Communication Group

이 communication group은 클라이언트와 서버간에 웹 서비스 통신을 수행하는 클라이언트 스크립트를 포함합니다. 웹 요청 제어가 본래 비동기적인 프로세스라는 것을 주의하십시요. 이 communication group은 브라우저의 XMLHTTP 객체와 실행자(executor) 객체에서 브라우저가 웹 서비스에게 요청을 빠르게 보내는 것에 기반하고 있습니다.

웹 서비스 프락시 클래스(Web Service Proxy Classes)

Microsoft ASP.NET AJAX에서 비동기 커뮤니케이션 레이어는 자동적으로 클라이언트 스크립트 프락시 클래스들을 발생시킵니다. 당신은 클라이언트 스크립트에서 서버로 비동기적인 요청을 만들기 위한 JavaScript 프락시 객체를 사용할 수 있습니다. 여기에는 웹 서비스 요청을 만들기 위한 두 가지의 가능한 접근 방법이 있습니다.


  • HTTP POST 동사를 사용하여 웹 서비스를 호출합니다. POST 요청은 브라우저가 서버로 보내기 위한 데이터를 포함하는 바디(body)를 가집니다. 이 바디에는 사이즈 제한이 없습니다. 그러므로, 당신은 데이터가 GET 요청시에 사이즈 제한을 초과하는 사이즈일 경우에는 POST 요청을 사용할 수 있습니다. 클라이언트는 JSON 형식으로 서버로 데이터를 전송합니다. 서버는 .NET 형식으로 JSON 데이터를 비직렬화하고 실질적인 웹 서비스 호출을 만들게 됩니다. 응답하는 동안, 서버는 반환값들을 직렬화하고, 클라이언트로 다시 전송하고, 그 값을 처리하는 JavaScript 객체에서 다시 비직렬화시킵니다.
  • HTTP GET 동사를 사용하여 웹 서비스를 호출합니다. 이것은 POST 요청과 기능적으로는 유사하지만, 다음과 같은 다른점이 있습니다.

    • 클라이언트는 서버로 파라미터를 보내기 위해 쿼리 스트링을 사용합니다.
    • GET 요청은 단지 [ScriptMethod(UseHttpGet = true)] 속성을 사용하여 구성된 웹 서비스 메소드만을 호출할 수 있습니다.
    • 데이터 사이즈는 브라우저에 의해 허용된 URL의 길이로 제한됩니다.
      Note
      GET 요청에서는 서버의 데이터 수정이나 위험적인 정보를 노출시키는 메소드의 호출을 권장하지 않습니다. GET 요청에서, 메세지는 브라우저에 의해 URL이 인코딩되었으므로 쉽게 변경할 수 있는 타켓이 됩니다. GET과 POST 요청 둘 다, 데이터를 보호하기 위한 보안 가이드라인을 따라야만 할 것입니다.




페이지 메소드 프락시 클래스

페이지 메소드는 ASP.NET 페이지(.aspx 페이지, 마스터 페이지 또는 .ascx 페이지)에서 페이지 메소드가 웹 서비스 메소드인 것처럼 정적 메소드를 호출하기 위한 클라이언트 스크립트를 위한 스크립트 구조를 제공합니다.

Support Group

support group은 클라이언트-서버 통신을 요구하는 프락시 클래스들과 직렬화를 제어하기 위한 책임을 집니다.

인증 프락시 클래스(Authentication Proxy Class)

인증 프락시 클래스는 서버 인증 서비스에 의해 진행됩니다. 이것은 서버로의 라운드 트립 없이 브라우저에서 JavaScript를 통한 사용자의 로그인 또는 로그아웃을 가능하게 합니다.

프로필 프락시 클래스(Profile Proxy Class)

프로필 프락시 클래스는 서버 프로필 서비스에 의해 진행됩니다. 이것은 서버로의 라운드 트립 없이 JavaScript를 통하여 현재의 사용자 프로필 정보를 만듭니다. 이것은 또한 스크립트를 사용하여 서버로 수정된 프로필 정보를 저장하는 것을 가능하게 합니다.

JSON 직렬화

클라이언트 JSON 직렬화 컴포넌트는 JSON 형식으로 JavaScript 객체를 직렬화합니다. 비직렬화는 JavaScript의 eval 함수를 사용합니다.

비록 JSON이 웹 서비스와 ASP.NET 웹 페이지에서 기본적 직렬화 형식이고, 개별적인 메소드들이라고 할지라도, XML과 같은 다른 형식의 반환도 가능합니다. 메소드의 직렬화 형식은 속성을 가지고 명시될 수 있습니다. 예를 들어, [ScriptMethod(ResponseFormat.Xml)] 속성은 브라우저에 명시된 XMLDocument 형식으로 웹 서비스 메소드가 데이터를 리턴하는 것을 유발시킵니다. 더 많은 정보는 MSDN 라이브러리에 있는 XML DOM PropertiesScriptMethodAttribute 클래스 개요를 보시기 바랍니다.

서버 구조

서버 비동기 커뮤니케이션 레이어는 몇 개의 컴포넌트들로 구성됩니다. 아래의 그림은 비동기 커뮤니케이션 레이어의 서버 구조를 보여줍니다.



서버 구조는 두개의 주요 그룹인 communication group과 support group을 포함합니다.

Communication Group

서버 communication group은 서버와 클라이언트 사이의 고레벨 인터페이스입니다. 이것은 클라이언트에서의 유사한 컴포넌트와 응답하는 서버 커뮤니케이션 컴포넌트를 포함합니다.

웹 서비스

웹 서비스 컴포넌트에서, 서버는 모든 요구된 처리를 수행하고, 클라이언트에게 응답을 반환합니다.

페이지 메소드

페이지 메소드는 ASP.NET 페이지(.aspx 페이지, 마스터 페이지 또는 .ascx 페이지)에서 페이지 메소드가 웹 서비스 메소드인 것처럼 메소드가 가능합니다.

Support Group

직렬화와 응용 프로그램 서비스와 같은 추가적인 작업을 위한 support group 제어를 위한 컴포넌트는 클라이언트-서버 데이터 교환을 위해 필요합니다.

JSON 직렬화

서버 JSON 직렬화 컴포넌트는 수정 가능한 직렬화와 JSON 형식에서 일반적인 .NET 형식으로의 비직렬화를 가능하게 합니다.

XML 직렬화

비동기 커뮤니케이션 레이어는 웹 서비스에서 XML 형식의 반환을 지원합니다. 만약, 서버 속성인 [ScriptMethod(ResponseFormat.Xml)] 에 의해 명시됨으로 인해 웹 메소드가 XmlDocument 객체를 반환한다면, 콜백 함수는 브라우저에 정의된 XmlDocument 형식으로서의 반환 값을 받을 것입니다. 더 많은 정보는 MSDN 라이브러리에 있는 XMLDocument Property를 보시기 바랍니다.

인증 서비스

인증 서비스는 인증 프락시 클래스를 진행하고, 이용할 수 있는 클라이언트 스크립트를 만듭니다. 이것은 클라이언트에서 JavaScript를 통한 사용자의 로그인 또는 로그아웃을 가능하게 해줍니다.

프로필 서비스

프로필 서비스는 프로필 프락시 클래스를 진행하고, 클라이언트 스크립트에서 현재의 요청으로 연계된 사용자의 고유식별값을 위한 프로필 속성을 얻거나 설정할 수 있습니다. 프로필 서비스는 인증된 사용자와 익명의 인증 구조가 가능한 익명 사용자일 때 실행됩니다.

코드 예제

Calling Web Services from Client Script

Exposing Web Services to Client Script

Using Forms Authentication

Using Profile Information

클래스 참조

클라이언트 형식

이름

설명

WebServiceProxy Class

비동기적으로 명시된 웹 서비스의 메소드의 호출을 가능하게 합니다.

WebRequest Class

HTTP 요청을 만들기 위한 비동기적인 클라이언트-서버 통신 구조에 의해 필요로 하는 정보의 모델입니다. 이 클래스는 다른 비동기 클라이언트-서버 통신 클래스들에 의해서 사용됩니다.

WebRequestExecutor Class

웹 요청을 수행하기 위한 네트워크와 함께 인터페이스의 기능을 제공합니다.

WebRequestManager Class

WebRequest 클래스로부터 실질적인 네트워크 요청들을 만들기 위해 처리하는 XMLHttpExecutor 클래스로의 네트워크 요청의 흐름을 관리합니다.

WebServiceError Class

Sys.Net 네임스페이스 클래스들을 위한 에러를 제어합니다.

XMLHttpExecutor Class

브라우저의 XMLHTTP를 사용하여 비동기적인 네트워크 요청들을 만듭니다.

JavaScriptSerializer Class

직렬화와 비직렬화의 기능을 제공합니다.

AuthenticationService Class

인증 서비스를 위한 클라이언트 프락시 클래스를 제공합니다.

ProfileGroup Class

프로필 그룹을 정의합니다.

ProfileService Class

프로필 서비스를 위한 클라이언트 프락시 클래스를 제공합니다.


서버 형식

이름

설명

ScriptingAuthenticationServiceSection

인증 서비스 설정을 위한 구성 섹션을 나타냅니다.

ScriptingProfileServiceSection

프로필 서비스 설정을 위한 구성 섹션을 나타냅니다.

JavaScriptConverter

커스텀 형식의 컨버터를 위한 추상 기본 클래스를 제공합니다.

JavaScriptSerializer

직렬화와 비직렬화 기능을 제공합니다.

JavaScriptTypeResolver

커스텀 형식의 해결자(resolver) 구현을 위한 추상 기본 클래스를 제공합니다.

ScriptIgnoreAttribute

클래스의 인스턴스가 직렬화 또는 비직렬화될 때 공용 속성이나 공용 필드가 JavaScriptSerializer에 의해 무시될 것인지를 명시합니다.

SimpleTypeResolver

관리되는 형식의 형식 해결자를 제공합니다.

GenerateScriptTypeAttribute

프락시 객체에서 서버 형식이 진행될 것인지를 명시합니다.

ResponseFormat

어떻게 웹 메소드의 반환 형식이 직렬화되는지를 명시합니다.

ScriptMethodAttribute

HTTP 동사가 메소드에 포함되곤 하는지, 그리고 응답의 형식이 무엇인지를 명시합니다.

ScriptServiceAttribute

웹 서비스가 스크립트에서 포함될 수 있는 비동기 커뮤니케이션 레이어를 지시합니다.

AuthenticationServiceManager

인증 서비스의 지역을 구성합니다.

ProfileServiceManager

프로필 서비스의 지역을 구성합니다.



포스팅을 마치며... ----------------------------------------------------------------------------
음냐... 먼 내용이 이렇게 긴지 모르겠습니다. ㅠㅠ;; 잘 이해도 안되고.... 정말 오래 걸렸습니다. ㅡㅡ;;




Creative Commons License
저작물크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Posted by 엔틱스

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 2008.09.10 20:02
    댓글 주소 수정/삭제 댓글
    Thanks for this wonderful post...

글에 대한 내용은 http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=070413125713874&categoryname=ASP.NET+AJAX를 눌러서 보시기 바랍니다.


포스트를 읽기에 앞서...
- 이 포스트는 영문으로 작성되어 제공되어진 것을 제가 제 나름대로 한글로 번역하였습니다.
- 직역보다는 의역에 충실하도록 노력을 하였으며, 충분하게 잘못된 번역이 있을 수 있습니다. 잘못된 번역 부분에 대해서는 덧글로 달아주시면 수정하도록 하겠습니다.
- 이 포스트에는 깔끔하게 번역되지 않은 부분이 있을 수 있습니다. 크게 양해해주시고, 영문 웹 페이지를 참조하시기 바라며, 영문 웹 페이지의 링크에 대한 경로는 필요하지 않은 이상 링크를 추가하지 않았습니다.
- 이 포스트는 단지 번역을 한 것 뿐이며, 모든 저작권에 대해서는 영문 웹 페이지에 명시된 곳에 있습니다.

타이머 컨트롤 개요

소개

타이머 컨트롤은 정해진 간격에 포스트백을 수행합니다. 만약, UpdatePanel 컨트롤과 같이 Timer 컨트롤을 사용한다면, 정해진 간격에 부분 페이지 업데이트가 가능하게 됩니다. 그리고, 전체 페이지를 포스트하기 위한 Timer 컨트롤의 사용 또한 가능합니다.

이 토픽은 다음과 같은 섹션을 포함하고 있습니다.

  1. 시나리오
  3. 배경
  4. 코드 예제
  5. 클래스 참조

Timer 컨트롤 시나리오

다음과 같은 경우에 Timer 컨트롤을 사용합니다.


  • 주기적으로 전체 웹 페이지의 새로고침 없이 하나 또는 그 이상의 UpdatePanel 컨트롤의 컨텐츠를 업데이트 하고자 할 경우
  • Timer 컨트롤이 포스트백을 유발하도록 매 시간 서버에서 코드를 실행할 경우
  • 정의된 간격에 동기적으로 전체 웹 페이지를 웹 서버로 보낼 경우


배경

Timer 컨트롤은 웹 페이지 안으로 자바스크립트 컴포넌트가 내장된 서버 컨트롤입니다. 자바스크립트 컴포넌트는
Interval 속성의 시간이 경과되어 정의된 간격이 되었을 때 브라우저에서의 포스트백이 초기화됩니다. 서버에서 실행할 코드에 있는 Timer 컨트롤의 속성을 설정하고, 이 속성들을 자바스크립트 컴포넌트로 보냅니다.

ScriptManager 클래스의 인스턴스는 Timer 컨트롤을 사용할 때 웹 페이지에 포함될 것입니다.

포스트백이 Timer 컨트롤에 의해서 초기화될 때, Timer 컨트롤은 서버에서
Tick 이벤트를 발생시킵니다. 페이지가 서버로 보내질 때 어떠한 행동을 수행하기 위한 Tick 이벤트의 이벤트 핸들러를 만들 수 있습니다.

얼마나 종종 포스트백이 발생할 것인가에 대한 Interval 속성을 설정하고, Timer를 작동시키거나 중지시키는
Enabled 속성을 설정합니다. Interval 속성은 밀리세컨드로 정의되고, 기본값은 60,000 밀리세컨드 또는 60 초입니다.

Note
Timer 컨트롤의 Interval 속성을 작은 값으로 설정하면 서버로 상당한 트래픽을 줄 수 있습니다. 단지 필요할 때만 가끔씩 컨텐츠를 새로고침하기 위해 Timer 컨트롤을 사용합니다.


만약 다른 UpdatePanel 컨트롤이 서로 다른 간격으로 업데이트되기를 원한다면, 웹 페이지에 하나 이상의 Timer 컨트롤에 대한 포함이 가능합니다. 대안으로, Timer 컨트롤의 단일 인스턴스는 웹 페이지에서 하나 이상의 UpdatePanel 컨트롤의 트리거가 될 수 있습니다.

UpdatePanel 컨트롤 안에서 Timer 컨트롤 사용하기

Timer 컨트롤이 UpdatePanel 컨트롤 안에 포함될 때, 자동적으로 Timer 컨트롤은 UpdatePanel의 트리거로써 작업합니다. UpdatePanel 컨트롤의
ChildrenAsTriggers 속성을 false로 설정함으로 이 행동을 오버라이드할 수 있습니다.

UpdatePanel 컨트롤 안에 있는 Timer 컨트롤을 위해, 자바스크립트 타이밍 컴포넌트는 각 포스트백이 종료될 때 재생성됩니다. 그러므로, 일정한 시간 후의 간격은 포스트백에서 페이지가 돌아올 때까지 시작하지 않습니다. 예를 들어, 만약 Interval 속성이 60,000 밀리세컨드(60초)로 설정되어 있지만, 포스트백이 완료되는 데는 3초밖에 걸리지 않았다면, 다음 포스트백은 이전 포스트백으로부터 63초 후에 발생될 것입니다.

아래의 예제는 UpdatePanel 컨트롤 안에 Timer 컨트롤이 어떻게 포함되는지를 보여줍니다.

<asp:ScriptManager runat="server" id="ScriptManager1" />
<asp:UpdatePanel runat="server" id="UpdatePanel1"
UpdateMode="Conditional">
<contenttemplate>
<asp:Timer id="Timer1" runat="server"
Interval="120000"
OnTick="Timer1_Tick">
</asp:Timer>
</contenttemplate>
</asp:UpdatePanel>


UpdatePanel 컨트롤 밖에서 Timer 컨트롤 사용하기

UpdatePanel 밖에 Timer 컨트롤이 있을 때에는, UpdatePanel 컨트롤의 트리거로 사용을 할 것이라고 명시적으로 정의해야 합니다.

만약, UpdatePanle 밖에 Timer 컨트롤이 있다면, 자바스크립트 타이밍 컴포넌트는 포스트백이 진행될 동안 동작을 계속합니다. 예를 들어, 만약 Interval 속성이 60,000 밀리세컨드(60초)로 설정되어 있고, 포스트백이 완료되는 데 3초가 걸렸다면, 다음 포스트백은 이전 포스트백으로부터 60초 후에 발생될 것입니다. 사용자는 단지 57초만에 UpdatePanel 컨트롤의 컨텐츠가 업데이트되는 것을 볼 수 있을 것입니다.

Interval 속성의 다음 포스트백이 초기화되기 전에 하나의 비동기 포스트백이 완료되는 것을 가능하도록 값을 설정할 수 있습니다. 만약, 새로운 포스트백이 이전의 포스트백이 진행되고 있는 동안 초기화되었다면, 첫번째 포스트백은 취소됩니다.

다음의 예제는 어떻게 UpdatePanel 컨트롤 밖에서 Timer 컨트롤을 사용하는지에 대한 것을 보여줍니다.

<asp:ScriptManager runat="server" id="ScriptManager1" />
<asp:Timer ID="Timer1" runat="server" Interval="120000"
OnTick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1"
EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" ></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>


코드 예제

다음의 예제는 랜덤하게 변경되는 주식 가격과 주식 가격이 변경되었을 때의 시간을 표시하는 UpdatePanel 컨트롤을 보여줍니다. 기본값으로, Timer 컨트롤은 매 10초마다 UpdatePanel 컨트롤의 컨텐츠를 업데이트합니다. 사용자는 매 10초, 매 60초 또는 업데이트 하지 않음을 선택함으로 주식 가격의 업데이트를 결정할 수 있습니다. 사용자가 주식 가격의 업데이트를 하지 않겠다는 항목을 선택할 때, Enabled 속성은 false로 설정됩니다.

CS

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Timer Example Page</title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
OriginalTime.Text = DateTime.Now.ToLongTimeString();
}

protected void Timer1_Tick(object sender, EventArgs e)
{
StockPrice.Text = GetStockPrice();
TimeOfPrice.Text = DateTime.Now.ToLongTimeString();
}

private string GetStockPrice()
{
double randomStockPrice = 50 + new Random().NextDouble();
return randomStockPrice.ToString("C");
}

protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
{
Timer1.Enabled = true;
Timer1.Interval = 10000;
}

protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
{
Timer1.Enabled = true;
Timer1.Interval = 60000;
}

protected void RadioButton3_CheckedChanged(object sender, EventArgs e)
{
Timer1.Enabled = false;
}

</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000" />

<asp:UpdatePanel ID="StockPricePanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
<ContentTemplate>
Stock price is <asp:Label id="StockPrice" runat="server"></asp:Label><BR />
as of <asp:Label id="TimeOfPrice" runat="server"></asp:Label>
<br />

</ContentTemplate>
</asp:UpdatePanel>
<div>
<br />
Update stock price every:<br />
<asp:RadioButton ID="RadioButton1" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="10 seconds" OnCheckedChanged="RadioButton1_CheckedChanged" /><br />
<asp:RadioButton ID="RadioButton2" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="60 seconds" OnCheckedChanged="RadioButton2_CheckedChanged" /><br />
<asp:RadioButton ID="RadioButton3" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="Never" OnCheckedChanged="RadioButton3_CheckedChanged" />
<br />
Page loaded at <asp:Label ID="OriginalTime" runat="server"></asp:Label>
</div>
</form>
</body>
</html>


VB

<%@ Page Language="VB" AutoEventWireup="true" %>

<!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 id="Head1" runat="server">
<title>Timer Example Page</title>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
OriginalTime.Text = DateTime.Now.ToLongTimeString()
End Sub

Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs)
StockPrice.Text = GetStockPrice()
TimeOfPrice.Text = DateTime.Now.ToLongTimeString()
End Sub

Private Function GetStockPrice() As String
Dim randomStockPrice As Double = 50 + New Random().NextDouble()
Return randomStockPrice.ToString("C")
End Function

Protected Sub RadioButton1_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Timer1.Interval = 10000
Timer1.Enabled = True
End Sub

Protected Sub RadioButton2_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Timer1.Interval = 60000
Timer1.Enabled = True
End Sub

Protected Sub RadioButton3_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Timer1.Enabled = False
End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000" />

<asp:UpdatePanel ID="StockPricePanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
<ContentTemplate>
Stock price is <asp:Label id="StockPrice" runat="server"></asp:Label><BR />
as of <asp:Label id="TimeOfPrice" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<div>
<asp:RadioButton ID="RadioButton1" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="10 seconds" OnCheckedChanged="RadioButton1_CheckedChanged" /><br />
<asp:RadioButton ID="RadioButton2" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="60 seconds" OnCheckedChanged="RadioButton2_CheckedChanged" /><br />
<asp:RadioButton ID="RadioButton3" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="Never" OnCheckedChanged="RadioButton3_CheckedChanged" /><br />
<br />
Page originally created at <asp:Label ID="OriginalTime" runat="server"></asp:Label>
</div>
</form>
</body>
</html>


튜토리얼

Introduction to the Timer Control
Using the Timer Control with Multiple UpdatePanel Controls

클래스 참조

다음 테이블에는 Timer 컨트롤의 주요한 서버 클래스들이 보여집니다.

클래스

설명

Timer

정해진 간격에 비동기 또는 동기적인 웹 페이지의 포스트백을 수행한다.




포스팅을 마치며... ----------------------------------------------------------------------------
Timer 컨트롤은 그나마 번역이 쉬웠다고 생각하는데요... 의역하는 부분에서 좀 더 어렵게 번역이 되었습니다. ㅡㅡ;;




Creative Commons License
저작물크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Posted by 엔틱스

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

글에 대한 내용은 http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=070412144212383&categoryname=ASP.NET+AJAX 를 눌러서 보시기 바랍니다.

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

우선, watermark가 무엇일까요? 사전을 찾아보면 다음과 같이 나옵니다.

[엠파스 - 영한/한영 사전]

1 양수표(量水標), 수위표
2 (종이의) 투명 무늬

[엠파스 - IT 사전]
어떤 파일에 관한 저작권 정보 등을 식별할 수 있도록 디지털 이미지나 오디오 및 비디오 파일에 삽입한 비트 패턴. 디지털 형식으로 된 지적 재산권을 보호하기 위해서 삽입한 것이므로 의도적으로 어느 정도까지는 볼 수 있도록 만드는 것이 일반적이다. 그러나 디지털 워터마크 중에는 전혀 보이지 않게 설계된 것도 있다. 또한 워터마크를 구성하는 실제 비트는 식별되거나 조작되지 않도록 파일 전체에 골고루 퍼져 있어야 하고, 예를 들어 어떤 알고리듬에 의한 축소와 같이 그 파일의 일반적인 변경에 대해 충분히 견딜 수 있도록 견고해야 한다.

어렵네요 ㅡㅡ;; 일반적으로 watermark라고 하면, IT 사전에서 설명한 대로 저작권을 보호하기 위해서, 이미지나 오디오, 비디오 파일에 저작권 정보를 넣는 것을 의미합니다. 그러면, TextBoxWatermark 컨트롤은 TextBox의 저작권을 보호하는 것일까요? 당연히 아니죠^^;; TextBoxWatermark 컨트롤은 사용자가 이 TextBox를 어떻게 사용하도록 유도할 때 사용됩니다. 주로, 대형 포탈 사이트에서 사용자가 검색어를 입력하는 TextBox에 광고를 집어넣어, 사용자에게 노출시키는 효과로 많이 사용하는데요... 여기에서는 G마켓에 워터마크 효과를 적용한 부분을 보도록 하겠습니다.



그림 1. G마켓에 워터마크 효과가 적용된 부분

TextBoxWatermark 컨트롤은 이러한 효과를 개발자가 간단하게 사용할 수 있도록 편의를 제공하는 컨트롤입니다. 그럼, TextBoxWatermark 컨트롤의 속성에 대해서 알아보도록 하겠습니다.

<ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"
TargetControlID="TextBox1"
WatermarkText="Type First Name Here"
WatermarkCssClass="watermarked" />


이탤릭체로 표시된 부분은 옵션으로 사용할 수 있습니다.

먼저, 속성에 대해서 알아보도록 하겠습니다.

1. TargetControlID : TextBoxWatermark 컨트롤을 적용할 TextBox 컨트롤의 ID입니다.

2. WatermarkText : TextBox 컨트롤에 값이 없을 때 TextBox 컨트롤에 보여줄 글을 지정합니다.

3. WatermarkCssClass : TextBox 컨트롤에 값이 없을 때 TextBox 컨트롤에 적용할 CSS 클래스명을 지정합니다.

그럼, TextBoxWatermark 컨트롤에 대한 속성을 알아보았으니, 이제 실제적으로 코드를 작성하여 보도록 하겠습니다.

우선, 다음과 같이 코드를 작성합니다.

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

 

<!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>제목 없음</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="3">

                    TextBoxWatermark Control

                </td>

            </tr>

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

                <td style="width: 1%">

                </td>

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

                    &nbsp;&nbsp;NAME

                </td>

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

                    <asp:TextBox ID="txtName" runat="server" Width="300px"></asp:TextBox>

                </td>

                <td style="width: 1%">

                </td>

            </tr>

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

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

                </td>

            </tr>

        </table>

    </form>

</body>

</html>



웹 폼에 TextBoxWatermark 컨트롤을 적용하기 위한 TextBox 컨트롤을 위치시킨 후, 도구 상자에서 TextBoxWatermark 컨트롤을 웹 폼으로 드래그 앤 드랍합니다. 그리고, 다음과 같이 TextBoxWatermark 컨트롤의 TargetControlID 속성과, WatermarkText 속성을 "txtName"과 "이름을 입력하세요"라고 설정합니다.

        <ajaxToolkit:TextBoxWatermarkExtender

                                                        ID="TextBoxWatermarkExtender1"

                                                        runat="server"

                                                        TargetControlID="txtName"

                                                        WatermarkText="이름을 입력하세요">

        </ajaxToolkit:TextBoxWatermarkExtender>



이제, 브라우저에서 보면 TextBoxWatermark 컨트롤이 적용된 TextBox 컨트롤을 확인할 수 있습니다.



그림 2. TextBoxWatermark 컨트롤이 적용된 TextBox 컨트롤

그리고, TextBox 컨트롤에 마우스를 대면 TextBox 컨트롤에 있던 "이름을 입력하세요"라는 글자가 사라지는 것을 확인할 수 있습니다.



그림 3. TextBox 컨트롤이 포커스되었을 때의 화면

TextBox 컨트롤에 아무 값을 입력하지 않고 웹 페이지의 다른 부분을 누르면 "이름을 입력하세요"라는 글자가 다시 나타나게 되고, 다시 TextBox 컨트롤에 마우스를 클릭하면, 글자가 다시 사라지게 됩니다.

TextBoxWatermark 컨트롤에 대한 설명이 모두 끝났습니다. 정말로 간단하게 사용할 수 있는 컨트롤이 아닌가 싶습니다. 보너스로 WatermarkCssClass 속성을 지정한 TextBox를 보여드리겠습니다.



그림 4. WatermarkCssClass 속성이 지정된 TextBox 컨트롤

그러면, 다음 AJAX 컨트롤의 설명을 기대해 주시기 바랍니다. ^^;;



포스팅을 마치며... ----------------------------------------------------------------------------
TextBoxWatermark 컨트롤.... 정말 쉽네요.... 초초초간단한 컨트롤이네요 ^^;; 하지만, 너무 많이 사용하면, 화면이 정신없이 보일 것 같습니다. 자제가 필요할 듯 합니다...
(TextBoxWatermark 컨트롤의 과다한 남용은 사용자에게 부작용을 줄 수 있습니다. 반드시 PM과 상의하시기 바랍니다. ^^;; 웃자고 한 말인데, 써놓으니깐 썰렁하네요. 죄송합니다. ㅡㅡ;;)




Creative Commons License
저작물크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 엔틱스

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

글에 대한 내용은 http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=070411084111635&categoryname=ASP.NET+AJAX 를 눌러서 보시기 바랍니다.

포스트를 읽기에 앞서...
- 이 포스트는 영문으로 작성되어 제공되어진 것을 제가 제 나름대로 한글로 번역하였습니다.
- 직역보다는 의역에 충실하도록 노력을 하였으며, 충분하게 잘못된 번역이 있을 수 있습니다. 잘못된 번역 부분에 대해서는 덧글로 달아주시면 수정하도록 하겠습니다.
- 이 포스트에는 깔끔하게 번역되지 않은 부분이 있을 수 있습니다. 크게 양해해주시고, 영문 웹 페이지를 참조하시기 바라며, 영문 웹 페이지의 링크에 대한 경로는 필요하지 않은 이상 링크를 추가하지 않았습니다.
- 이 포스트는 단지 번역을 한 것 뿐이며, 모든 저작권에 대해서는 영문 웹 페이지에 명시된 곳에 있습니다.

부분 페이지 렌더링 개요

소개

부분 페이지 렌더링은 포스트백의 결과로써 전체 페이지가 새로고침되는 것에 대한 필요가 없어졌습니다. 대신에, 페이지의 개별적인 부분만 변경시키거나 업데이트됩니다. 그 결과로, 사용자들은 매 포스트백마다 전 페이지를 보지 않아도 되고, 사용자와 웹 페이지와의 상호 교류는 더욱 한결같아졌습니다. Microsoft ASP.NET AJAX는 클라이언트 스크립트를 작성하지 않아도 새로운 또는 존재하는 ASP.NET 웹 페이지로 부분 페이지 렌더링을 추가하는 것을 가능하게 해줍니다.

이 토픽은 다음과 같은 섹션을 포함하고 있습니다.

  1. 시나리오
  2. 특징
  3. 배경
  4. 코드 예제
  5. 클래스 참조

시나리오

ASP.NET AJAX는 기존의 ASP.NET 2.0 응용 프로그램의 확장과 AJAX(Asynchronous JavaScript and XML) 기능을 통합하는 새로운 것을 개발하는 것을 가능하게 해 줍니다. 다음과 같은 사항일 경우 ASP.NET AJAX를 사용하면 됩니다.


  • 풍부하고, 사용자 행동에 바로 반응하고, 전통적 클라이언트 응용 프로그램과 같은 행동을 위한 웹 페이지들의 사용자 경험의 향상을 원할 경우
  • 전체 페이지의 새로고침을 줄이고, 페이지의 깜빡거림을 피하고 싶을 경우
  • 클라이언트 스크립트의 작성 없이 브라우저간 양립성을 가능하게 하고 싶을 경우
  • 클라이언트 스크립트의 작성 없이 클라이언트/서버간 통신을 AJAX 스타일로 수행하기를 원할 경우
  • ASP.NET AJAX 컨트롤 툴킷에서 컨트롤과 컴포넌트를 사용할 경우
  • 일반적인 Microsoft ASP.NET AJAX 컨트롤들을 개발할 경우



부분 페이지 렌더링 특징

부분 페이지 렌더링은 ASP.NET AJAX에 있는 서버 컨트롤과 Microsoft AJAX 라이브러리에 있는 클라이언트 함수에서 응답합니다. ASP.NET AJAX 서버 컨트롤들을 사용할 때 자동적으로 이 기능들이 제공되기 때문에 부분 페이지 렌더링을 가능하게 해 줄 Microsoft AJAX 라이브러리를 사용할 필요는 없습니다. 그러나, 추가적인 AJAX 기능을 위한 클라이언트 라이브러리의 노출된 API들을 사용할 수 있습니다.

ASP.NET AJAX에서 부분 페이지 렌더링을 위해 제공하는 주요 기능은 다음을 포함합니다.


  • ASP.NET 서버 컨트롤들과 같은 작업을 하는 선언적인 모델을 포함합니다. 많은 시나리오에서 단지 선언적인 마크업을 사용함으로 부분 페이지 렌더링을 지정할 수 있습니다.
  • 부분 페이지 업데이트를 위해 요구되는 잠재적인 작업을 수행하는 서버 컨트롤들을 포함합니다. 이것들은 ScriptManager 컨트롤과 UpdatePanel 컨트롤을 포함합니다.
  • 일반적인 작업을 위한 ASP.NET AJAX 서버 컨트롤과 Microsoft AJAX 라이브러리의 통합을 포함합니다. 이 작업들은 사용자들이 포스트백을 취소하는 것과 비동기 포스트백이 이루어지는 동안에 진행 메세지를 보여주는 것과 어떻게 동시적으로 비동기 포스트백을 진행되는지를 결정하는 것을 가능하게 해줍니다.
  • 부분 페이지 렌더링의 에러 핸들링 옵션을 포함하여, 어떻게 브라우저에서 에러를 표시할 것인지를 커스터마이징할 수 있게 합니다.
  • 각 브라우저간 양립성을 포함하여 Microsoft AJAX 라이브러리로 만들어냅니다. 단순하게 서버 컨트롤을 사용하는 것은 자동적으로 정확한 브라우저 기능을 포함합니다.



배경

전형적인 웹 페이지는 페이지에서 사용자 행동(예를 들어 버튼의 클릭같은)에 의해 포스트백을 수행하는 ASP.NET 웹 서버 컨트롤들을 가지고 만듭니다. 응답으로, 서버는 새로운 페이지를 렌더합니다. 종종 다시 렌더링된 컨트롤들과 텍스트는 포스트백 사이에서 변경되지 않습니다.

ASP.NET AJAX 부분 페이지 렌더링으로, 비동기적으로 페이지의 개별적 부분을 새로고침할 수 있고, 사용자에게 바로 반응하는 페이지를 만들 수 있습니다. ASP.NET 웹 서버 컨트롤을 사용하여 부분 페이지 렌더링에 대한 수단을 줄 수 있고, 선택적으로 Microsoft AJAX 라이브러리를 사용하는 클라이언트 스크립트를 작성할 수 있습니다.

부분 페이지 업데이트를 위한 서버 컨트롤들

ASP.NET 웹 페이지에 AJAX 기능을 추가하기 위해서는 업데이트를 원하는 페이지의 개별 부분을 정의해야 합니다. UpdatePanel 컨트롤들 안으로 이들 섹션들의 컨텐츠를 놓을 수 있습니다. UpdatePanel 컨트롤의 컨텐츠들은 HTML 또는 다른 ASP.NET 컨트롤들이 될 수 있습니다. 어느 다른 컨트롤처럼 페이지에 UpdatePanel 컨트롤을 추가할 수 있습니다. 예를 들면, Visual Studio에서 도구상자에서 UpdatePanel 컨트롤을 웹 폼으로 드래그하거나, 페이지에 코드를 선언하는 방법을 사용하여 추가할 수 있습니다. 아래의 예제는 UpdatePanel 컨트롤의 마크업을 보여줍니다.

CS

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- Place updatable markup and controls here. -->
</ContentTemplate>
</asp:UpdatePanel>



VB

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- Place updatable markup and controls here. -->
</ContentTemplate>
</asp:UpdatePanel>



기본적으로, UpdatePanel 안에 있는 컨트롤로부터 시작되는 포스트백들은 자동적으로 비동기 포스트백에 의해서 초기화되고 부분 페이지 업데이트를 발생시킵니다. 또한, UpdatePanel 밖에 있는 컨트롤들이 비동기 포스트백을 발생시키는 것과 UpdatePanel 컨트롤의 컨텐츠들을 새로고침하는 것에 대한 조건을 지정할 수 있습니다. 비동기 포스트백을 유발하는 컨트롤은 트리거로써 지시됩니다. 트리거에 대한 더 많은 정보는 Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls를 보시기 바랍니다.

비동기 포스트백은 동기적인 포스트백처럼 행동합니다. 모든 서버 페이지의 라이프 사이클 이벤트가 발생하고, 뷰 스테이트와 폼의 데이터는 저장됩니다. 그러나, 렌더링 단계에서 단지 UpdatePanel 컨트롤의 컨텐츠만이 브라우저로 보내지게 됩니다. 페이지의 나머지 부분은 변경되지 않은 채로 남아있게 됩니다.

아래의 예제는 포스트백이 패널 안에서 시작할 때는 언제나 컨텐츠가 새로고침되는 UpdatePanel 컨트롤을 보여줍니다.

[실행화면]   [소스보기]

어떻게 UpdatePanel 컨트롤이 부분 페이지 렌더링을 가능하게 해주는지에 대한 더 많은 예제는 코드 예제 섹션에 있는 토픽의 목록을 보시기 바랍니다.

부분 페이지 업데이트를 위한 클라이언트 스크립트 사용하기

Microsoft AJAX 라이브러리에 있는 ECMAScript(JavaScript) PageRequestManager 클래스는 부분 페이지 업데이트를 제공합니다. 이 클래스는 브라우저에서 비동기적인 포스트백의 응답을 관리하고, 개별 범위에서 컨텐츠의 업데이트를 하기 위해 실행됩니다. 이 기능을 사용하기 위해 어떠한 것도 할 필요는 없습니다. 이 클래스는 페이지에 하나 또는 그 이상의 UpdatePanel 컨트롤들과 ScriptManager 컨트롤들을 추가할 때 자동적으로 발생됩니다.

또한, 페이지에 부분 페이지 업데이트를 커스터마이징하기 위한 JavaScript와 PageRequestManager 클래스를 사용할 수 있습니다. 예를 들면, 정의된 비동기 포스트백보다 선행된 스크립트를 작성할 수 있습니다. 또한, 진행 중인 포스트백을 사용자가 취소하게 할 수도 있습니다.

아래의 예제는 페이지의 로딩이 끝날 때 호출되는 이벤트 핸들러를 제공하는 클라이언트 스크립트를 보여줍니다.

CS

<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>



VB

<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>



부분 페이지 렌더링을 위한 Microsoft AJAX 라이브러리를 사용하는 방법에 대한 더 많은 정보는 Working with PageRequestManager EventsPageRequestManager Class Overview를 보시기 바랍니다.

가능한 부분 페이지 렌더링 지원

ScriptManager 컨트롤의 설정된 EnablePartialRendering 속성에 의해 페이지의 부분 페이지 렌더링이 가능할수도 또는 불가능할수도 있습니다. 또한, ScriptManger 컨트롤의 설정된 SupportsPartialRendering 속성에 의해 페이지에 부분 페이지 렌더링을 제공할 것인지에 대한 정의도 가능합니다. 만약 SupportsPartialRendering 속성을 설정하지 않고, EnablePartialRendering 속성을 true로 한다면, 브라우저는 부분 페이지 렌더링이 제공되는지를 결정하게 됩니다.

만약, 부분 페이지 렌더링이 페이지에서 가능하지 않거나, 비활성되거나, 또는 브라우저에서 제공하지 않는다면, 페이지는 대체 행동을 사용합니다. 통상적으로 비동기 포스트백을 수행하는 것 대신에 동기적 포스트백을 수행하고 전체 페이지를 업데이트합니다. 페이지에 있는 어떠한 UpdatePanel 컨트롤도 무시하고, UpdatePanel 컨트롤의 안에 있지 않는 것처럼 컨텐츠를 렌더링합니다.

Note
이전의 렌더링을 위해 구성되었던 ASP.NET 웹 페이지는 ASP.NET AJAX에서는 지원하지 않습니다. 더 많은 정보는 ASP.NET and XHTML를 보시기 바랍니다.



코드 예제

다음의 예제는 부분 페이지 렌더링을 보여줍니다. 2개의 UpdatePanel이 있는데, 한 컨트롤은 사용자가 입력하는 형태이고, 다른 한 컨트롤은 입력된 값의 간략한 정보를 보여줍니다.

[실행화면]   [소스보기]

How-to and Walkthrough Topics



클래스 참조

다음 테이블에는 부분 페이지 렌더링의 주요한 서버 클래스들이 보여집니다.

클래스

설명

UpdatePanel

부분 페이지 업데이트에 참여할 수 있는 웹 페이지 일부분에 명시된 서버 컨트롤

ScriptManager

부분 페이지 렌더링을 관리하는 서버 컨트롤입니다. ScriptManager 컨트롤은 브라우저로 보내기 이한 스크립트 컴포넌트들을 처리합니다. 또한, 페이지가 렌더링될 때 명시된 범위내에서 렌더링하기 위해서 페이지를 오버라이드합니다.

ScriptManagerProxy

스크립트와 웹 서비스 참조를 추가하기 위한 중첩된 컴포넌트(예를 들어 컨텐츠 페이지 또는 사용자 컨트롤)들을 가능하게 하는 서버 컨트롤입니다. 이 컨트롤은 만약 부모 요소에 이미 ScriptManager 컨트롤이 포함되어 있다면 유용하게 사용할 수 있습니다.


다음 테이블에는 부분 페이지 렌더링의 주요한 클라이언트 클래스들이 보여집니다.

클래스

설명

PageRequestManagerClass

클라이언트 부분 페에지 렌더링을 관리하고, 일반적 클라이언트 스크립팅의 멤버들을 노출시킵니다.



포스팅을 마치며... ----------------------------------------------------------------------------
정말로, 번역은 어려운 것이군요~ 뜻이 제대로 전달이나 되고 있는건지 잘 모르겠습니다. OTL....




Creative Commons License
저작물크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 엔틱스

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

글에 대한 내용은 http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=070410004910314&categoryname=ASP.NET+AJAX 를 눌러서 보시기 바랍니다.

AutoComplete 컨트롤

소개

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

AutoComplete 컨트롤은 TextBox 컨트롤에 추가할 수 있는 컨트롤로, TextBox에 글자를 입력할 때 입력된 글자와 접두어가 일치하는 단어들이 표시되는 컨트롤입니다. 이 컨트롤은 어디에 써야 할지 바로 생각이 들지요? 대형 포탈 사이트에서 검색어를 입력할 때 검색어 입력하는 대로 주요 검색어들이 드랍다운 형태로 나타나게 되는 그러한 기능을 사용하고자 할 때 AutoComplete 컨트롤을 사용하면 됩니다.

속성

언제나 마찬가지로, AutoComplete 컨트롤이 가지고 있는 속성부터 알아보도록 하겠습니다.

<ajaxToolkit:AutoCompleteExtender runat="server"
ID="autoComplete1"
TargetControlID="myTextBox"
ServiceMethod="GetCompletionList"
ServicePath="AutoComplete.asmx"
MinimumPrefixLength="2"
CompletionInterval="1000"
EnableCaching="true"
CompletionSetCount="12"/>


이탤릭체의 속성은 옵션으로 사용할 수 있는 속성입니다.

속성에 대한 설명은 다음과 같습니다.

1. TargetControlID : AutoComplete와 연계되는 TextBox 컨트롤의 ID입니다.

2. ServiceMethod : 호출되는 웹 서비스 메소드입니다. 메소드의 형식은 다음과 같습니다.


[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetCompletionList(string prefixText, int count) { ... }


메소드의 명은 변경할 수 있지만, 반환 형식과 파라미터명, 그리고 타입은 정확하게 일치해야 합니다.

3. ServicePath : 완전한 단어 또는 문장을 제공하는 확장자의 웹 서비스의 경로입니다. 제공되지 않을 경우에는 서비스 메소드가 페이지의 메소드로 되어야 합니다.

4. MinimumPrefixLength : 웹 서비스에서 정보를 얻어오기 전에 입력해야 하는 문자의 최소 숫자입니다.

5. CompletionInterval : 웹 서비스를 사용하여 정보를 얻어오는데 걸리는 밀리세컨드 단위의 시간입니다.

6. EnableCaching : 클라이언트 측에서 캐싱을 사용할지의 여부를 지정합니다.

7. CompletionSetCount : 웹 서비스에서 반환되는 정보의 개수입니다.

코드 예제

자, 이제 속성에 대해서 한 번 살펴보았으니, 또 이 속성을 가지고 하나하나씩 적용을 해 보도록 하겠습니다.

웹 페이지를 하나 생성하고 다음과 같이 코드를 작성합니다.

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


<!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>제목 없음</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="600px">

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

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

                    AutoComplete Controls

                </td>

            </tr>

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

                <td style="width: 1%">

                </td>

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

                    &nbsp;&nbsp;단어를 입력하세요. :

                    <asp:TextBox ID="txtText1" runat="server" Width="300px" autocomplete="off"></asp:TextBox>

                </td>

                <td style="width: 1%">

                </td>

            </tr>

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

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

                </td>

            </tr>

        </table>

    </form>

</body>

</html>



이제 도구상자에서 AutoCompleteExtender 컨트롤을 웹 폼으로 드래그 앤 드랍합니다. 그리고, AutoCompleteExtender 의 속성을 다음과 같이 정의합니다.

        <cc1:AutoCompleteExtender

                                            ID="AutoCompleteExtender1"

                                            runat="server"

                                            TargetControlID="txtText1"

                                            ServiceMethod="GetSearchData"

                                            ServicePath="AutoCompleteWebService.asmx"

                                            MinimumPrefixLength="0"

                                            CompletionSetCount="4"

                                            CompletionInterval="1000">

        </cc1:AutoCompleteExtender>



자, 그러면 이제 기본적인 설정은 끝났습니다. 다음으로 이 AutoCompleteExtender 에서 사용할 서비스를 만들어보도록 하겠습니다. 솔루션 탐색기의 웹 사이트에서 우측 마우스를 눌러 새 항목 추가를 눌러서 "웹 서비스"를 선택하고 웹 서비스의 이름을 AutoCompleteWebService라고 합니다. "추가"를 선택합니다.



그림 1. AutoCompleteWebService 웹 서비스 항목 추가

웹 사이트에 AutoCompleteWebService.asmx가 추가된 것을 확인할 수 있고, 또한 App_Code 폴더 밑에 AutoCompleteWebService.cs가 추가된 것을 확인할 수 있습니다.



그림 2. AutoCompleteWebService.asmx와 AutoCompleteWebService.cs 가 각각 추가된 화면

AutoCompleteWebService.asmx 파일을 열어보면 다음과 같이 코드 비하인드 파일의 경로와 클래스가 지정되어 있습니다.

<%@ WebService

    Language="C#"

    CodeBehind="~/App_Code/AutoComplete.cs"

    Class="AutoComplete" %>



이제, ServiceMethod를 만들 차례입니다. "App_Code" 아래에 생성된 AutoCompleteWebService.cs 을 열어서 사용할 GetSearchData 라는 메소드를 만듭니다. 그 전에, AutoCompleteWebService 클래스의 바로 위에 "[System.Web.Script.Services.ScriptService]"라는 속성을 지정해야 정상적으로 작동이 됩니다. 다음은 AutoCompleteWebService.cs 파일의 전체 코드입니다.

using System;

using System.Web;

using System.Collections;

using System.Web.Services;

using System.Web.Services.Protocols;



/// <summary>

/// AutoCompleteWebService의 요약 설명입니다.

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class AutoCompleteWebService : System.Web.Services.WebService {


    public AutoCompleteWebService ()

    {


    }


    [WebMethod]

    public string[] GetSearchData(string prefixText, int count)

    {

        if (count == 0)

        {

            count = 6;

        }

        else if (count > 6)

        {

            count = 6;

        }


        string strSite1 = "네이버";

        string strSite2 = "엠파스";

        string strSite3 = "구글";

        string strSite4 = "다음";

        string strSite5 = "파란";

        string strSite6 = "야후";


        string[] strArray = new string[6];

        strArray[0] = prefixText + strSite1;

        strArray[1] = prefixText + strSite2;

        strArray[2] = prefixText + strSite3;

        strArray[3] = prefixText + strSite4;

        strArray[4] = prefixText + strSite5;

        strArray[5] = prefixText + strSite6;


        return strArray;

    }

}



GetSearchData 메소드를 보시면, 입력한 문자에 이미 지정한 string 배열을 추가하고, string 배열을 리턴한다는 것을 확인하실 수 있습니다.

그럼, 이제 브라우저에서 실행해보면, 글자를 입력하면 GetSearchData 메소드에 의해 반환된 결과가 드랍다운 리스트로 표현되는 것을 보실 수 있습니다.



그림 3. AutoComplete가 적용된 텍스트 박스 컨트롤

이로써, 설명이 모두 끝났습니다. 생각보다 쉽게 사용할 수 있지 않습니까? 속성을 바꾸어가시면서 테스트 해보시기 바랍니다.


포스팅을 마치며... ----------------------------------------------------------------------------
AutoComplete 컨트롤은 제가 생각했던 것 보다 훨씬 쉽게 적용할 수 있었네요. 너무 어렵게만 생각했었나 봅니다. 여러분들도 실무에서 한 번 사용해보시기 바랍니다. ^^;;




Creative Commons License
저작물크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Posted by 엔틱스

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 2012.07.02 15:22
    댓글 주소 수정/삭제 댓글
    글 잘봤습니다~^^
    AutoComplete에 대해서 잘알아 갑니다~

글에 대한 내용은 http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=070405080805986&categoryname=ASP.NET+AJAX 를 눌러서 보시기 바랍니다.

포스트를 읽기에 앞서...
- 이 포스트는 영문으로 작성되어 제공되어진 것을 제가 제 나름대로 한글로 번역하였습니다.
- 직역보다는 의역에 충실하도록 노력을 하였으며, 충분하게 잘못된 번역이 있을 수 있습니다. 잘못된 번역 부분에 대해서는 덧글로 달아주시면 수정하도록 하겠습니다.
- 이 포스트에는 깔끔하게 번역되지 않은 부분이 있을 수 있습니다. 크게 양해해주시고, 영문 웹 페이지를 참조하시기 바라며, 영문 웹 페이지의 링크에 대한 경로는 필요하지 않은 이상 링크를 추가하지 않았습니다.
- 이 포스트는 단지 번역을 한 것 뿐이며, 모든 저작권에 대해서는 영문 웹 페이지에 명시된 곳에 있습니다.

UpdatePanel 컨트롤 개요

소개

ASP.NET UpdatePanel 컨트롤은 풍부하고 고객 중심인 웹 응용 프로그램을 만드는 것을 가능하게 합니다. UpdatePanel 컨트롤을 사용함으로 포스트백에 의한 전 페이지를 새로고침하는 것 대신 페이지 중 선택된 일부분만 새로고침을 할 수 있습니다. 이것은 페이지 중 일부분만 업데이트 작업을 수행하는 것을 의미합니다. ScriptManager 컨트롤과 하나 또는 그 이상의 UpdatePanel 컨트롤들이 포함된 웹 페이지는 고객측의 클라이언트 스크립트 없이도, 자동적으로 부분 페이지의 업데이트에 참여하게 됩니다.

이 토픽은 다음과 같은 정보를 포함하고 있습니다.

  1. 시나리오
  2. 배경
  3. 코드 예제
  4. 클래스 참조

시나리오

UpdatePanel 컨트롤은 웹 페이지가 최종 사용자에게 더 양방향적으로 보이게 만들어야 하는 복잡한 클라이언트 행위를 가진 웹 페이지를 개발하는 데 도움을 주는 서버 컨트롤입니다. 서버와 클라이언트 사이에서 웹 페이지의 특정 부분을 업데이트하기 위해서 보통 깊은 수준의 ECMAScript(Javascript)를 요구하였습니다. 그러나, UpdatePanel 컨트롤을 사용함으로 어떠한 클라이언트 스크립트를 작성할 필요 없이 웹 페이지에서 부분 페이지만 업데이트하는 것이 가능하게 되었습니다. 원한다면, 클라이언트의 사용자 환경을 향상시키기 위해 일반적인 클라이언트 스크립트를 추가할 수도 있습니다. UpdatePanel 컨트롤을 사용할 때, 페이지의 행동은 브라우저에 독립적이고, 클라이언트와 서버 사이에 전송되는 데이터의 양을 잠재적으로 감소시킬 수 있습니다.

배경

UpdatePanel 컨트롤은 전체 웹 페이지의 새로고침 없이 업데이트될 수 있는 특정 범위에서 작업합니다. 이 프로세스는 ScriptManager 서버 컨트롤과 PageRequestManager 클래스에 의해 공동으로 처리됩니다. 부분 페이지의 업데이트가 가능할 때, 컨트롤들은 비동기적으로 서버로 게시됩니다. 비동기적인 포스트백 행동은 페이지와 컨트롤의 생명 주기가 완료될 때의 통상적인 포스트백과 같습니다. 그러나, 비동기 포스트백에서, 페이지에서 UpdatePanel 컨트롤에 둘러쌓인 페이지의 범위만 업데이트됩니다. 서버는 브라우저로 단지 영향받은 요소들만을 HTML 마크업 형태로 보냅니다. 브라우저에서, PageRequestManager 클래스는 업데이트된 마크업으로 기존의 HTML을 교체하는 작업인 Document Object Model(DOM) 조정을 수행합니다. 아래의 그림은 첫번째에 페이지를 로드할 때와 그 다음 비동기 포스트백이 UpdatePanel 컨트롤의 내용을 새로고침하는 것을 보여줍니다.



그림 1. Partial-page rendering overview

부분 페이지의 업데이트를 가능하게 하기

UpdatePanel 컨트롤은 웹 페이지에서 ScriptManager 컨트롤을 필요로 합니다. 기본적으로, 부분 페이지의 업데이트는 ScriptManager 컨트롤의 EnablePartialRendering 속성이 기본값인 true이기 때문에 가능합니다. 아래의 예제는 페이지에 ScriptManager 컨트롤과 UpdatePanel 컨트롤을 정의하는 것을 보여줍니다. UpdatePanel 컨트롤은 클릭했을 때 패널 안에 있는 내용이 새로고침되는 Button 컨트롤을 포함하고 있습니다. 기본적으로 ChildrenAsTriggers 속성은 true입니다. 그러므로, Button 컨트롤은 비동기 포스트백 컨트롤인 것처럼 행동합니다.

[실행화면]   [소스보기]

UpdatePanel 컨트롤의 컨텐츠를 열거하기

UpdatePanel 선언적인 컨트롤 또는 ContentTemplate 속성을 사용한 디자이너에서 컨텐츠를 추가합니다. 이 속성은 <ContentTemplate> 마크업 태그로써 표현됩니다. 프로그래밍적으로 컨텐츠를 추가하기 위해서는 ContentTemplateContainer 속성을 사용해야 합니다.

하나 또는 그 이상의 UpdatePanel 컨트롤들이 포함된 웹 페이지가 첫번째 렌더링될 때, UpdatePanel의 모든 컨텐츠들은 렌더링되고 브라우저로 보내지게 됩니다. 비동기 포스트백에 이어서, 개별적 UpdatePanel 컨트롤들의 컨텐츠가 업데이트될 것입니다. 포스트백을 유발하는 요소들을 가진 패널의 세팅과 각 패널에 명시된 코드에 의존되어 업데이트 됩니다.

UpdatePanel Triggers 열거하기

기본적으로, UpdatePanel 컨트롤 안에 있는 어떠한 포스트백 컨트롤은 비동기 포스트백을 유발하고 패널의 컨텐츠를 새로고침합니다. 그러나, 또한 UpdatePanel 컨트롤을 새로고침하는 페이지상의 다른 컨트롤들을 구성할 수 있습니다. 그것은 UpdatePanel의 트리거를 정의함으로써 사용할 수 있습니다. 트리거는 패널을 업데이트하기 위해 유발시키는 포스트백 컨트롤과 이벤트를 정의합니다. 트리거 컨트롤의 명시된 이벤트가 발생할 때(예를 들어, Button의 Click 이벤트), 업데이트 패널은 새로고침됩니다.

아래의 예제는 UpdatePanel 컨트롤에서 트리거를 어떻게 정의하는지를 보여줍니다.

[실행화면]   [소스보기]

트리거는 UpdatePanel 컨트롤의 <Triggers> 요소안에 <asp:AsyncPostBackTrigger>로 정의됩니다. (만약, Visual Studio에서 페이지를 수정한다면, UpdatePanelTrigger Collection Editor 대화 상자를 사용하여 트리거를 만들 수 있습니다.)

트리거의 컨트롤 이벤트는 선택적입니다. 만약, 어떠한 이벤트도 명시되지 않으면, 트리거 이벤트는 컨트롤의 기본 이벤트가 됩니다. 예를 들어 Button 컨트롤의 기본 이벤트는 Click 이벤트입니다.

어떻게 UpdatePanel 컨트롤들이 새로고침되는가?

아래의 리스트는 부분 페이지의 렌더링 동안 패널의 컨텐츠가 업데이트 될 때 결정하는 Updatepanel 컨트롤의 속성 설정을 묘사한 것입니다.

  • 만약 UpdateMode 속성이 Always로 설정이 되어 있다면, 페이지의 어디에서나 매번 포스트백을 시작시켜 UpdatePanel 컨트롤의 컨텐츠가 업데이트됩니다. 이것은 다른 UpdatePanel 컨트롤들 안에 있는 컨트롤들에서의 비동기 포스트백과 UpdatePanel 컨트롤의 안에 없는 컨트롤들에서의 비동기 포스트백을 포함합니다.

  • 만약 UpdateMode 속성이 Conditional로 설정이 되어 있다면, UpdatePanel의 컨트롤의 컨텐츠는 아래의 사항 중 하나가 true일 때 업데이트됩니다.
       
  • UpdatePanel 컨트롤의 트리거에 의해 포스트백이 발생될 때
       
  • UpdatePanel 컨트롤의 Update() 메소드를 명시적으로 호출할 때
       
  • UpdatePanel 컨트롤이 다른 UpdatePanel 컨트롤 안으로 중첩되어 부모의 Panel이 업데이트될 때
       
  • ChildrenAsTriggers 속성이 true 이고 UpdatePanel 컨트롤의 어떠한 자식 컨트롤이 포스트백을 유발할 때. 중첩된 UpdatePanel 컨트롤의 자식 컨트롤들은 부모 패널의 트리거에서 명시적으로 정의하지 않는 이상은 UpdatePanel 컨트롤 밖의 업데이트를 유발하지 않습니다.

    만약 ChildrenAsTriggers 속성이 false로 설정되고 UpdateMode 속성이 Always로 설정되면, 예외가 던져집니다. ChildrenAsTriggers 속성은 UpdateMode 속성이 Conditional 로 설정되었을 때만 사용할 수 있습니다.

    마스터 페이지에서 UpdatePanel 컨트롤들을 사용하기

    마스터 페이지에서 UpdatePanel 컨트롤을 사용하기 위해서는 어떻게 ScriptManager 컨트롤을 포함할 것인지를 결정해야 합니다. 만약, 마스터 페이지에 ScriptManager 컨트롤을 포함시킨다면, 모든 컨텐츠 페이지들에 ScriptManager 컨트롤로써 실행될 수 있습니다. (만약 컨텐츠 페이지에서 선언적으로 스크립트들 또는 서비스들을 등록하기를 원한다면, 컨텐츠 페이지에 ScriptManagerProxy 컨트롤을 추가해야 합니다.)

    만약, 마스터 페이지가 ScriptManager 컨트롤을 포함하지 않는다면, UpdatePanel 컨트롤을 포함하는 각 컨텐츠 페이지마다 개별적으로 ScriptManager 컨트롤들을 추가해야 합니다. 이 디자인 선택은 어떻게 응용프로그램에서 클라이언트 스크립트를 관리하는가에 의존되어 있습니다. 어떻게 클라이언트 스크립트를 관리하는지에 대한 더 많은 정보는 ScriptManager Control Overview를 보도록 하십시요. 마스터 페이지에 대한 더 많은 정보는 ASP.NET Master Pages Overview를 보도록 하십시요.

    만약, 마스터 페이지에 ScriptManager 컨트롤이 있고 컨텐츠 페이지의 부분 페이지을 렌더링하는 기능이 필요하지 않는다면, 컨텐츠 페이지에서 프로그래밍적으로 ScriptManager 컨트롤의 EnablePartialRendering 속성을 false로 설정합니다.

    아래의 예제는 마스터 페이지와 컨텐츠 페이지에 있는 ScriptManager 컨트롤의 마크업을 보여줍니다. 이 예제에서, LastUpdate라는 속성은 마스터 페이지에 정의되어 있고, UpdatePanel 컨트롤의 안에서 참조하게 되어 있습니다.

    [실행화면]   [소스보기]

    중첩된 UpdatePanel 컨트롤들을 사용하기

    UpdatePanel 컨트롤들은 중첩될 수 있습니다. 만약 부모 패널이 새로고침된다면, 모든 중첩된 패널들 또한 새로고침됩니다.

    아래의 예제는 다른 UpdatePanel 컨트롤 안에 있는 UpdatePanel 컨트롤이 정의된 마크업을 보여줍니다. 부모 패널 트리거에 있는 Button은 부모와 자식의 패널의 컨텐츠를 업데이트합니다. 자식 패널 트리거에 있는 Button은 단지 자식 패널의 컨텐츠만을 업데이트 합니다.

    [실행화면]   [소스보기]

    아래의 예제는 GridView 컨트롤에서 중첩된 UpdatePanel 컨트롤을 보여줍니다. GridView 컨트롤은 UpdatePanel 컨트롤 안에 있으며, 각 GridView 행은 다른 UpdatePanel 컨트롤 안에 있는 중첩된 GridView 컨트롤을 포함하고 있습니다.

    [실행화면]   [소스보기]

    안쪽의 GridView 컨트롤이 새로운 페이지로 표시될 때, 바깥쪽의 패널과 바깥쪽의 GridView 컨트롤의 다른 행들은 새로고침되지 않습니다. 바깥쪽의 GridView 컨트롤이 새로운 페이지로 표시될 때 바깥쪽의 패널과 중첩된 패널들은 모두 새로고침됩니다.

    프로그래밍적으로 UpdatePanel을 새로고침하기

    아래의 예제는 프로그래밍적으로 UpdatePanel 컨트로을 어떻게 새로고침하는 지를 보여줍니다. 이 예제에서, 페이지는 RegisterAsyncPostBackControl(Control)를 호출하는 트리거로 실행됩니다. 프로그래밍적으로 Update() 메소드를 호출하는 UpdatePanel 컨트롤을 사용하는 이 코드로 페이지를 새로고침할 수 있습니다.

    [실행화면]   [소스보기]

    프로그래밍적으로 UpdatePanel을 만들기

    페이지에 프로그래밍적으로 UpdatePanel 컨트롤을 추가하기 위해서 UpdatePanel 컨트롤의 새로운 인스턴스를 만듭니다. 그리고, ContentTemplateContainer 속성과 Add(Control) 메소드를 사용하여 컨트롤을 추가합니다. 직접 ContentTemplate 속성으로 컨트롤을 추가할 수는 없습니다.

    UpdatePanel 컨트롤이 프로그래밍적으로 추가되었을 때, UpdatePanel 컨트롤이 트리거로써 사용될 수 있는 동일한 이름의 컨테이너에 있는 컨트롤에서만 포스트백됩니다.

    아래의 예제는 어떻게 프로그래밍적으로 페이지에 UpdatePanel 컨트롤을 추가하는지를 보여줍니다. 예제는 ContentTemplateContainer 속성을 사용하여 UpdatePanel 컨트롤로 Label 컨트롤과 Button 컨트롤을 추가합니다. 기본적으로 ChildrenAsTriggers 속성이 true이기 때문에, 패널의 트리거로써 Button 컨트롤이 실행됩니다.

    [실행화면]   [소스보기]

    UpdatePanel 컨트롤과 사용하지 못하는 컨트롤들

    부분 페이지의 업데이트를 사용하지 못하는 ASP.NET 컨트롤들이 있기에 UpdatePanel 컨트롤 안에 사용할 수 없습니다.
  • TreeView와 Menu 컨트롤
  • 웹 파트 컨트롤. 더 많은 정보는 ASP.NET Web Parts Controls를 보도록 하십시요.
  • 비동기 포스트백의 일부분으로써 파일 업로드에 사용되는 FileUpload 컨트롤
  • EnableSortingAndPagingCallbacks 속성이 true로 설정된 GridView와 DetailView 컨트롤. 기본값은 false입니다.
  • 수정할 수 있는 템플릿로 변환할 수 없는 컨텐츠를 가진 Login, PasswordRecovery, ChangePassword, CreateUserWizard 컨트롤들
  • Subsitution 컨트롤
  • BaseCompareValidator, BaseValidator, CompareValidator, CustomValidator, RangeValidator, RegularExpressionValidator, RequiredFieldValidator, ValidationSummary와 같은 Validation 컨트롤들

    부분 페이지의 렌더링과 사용하지 못하는 컨트롤들은 UpdatePanel 컨트롤의 외부에서 사용될 수는 있습니다. 덧붙여서, 몇 가지 경우 부분 페이지의 업데이트와 사용하지 못하는 컨트롤들을 특정한 방법으로 만들어 사용할 수는 있습니다. 예를 들어, 만약 Login, ChangePassword, PasswordRecovery 컨트롤들의 컨텐츠를 템플릿으로 변환할 수 있다면, UpdatePanel 컨트롤의 안에 Login, ChangePassword, PasswordRecovery 컨트롤들을 사용할 수 있습니다. (만약, Visual Studio를 사용한다면 디자인 뷰에서 스마트 메뉴 명령 예를 들면 템플릿으로 변환 등을 사용하여 컨트롤들을 변환할 수 있습니다.) 이 컨트롤들을 수정 가능한 템플릿으로 변환하면, 유효성 컨트롤들은 페이지에서 명시적으로 마크업으로 정의된 컨트롤에서 사용됩니다. UpdatePanel 컨트롤과 사용할 수 있는 유효성을 만들기 위해서, EnableClientScript 속성을 false로 설정합니다. 이것은 브라우저에서 유효성 검사를 수행할 때 일반적으로 사용되는 클라이언트 스크립트에 접근하지 않게 합니다. 그 결과, 비동기 포스트백이 발생하는 동안 유효성은 서버에서 유효성 검사를 수행합니다. 그러나, UpdatePanel의 컨텐츠만이 새로고침되기 때문에, 유효성은 보통 클라이언트 스크립트에 의해 제공되는 직접적인 피드백의 일부분만을 제공할 수 있습니다.

    UpdatePanel 컨트롤 안에서 FileUpload 컨트롤을 사용하기 위해서는, 패널의 PostBackTrigger에 의해 파일을 전송할 수 있도록 포스트백 컨트롤을 설정합니다.

    다른 모든 컨트롤들은 UpdatePanel 컨트롤 안에서 동작합니다. 그러나, 어떠한 상황에서는 컨트롤은 UpdatePanel 컨트롤 안에서의 동작을 기대할 수 없습니다. 이 상황은 다음과 같습니다.

  • ClientScriptManager 컨트롤에 등록된 메소드들을 호출하는 스크립트인 경우
  • Write(String) 메소드를 호출하는 것과 같은 컨트롤의 렌더링동안 직접적으로 스크립트 또는 마크업을 렌더링하는 경우

    만약 컨트롤이 ClientScriptManager 컨트롤에 등록된 메소드의 스크립트를 호출한다면, 대신 ScriptManager 컨트롤에 등록된 메소드의 스크립트에 대한 응답을 사용할 수 있습니다. 이 경우, 컨트롤은 UpdatePanel 컨트롤 안에서 동작할 것입니다.

    코드 예제

    다음은 어떻게 UpdatePanel 컨트롤을 만들고 사용하는지에 대한 예제가 포함된 섹션의 목록입니다.



    클래스 참조

    아래의 테이블에는 UpdatePanel 컨트롤의 주요한 서버 클래스들이 보여집니다.

    클래스

    설명

    UpdatePanel

    부분 페이지 업데이트에 참여할 수 있는 웹 페이지 일부분에 명시된 서버 컨트롤

    ScriptManager

    부분 페이지 렌더링을 관리하는 서버 컨트롤입니다. ScriptManager 컨트롤은 브라우저로 보내기 이한 스크립트 컴포넌트들을 처리합니다. 또한, 페이지가 렌더링될 때 명시된 범위내에서 렌더링하기 위해서 페이지를 오버라이드합니다.

    ScriptManagerProxy

    스크립트와 웹 서비스 참조를 추가하기 위한 중첩된 컴포넌트(예를 들어 컨텐츠 페이지 또는 사용자 컨트롤)들을 가능하게 하는 서버 컨트롤입니다. 이 컨트롤은 만약 부모 요소에 이미 ScriptManager 컨트롤이 포함되어 있다면 유용하게 사용할 수 있습니다.

    PageRequestManager

    브라우저에서 부분 페이지 렌더링에 협조하는 Microsoft AJAX 라이브러리에 있는 클래스입니다. PageRequestManager 클래스는 비동기적으로 서버와 정보를 교환하고 일반적 클라이언트 스크립트 개발을 위한 이벤트와 메소드를 드러내게 합니다.



    포스팅을 마치며... ----------------------------------------------------------------------------
    아, 역시 아무리 생각해도 번역은 OTL 인 것 같네요. ㅡㅡ;; 그래도 조금씩 나아지고 있는듯???




    Creative Commons License
    저작물크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
  • Posted by 엔틱스

    댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절


    BLOG main image
    닷넷을 좀 더 알고싶어하는 프로그래머로 성장하는 한 사람의 블로그입니다. http://www.neostyx.net 사이트도 동시에 운영하고 있으니, 많은 방문 부탁드립니다. by 엔틱스

    공지사항

    카테고리

    분류 전체보기 (26)
    Personal Thought (1)
    Dev Study(.Net) (3)
    ASP.NET AJAX (21)
    Total : 38,864
    Today : 0 Yesterday : 0