[개발] ASP.NET 2.0에서의 Javascript

ASP.NET 2.0에서의 Javascript

ASP.NET2.0에서는 Javascript를 다루기 위해 ASP.NET1.1때 보다 많은 기능을 제공하고 있습니다. Javascript의 처리 방법이 이전 버전 보다 개선 되었으며 보다 쉽게 사용할 수 있습니다..

1. Focus

페이지 로드 시 웹 페이지의 특정 컨트롤에 포커스를 지정해 주기 위해 기존에는 포커스를 지정하는 스크립트를 문자열로 만들어 놓고 페이지가 로드 될 때 이 문자열을 출력하도록 처리 하거나, aspx파일에 직접 Javascript를 구현하고 body의 onLoad이벤트에서 이를 호출 하였습니다.

void Page_Load(object sender, EventArgs e)
{
    SetFocus("textBox1");
}
void SetFocus(String ctrlID
{
    System.Text.StringBuilder sb = new System.Text.StringBuilder();
    sb.Append("<script>");
    sb.Append("document.getElementById('" + ctrlID + "').focus();");
    sb.Append("</script>");
    Page.RegisterStartupScript("FocusScript", sb.ToString());
}

ASP.NET2.0에서는 위와 같이 많은 코드를 단 한 줄 또는 하나의 속성 만으로 해결 할 수 있는 방법을 제공합니다. Page개체의 SetFocus매서드 또는 포커스를 지정할 컨트롤의 Focus매서드를 통하여 간단히 해당하는 컨트롤에 포커스를 지정 해 줄 수 있습니다.

void Page_Load(object sender, EventArgs e)
{
    Page.SetFocus("textBox1");
    //또는
    textBox1.Focus();
}

이 보다 더 간단한 방법도 있습니다. aspx파일 내의 form태그에 defaultfocus라는 속성이 있는데 이 속성에 해당 컨트롤의 id만 입력하면 해당 컨트롤에 포커스가 지정됩니다.

<form defaultfocus="textBox1" id="form2" runat="server">
    <asp:TextBox ID="textBox1" runat="server"></asp:TextBox>
    <asp:TextBox ID="textBox2" runat="server"></asp:TextBox>
</form>

상당히 간단한 기능이지만 유용하게 사용할 수 있는 기능입니다. 이 간단한 포커스지정이라는 기능을 사용하기 위해 기존에는 첫 번째 예제와 같이 많은 양의 코드를 작성 하셨을 것입니다.

2. onClick

다음은 상당히 빈번하게 사용되는 onClick이벤트를 ASP.NET2.0에서 보다 쉽게 사용하는 방법에 대해 알아보겠습니다.

1.1버전에서는 버튼컨트롤에 alert이나 confirm을 사용하기 위해 Attributes.Add라는 매서드를 사용하였습니다. 사용하기에 그다지 불편하지는 않지만 이 또한 2.0에서는 보다 간결하게 사용할 수 있습니다.

btn1.Attributes.Add("onclick", "alert('클릭했습니다.')");
btn2.Attributes.Add("onclick", "return confirm('삭제하시겠습니까?')");

ASP.NET2.0에서는 새로 등장한 OnClientClick이라는 속성이 있습니다. ASP.NET에서 OnClick속성은 서버의 클릭이벤트에 대한 속성입니다. 클라이언트에 대한 속성은 존재하지 않기 때문에 어쩔 수 없이 Attributes.Add를 사용할 수 밖에 없었습니다. 하지만 2.0부터 지원하는 OnClientClick속성에 script 또는 Function을 넣어 주시면 서버이벤트가 일어나기 전에 클라이언트 이벤트가 먼저 발생하게 됩니다. 상당히 직관적이며 간결하지 않습니까?

<form id="form1" runat="server">
    <asp:Button ID="btn1" runat="server" OnClientClick="alert('클릭했습니다.')" />
    <asp:Button ID="btn2" runat="server" OnClientClick="return confirm('삭제하시겠습니까?')" />
</form>

OnClientClick속성을 지정하여 ClientScript를 처리 하는 것은 DataGrid나 GridView와 같은 컨트롤에서 보다 편리하게 사용될 수 있습니다. 아래의 코드를 보시면 해당 Row을 삭제하기 전 Confrim창을 띄우기 위해 RowType이 DataRow인지를 검사하고 버튼컨트롤을 FindControl로 찾은 다음 그 컨트롤에 Attributes.Add를 이용하여 스크립트를 지정 해 주고 있습니다. 많이 사용하던 코드라 그다지 어렵지는 않지만 ASP.NET2.0에서는 상당히 간결하게 이벤트 처리를 할 수 있습니다.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        Button btn = (Button)e.Row.FindControl("BtnDel");
        btn.Attributes.Add("onclick", "return confirm('이전버전:삭제하시겠습니까?')");
    }
}

