본문 바로가기

Programming/.NET

[ASP.NET] 서버 컨트롤 - 3 (스크립트처리)

서버 컨트롤을 통해 페이지 하단에 스크립트를 출력하려면 RegisterStartupScript 메소드를 사용합니다.

 

protected override void OnPreRender(EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(typeof(Page), "alert", "alert('aaa');", true);
}

 

RegisterStartupScript 메소드를 사용할때는 두번째 인자에 스크립트 식별키를, 세번째 인자에 스크립트 본체를 전달합니다. 식별키는 등록하려는 스크립트를 구분하기 위한 키로서 IsStartupScriptRegistered 메소드등으로 특정 스크립트가 등록되어 있는지 여부를 확인할 수 있는 방법을 제공합니다.

 

네번째 인자에는 true값을 주었는데 이러한 값을 전달해야만 스크립트등록시 <script>구문을 추가하여 스크립트가 정상적으로 작동될 수 있도록 합니다.

 

protected override void OnPreRender(EventArgs e)
{
    Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "alert", "alert('aaa');", true);
}

 

이 예제는 스크립트 등록을 위한 메소드를 RegisterClientScriptBlock 메소드로 바꾼것인데 이 메소드는 스크립트를 Form요소 다음의 페이지 상단에 배치합니다.

 

만약 HTML페이지 내에서 서버 컨트롤에서 추가시키는 스크립트를 호출하는 부분이 존재한다면

RegisterClientScriptBlock 메소드를 사용해야 합니다. 페이지 상단에 미리 스크립트가 등록되어 있어야 뒤이어 오는 스크립트 호출부분이 정상적으로 처리될 수 있을 것입니다.

 

protected override void RenderContents(HtmlTextWriter output)
{
    output.AddAttribute("OnClick", "javascript:cal(10, 20);");

    output.RenderBeginTag(HtmlTextWriterTag.Div);
    output.Write(Text);
    output.RenderEndTag();
}

protected override void OnPreRender(EventArgs e)
{
    Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "alert", "var cal = function(i, j) { i = i + j; alert(i);};", true);
}

 

참고로 서버 컨트롤에서 간단하게 위와 같이 직접 스크립트를 등록할 수 있지만 내용이 많은 경우 하나의 파일로 저장하고 이 파일(js파일)을 포함시킬 수 있습니다.

 

protected override void OnPreRender(EventArgs e)
{
    Page.ClientScript.RegisterClientScriptInclude("myScript", "sample.js");
}

 

ASP.NET에서는 서버와의 처리를 AJAX로 구현할 수 있는 클라이언트 콜백을 사용할 수 있습니다.

 

2014/02/12 - [Programming/.NET] - [ASP.NET] 클라이언트 콜백(Client Callback)


서버 컨트롤도 마찬가지 인데 컨트롤도 위와 같은 클라이언트 콜백을 구현할 수 있습니다.

 

public class WebCustomControl1 : WebControl, ICallbackEventHandler

 

우선 서버컨트롤에 ICallbackEventHandler 인터페이스를 구현합니다. 이 인터페이스는 RaiseCallbackEvent 와 GetCallbackResult 메소드를 구현해야 합니다.

 

string name;
public void RaiseCallbackEvent(string param)
{
    if (param == "error") {
        throw new Exception("잘못된 이름입니다.");
    }

    name = param + "님 반갑습니다.";
}

public string GetCallbackResult()
{
    return name;
}

 

RaiseCallbackEvent 메소드에는 실제 서버에서 작업이 처리되는 부분이며 GetCallbackResult 메소드는 어떤 결과를 클라이언트에 반환하는 역활을 수행합니다. 예제로는 RaiseCallbackEvent 에서 특정 값을 전달받아 '님 반갑습니다.'라는 메세지를 붙이며 만약 전달값이 'error'면 임의로 예외가 발생하도록 하였습니다. GetCallbackResult 에서는 RaiseCallbackEvent 에서 작업한 결과를 반환합니다.

 

protected override void RenderContents(HtmlTextWriter output)
{
    output.AddAttribute("OnClick", "javascript:hello('anchor37 ');");
    output.RenderBeginTag(HtmlTextWriterTag.Div);
    output.Write(Text);
    output.RenderEndTag();
}

protected override void OnPreRender(EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(typeof(Page), "hello", "var hello = function (param) { " + Page.ClientScript.GetCallbackEventReference(this, "param", "CallbackHandler", null, "ErrorHandler", true) + " };", true);
}

 

RenderContents 에서 Hello라는 스크립트 함수를 호출합니다. 이 스크립트는 OnPreRender 메소드의 RegisterStartupScript 로 등록되며 GetCallbackEventReference 메소드에서 함수 실행 본체를 서버에서 처리할 수 있도록 클라이언트와 서버처리를 결합시킵니다. 이 때 두번째 함수의 인자에 전달될 클라이언트측 변수값(param)을 지정하고 세번째인자에 정상처리될 경우의 스크립트를, 다섯번째인자에 오류가 발생했을 경우의 스크립트를 등록해야 합니다.

 

<script type="text/javascript">
    var CallbackHandler = function (args, ctx) {
        alert(args);
    };

    var ErrorHandler = function (args, ctx) {
        alert(args);
    };
</script>

 

위 GetCallbackEventReference 메소드로 등록했던 스크립트입니다. 일단 클라이언트에서 hello 메소드가 호출되면 서버의 RaiseCallbackEvent 메소드가 실행되며 정상처리되었을 경우 클라이언트의 CallbackHandler 메소드를 호출해 '~님 반갑습니다.'라는 내용을 args에 넘겨주게 됩니다.

 

만약 이 과정에서 오류가 발생하면 '잘못된 이름입니다.'라는 메세지를 ErrorHandler 메소드를 표시할 것입니다.