.NET Code Behind에서 클라이언트 스크립트 제어하기

이전 글에서 클라이언트의 JavaScript를 다루기 위한 몇 가지 방법을 알아보았습니다. 하지만 이들은 모두 aspx 또는 ascx에 직접 작성하기 때문에 기존 asp에서처럼 소스 재사용의 어려움과 화면 구현부분과 로직 부분의 분리가 힘든 방법입니다. 지금부터는 직접적인 스크립트 작성 방법이 아닌 Code Behind 부분에서 클라이언트 스크립트를 제어하는 방법을 알아보도록 합시다.

 

 

 

① 사용자 정의 컨트롤의 스크립트 코드 사용의 문제점

 

앞서 사용자 정의 컨트롤에서 JavaScript의 원활한 동작을 위하여 ascx 파일에 스크립트 코드를 작성하였습니다. 그러나 이렇게 작성하는 방법에서 문제가 발생할 수 있습니다. 바로 해당 컨트롤을 한 페이지에서 여러 번 사용했을 경우입니다. 앞서 작성한 ClientID_03.ascx를 두 번 사용하여 웹 폼 페이지를 만든 후 HTML에 출력되는 코드를 살펴보면 ascx에서 사용한 JavaScript가 동일한 함수 명으로 중복되어 출력하는 것을 확인할 수 있을 것입니다. 이렇게 중복 출력됨으로써 실행 결과도 원하는 결과가 나오지 않습니다. 다음의 코드와 결과를 살펴봅시다.

 

 

■ CodeBehind.aspx의 HTML 출력 결과

------------------------------------------------------------------------

function GetTextBox()

{

           alert("텍스트 박스 :  " + document.all["ClientID_031_TextBox1"].value);

}

</script>

<input name="ClientID_031:TextBox1" type="text" id="ClientID_031_TextBox1" />

<INPUT type="button" value="텍스트 박스 확인" onclick="GetTextBox();">

 

<script>

function GetTextBox()

{

           alert("텍스트 박스 :  " + document.all["ClientID_032_TextBox1"].value);

}

</script>

<input name="ClientID_032:TextBox1" type="text" id="ClientID_032_TextBox1" />

<INPUT type="button" value="텍스트 박스 확인" onclick="GetTextBox();">

------------------------------------------------------------------------

 

실행결과를 살펴봅시다. HTML 코드에서 보듯이 동일한 함수 이름의 GetTextBox()가 있기 때문에 첫 번째 컨트롤의 버튼을 클릭하더라도 두 번째 있는 함수가 실행되어 잘못된 결과가 출력됩니다.

 

 

 

② RegisterClientScriptBlock 메서드 사용하기

 

앞의 경우처럼 클라이언트 스크립트들의 문제를 해결하기 위해서 ASP.NET은 System.Web.UI.Page 클래스에서 몇 가지 메서드들을 제공하고 있습니다. 그 첫 번째로 RegisterClientScriptBlock 메서드로 Page로 해당 클라이언트 스크립트 출력을 지원합니다.

 

------------------------------------------------------------------------

public virtual void RegisterClientScriptBlock(

   string key,                     // 스크립트 블록을 식별하는 고유 키입니다

   string script                   // 클라이언트에 보낸 스크립트의 내용입니다

);

------------------------------------------------------------------------

 

클라이언트쪽 스크립트는 Page 개체에 있는 <form runat= server> 요소의 여는 태그 바로 앞으로 내보내집니다. 스크립트 블록은 출력을 렌더링하는 개체가 정의될 때 내보내지므로 <script> 요소의 여는 태그와 닫는 태그를 모두 포함해야 하고, 같은 key 매개 변수가 있는 스크립트 블록은 중복된 것으로 간주됩니다.

 

함께 사용할 수 있는 메서드로 IsClientScriptBlockRegistered가 있으며 스크립트의 등록 여부를 검사합니다.

 

이 메서드들을 이용하여 Code Behind 페이지에서 스크립트를 제어하는 예제를 살펴봅시다. 다음의 코드를 참고하세요.

 