일반적인 GridView컨트롤 내의 Button컨트롤에 OnClientClick속성을 추가하는 것 만으로도 위의 많은 코드를 대체 할 수 있습니다.  정말 간단하고 유용한 기능이 아닐 수 없습니다.^^

<asp:GridView ID="GridView1" runat="server">
    <Columns>
        <asp:BoundField DataField="IDX" HeaderText="IDX" ReadOnly="True" SortExpression="IDX" />
        <asp:TemplateField HeaderText="삭제">
            <ItemTemplate>
                <asp:Button ID="btnDel" runat="server" CommandName="del" Text="삭제" OnClientClick="return confirm('삭제하시겠습니까?')" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

3. 포스트백 시 스크롤 바의 위치 유지

다음은 스크롤 바의 위치를 PostBack시 유지할 수 있게 하는 강력한(?) 기능을 소개하겠습니다. MaintainScrollPositionOnPostback속성을 true로 설정 해 주면 끝입니다. 정말 간단합니다. 하지만 1.1에서 이를 구현하기에는 그리 쉽지는 않습니다. 쉬운 분들도 계시겠지만.. 저는 어려웠습니다. ㅡ.ㅡ;;

<%@ Page Language="C#" … MaintainScrollPositionOnPostback="true" %>

4. 서버측에서 클라이언트 스크립트의 호출 및 등록

비하인드 코드에서 스크립트를 호출하기 위해 이전 버전에서는 Page.Register...과 같이 사용했었습니다. ASP.NET2.0에서는 ClientScriptManager의 인스턴스인 Page.ClientScript라는 개체를 사용합니다.

protected void btn1_Click(object sender, EventArgs e)
{
    System.Text.StringBuilder sb = new System.Text.StringBuilder();
    sb.Append("<script type='text/javascript'>alert('스크립트 호출');</script>");
    Page.RegisterClientScriptBlock("alert", sb.ToString());
}

ClientScriptManager에서도 RegisterClientScriptBlock, RegisterStartupScript는 그대로 사용 가능합니다.

RegisterClientScriptBlock(Type type, string key, string script, , bool addScriptTags);
RegisterClientStartupScript(Type type, string key, string script, , bool addScriptTags);

달라진 점은 추가된 매개변수인데, 등록할 클라이언트 스크립트의 형식을 지정하는 type, "<script>...</script>"태그를 추가할지 여부를 묻는 addScriptTags가 있습니다. type은 내부적으로 key와 함께 스크립트를 구분 지어주는 ScriptKey역할을 하게 됩니다. 예를 들어 연속해서 두 번 스크립트를 등록 할 때 type과 key가 동일 할 경우 먼저 등록된 스크립트 만이 실행 되게 됩니다.  addScriptTags는 비하인드 코드가 아닌 aspx페이지상에 코드를 직접 작성할 경우 서버 코드 또한 <script runat=server >태그 내에 작성이 되므로 </script>코드가 나타나면 서버코드가 끝나게 되는 문제가 발생합니다. 그렇게 될 경우 </script>태그 이후의 서버 코드들은 서버 코드로 인식되지 못하기 때문에 오류가 발생하게 됩니다. 이때 addScriptTags를 true로 설정하면 아무 문제 없이 </script>태그를 사용할 수 있습니다.

