Programming/.NET

일반적인 경우 클라이언트에서 서버에 포스트백(Post back) 요청이 들어올때 IPostbackEventHandler 인터페이스에서는 아래 단계를 거치며 페이지를 표시하게 됩니다.

2013/12/31 - [Programming/ASP.NET] - [ASP.NET] 페이지 이벤트(Event) 종류및 순서

만약 표시할 내용이 페이지 전체 중 작은 특정 부분에만 속한다면 페이지 전체를 다시 요청해 가져오는 기존의 방법보다는 필요한 것만 가져와 원하는 부분만 갱신할 수 있는 방법을 쓰는것이 효휼적일 수 있습니다.

그 대안으로 사용되는 클라이언트 콜백(Client Callback)은 자바스크립트(javascript)를 통해 데이터를 요청하고 받음으로서 클라이언트에게 좀더 신속하고 자연스러운 페이지 변화를 제공할 수 있습니다. 실제로 기존의 처리방법과 비교해 보면 몇가지 절차가 제외되어 있음을 알 수 있습니다.

 Init

 Load State

 Process Postback Data

 Load

 Callback Event

 Unload
▶ 콜백 사용시 페이지 처리 순서

우선 간단한 클라이언트 콜백 예제로 페이지에 특정 문자열을 표시하기 위해 버튼과 라벨 두개의 서버 컨트롤을 배치하겠습니다.
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>&nbsp;<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return hello()" />
그리고 버튼에는 OnClientClick 속성을 사용하여 버튼클릭 이벤트를 처리할 자바스크립트함수를 지정하고 해당 함수를 다음과 같이 작성합니다.
<script type="text/javascript">
    var hello = function () {
        hello_callback();
        return false;
    }

    var hello_return = function (data, context) {
        $('#<%= Label1.ClientID %>').text(data);
    }
</script>
hello 함수는 버튼클릭시 호출될 함수이고 아래 함수(hello_return)는 결과를 받아 실제 내용을 표시하는 함수인데 hello 안에 hello_callback 함수의 경우 아래와 같이 Page_Load 부분에서 GetCallbackEventReference 메서드를 사용해 콜백 스크립트를 생성하고 RegisterClientScriptBlock 으로 해당 스크립트를 등록하도록 하였습니다.
protected void Page_Load(object sender, EventArgs e)
{
    string cb_reference = Page.ClientScript.GetCallbackEventReference(this, "arg", "hello_return", "context");
    string cb_script = "function hello_callback(arg, context) {" + cb_reference + "}";

    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "hello_callback", cb_script, true);
}

이 함수가 실제 클라이언트 콜백기능을 수행하는 함수로서 hello_callback 안에서 hello_return 함수를 콜백으로 등록합니다. 그리고 클라이언트 콜백이벤트가 발생하면 실제 클라이언트에게 제공할 데이터를 생성하는 RaiseCallbackEvent 메서드와 생성된 값을 제공하는 GetCallbackResult 메서드를 작성해야 합니다.

public void RaiseCallbackEvent(string data)
{
    hello_return = "안녕하세요.";
}

public string GetCallbackResult()
{
    return hello_return;
}
이들 함수는 ICallbackEventHandler 인터페이스를 통해 구현됩니다.
public partial class test : System.Web.UI.Page, ICallbackEventHandler

RaiseCallbackEvent 에서 hello_return 변수에 '안녕하세요.'라는 문자열을 지정하고 GetCallbackResult 에서 이 변수값을 반환하고 있습니다. 실제 반환된 변수는 이미 페이지에 정의된 hello_return 자바스크립트 함수를 통해 data 메개변수로 전달되므로 결과적으로 Label 의 표시값이 '안녕하세요.'로 바뀔것입니다.

특히 RaiseCallbackEvent 부분을 보면 매개변수로 data 라는 문자열값을 받는 부분을 볼 수 있는데 필요하다면 이 매개변수를 활용해 클라이언트측에서 전달되어 오는 특정 문자열값을 받아 처리할 수 있도록 구현이 가능합니다.

var hello = function () {
    hello_callback('hoon', '');

    return false;
}
그러기 위해서는 위와같이 콜백처리될 함수부분에 원하는 매개변수를 추가하기만 하면 됩니다. 그러면 해당 내용은 RaiseCallbackEvent 에서 지정한 data 로 전달되고 아래와 같이 원하는 처리를 구현할 수 있게 됩니다.
public void RaiseCallbackEvent(string data)
{
    hello_return = data + "님 안녕하세요.";
}
실제 확인해 보지는 않았지만 클라이언트 콜백은 XmlHTTP 를 지원하는 브라우저에서만 사용이 가능한것으로 보입니다. 이 말은 클라이언트 콜백을 그대로 사용할 수 없는 브라우저도 존재한다는 말인데 실제 클라이언트 측 브라우저에서의 지원 여부는 SupportsCallback 과 SupportsXmlHttp 속성을 통해 확인이 가능합니다.
if (!Page.Request.Browser.SupportsCallback || !Page.Request.Browser.SupportsXmlHttp) {
    Response.Write("해당 브라우저는 클라이언트 콜백 기능을 지원하지 않습니다.");
}

'Programming > .NET' 카테고리의 다른 글

[ASP.NET] ImageMap  (0) 2014.02.17
[ASP.NET] Image  (0) 2014.02.13
[ASP.NET] 클라이언트 콜백(Client Callback)  (0) 2014.02.12
[ASP.NET] CheckBox  (0) 2014.02.11
[ASP.NET] HtmlGenericControl  (0) 2014.02.10
[ASP.NET] HiddenField  (0) 2014.02.06
0 0