■ ClientScript.ascx

------------------------------------------------------------------------

<asp:TextBox id="ClientTextBox" runat="server"></asp:TextBox>

<asp:Button id="GetTextButton" runat="server" Text="확 인"></asp:Button>

------------------------------------------------------------------------

 

■ ClientScript.ascx.cs

------------------------------------------------------------------------

private void Page_Load(object sender, System.EventArgs e)

{

             // 여기에 사용자 코드를 배치하여 페이지를 초기화합니다.

             GetTextButton.Attributes.Add(onClick", "GetTextBoxValue('" + ClientTextBox.ClientID + "')");

 

             if (!Page.IsClientScriptBlockRegistered("clientScript"))

             {

                           string clientScript =@"

                                                     <script language=javascript>

                                                     <!--

                                                     function GetTextBoxValue(id)

                                                     {

                                                        alert('텍스트박스 입력값은 ' + document.all[id].value + ' 입니다.');

                                                     }

                                                     //-->

                                                     </script>

                                                     ";

                           Page.RegisterClientScriptBlock("clientScript", clientScript);

             }

}

------------------------------------------------------------------------

 

사용자 정의 컨트롤을 추가한 다음 텍스트 박스와 버튼을 하나씩 추가합니다. cs 파일의 Page_Load 부분에 버튼의 Attributes와 스크립트 등록을 위한 메서드를 추가합니다. 클라이언트 스크립트 블록을 이용하여 GetTextBoxValue라는 함수를 추가한 뒤 스크립트 블록으로 등록합니다.

 

이렇게 작성된 사용자 정의 컨트롤을 중복하여 포함하는 웹 폼을 만든 후 실행 결과는 다음과 같이 됩니다.

 

앞서 보았던 스크립트 중복문제가 발생하지 않아 전혀 문제없이 실행되는 것을 확인할 수 있습니다. 클라이언트 HTML을 살펴보아도 중복된 스크립트 블록은 찾아볼 수 없을 것입니다. 직접 실행결과를 확인해 주시기 바랍니다.

 

 

 

③ RegisterStartupScript 메서드

 

앞서 살펴본 RegisterClientScriptBlock과 거의 유사하게 사용되지만 다른 점으로는 출력되는 위치가 <form runat= server> 요소의 닫는 태그 바로 앞에 스크립트를 내보내게 됩니다. 스크립트에서 폼 안에 있는 컨트롤들을 참조할 때 컨트롤이 렌더링 된 후 스크립트가 등록되어야 에러가 발생하지 않습니다. 이런 경우 사용할 수 있는 메서드가 바로 RegisterStartupScript입니다.

 

더불어 IsStartupScriptRegistered 메서드를 통해 스크립트가 등록되어 있는지 검사할 수 있습니다.

 

 

 

④ 기타 메서드

 

지금까지 알아본 메서드 이외에도 Page 클래스에서 클라이언트 스크립트를 다루기 위한 메서드를 몇 가지 더 제공하고 있습니다. 간략히 살펴본다면 다음과 같습니다.

 

------------------------------------------------------------------------

RegisterArrayDeclaration : 클라이언트에서의 사용할 배열을 생성.

RegisterHiddenField : 히든 필드를 동적으로 추가

RegisterOnSubmitStatement : submit이 발생할 때 실행될 스크립트를 추가

------------------------------------------------------------------------

 

 

 

지금까지 ASP.NET에서 JavaScript와 같은 클라이언트 스크립트를 제어하기 위한 여러 가지 방법에 대해서 알아보았습니다. ASP.NET이 서버 기반의 운영이 기본이라고 하지만 웹 환경에서는 서버와 클라이언트를 적절하게 구분하여 프로그래밍 되어야만이 뛰어난 성능을 발휘하게 됩니다. 서버 컨트롤이 만능이 아니며 또한 모든 것을 지원하기 힘듭니다. 적절한 클라이언트 스크립트 사용으로 사용자에 대한 제어와 성능에 대한 향상을 모두 꽤 하시기 바랍니다.