ClientScript.RegisterClientScriptBlock(this.GetType(),"alert", sb.ToString());

RegisterClientScriptInclude는 비하인드 코드 상에서 <script src="./JScript.js" type="text/javascript"></script> 코드를 페이지에 등록 시킬 수 있습니다. 이는 다음에 나올 WebResource를 사용할 경우에도 유용합니다.

ClientScript.RegisterClientScriptInclude("Msg","./JScript.js");

5. WebResource에 포함된 자바스크립트

이번에는 WebResource를 이용하여 스크립트를 삽입하고 이를 호출하는 방법에 대해 설명하도록 하겠습니다.

우선 간단히 TextBox를 상속받는 Custom Control을 만들어 보도록 하겠습니다.

1. 웹 컨트롤 라이브러리 프로젝트를 생성합니다.
    
   
2. 간단한 javascript파일을 만듭니다. 스크립트 내부에는 Msg()라는 경고 창을 보여주는 function이 있습니다.
3. javascript파일을 포함리소스로 만듭니다.
    
   
4. 기본으로 생성된 WebCustomControl1.cs파일이 System.Web.UI.WebControls.TextBox를 상속 받도록 합니다.
5. override된 Render매서드에 Msg() function을 호출할 onClick 이벤트를 추가합니다.
6. WebResource로 만들어진 javascrip파일을 ClientScript.RegisterClientScriptInclude를 이용하여 추가합니다. 이때 WebResource의 경로를 알아오기 위해 ClientScript.GetWebResourceUrl을 사용합니다.

[ToolboxData("<{0}:MyWebResource runat=server>")]
public class WebCustomControl1: System.Web.UI.WebControls.TextBox
{
    protected override void Render(HtmlTextWriter writer)
    {
        writer.AddAttribute("onclick", "Msg()");
        base.Render(writer);
    }
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        this.Page.ClientScript.RegisterClientScriptInclude("MSG",this.Page.ClientScript.GetWebResourceUrl(typeof(WebCustomControl1),"WebControlLibrary1.JScript.js"));
    }
}

7. Properties시스템 폴더 안의 AssemblyInfo.cs파일에 아래와 같이 WebResourde를 등록하기 위한 코드를 삽입합니다.
8. 프로젝트를 빌드 하면 Custom Control 생성이 완료됩니다.

[assembly:WebResource( "WebControlLibrary1.JScript.js", "text/javascript")]

이제 위에서 만든 Custom Control을 페이지에 올려놓도록 하겠습니다. 그리고 이를 실행하고 텍스트박스를 클릭하면 메세지가 뜨는 것을 확인 할 수 있습니다.

<cc1:WebCustomControl1 ID="my" runat="server"></cc1:WebCustomControl1>

여기서 html소스보기를 했을 경우 javascript파일이 WebResource.asd?......처럼 포함되어 실행되고 있는 것을 확인 할 수 있습니다. WebResource는 Javascript뿐만 아니라 Css, Image도 포함 할 수 있으며 dll로 컴파일 되기 때문에 별도의 파일을 같이 배포할 필요가 없다는 장점이 있습니다.

<script src="/WebResource.axd?d=v_tffIY......3104528602185040" type="text/javascript"></script>
<input onclick="Msg()" name="my" type="text" id="my" />

지금까지 ASP.NET2.0에서 Javascript를 컨트롤 하는 방법에 대해 알아 보았습니다. 이번 강좌에 이어 다음에는 장안의 화재인 Ajax와 관련된 ASP.NET2.0에서의 Javascript에 대해 진행하도록 하겠습니다. 이 글을 읽으시는 분들께 약간의 도움이라도 됐으면 좋겠습니다. 그럼 다음강좌에서 뵙겠습니다

출처 : http://blog.naver.com/anytimel/70018528382

- 쌈꼬쪼려 소백촌닭™ -