ASP.NET 웹 페이지의 클라이언트 스크립트

아티클
10/22/2014

업데이트: 2007년 11월

ASP.NET 웹 응용 프로그램은 서버 기반 도구 및 언어로 제한되지 않습니다. ASP.NET 웹 페이지에 ECMAScript(JavaScript 또는 JScript)를 포함하면 다양한 브라우저 기반 기능을 만들 수 있습니다. ASP.NET에는 클라이언트 스크립트를 지원하기 위한 다양한 기능이 제공됩니다.

한 가지 옵션은 개별 클라이언트 스크립트 조각을 만들고 ASP.NET 웹 페이지에 추가하여 응용 프로그램에 대해 디자인하는 브라우저 동작을 지원하는 것입니다. 이 옵션은 JavaScript 코드 조각을 몇 개만 포함하거나 이미 가지고 있는 JavaScript 코드로 작업하는 경우에 유용합니다. 또한 ASP.NET 웹 페이지의 크기를 최소화하는 데에도 도움이 됩니다.

또는 ASP.NET의 강력한 AJAX 기능을 활용할 수도 있습니다. 이러한 AJAX 기능에는 다음을 지원하는 완전한 프레임워크가 포함되어 있습니다.

JavaScript의 개체 지향 프로그래밍
비동기 포스트백
인증 및 프로필을 위한 응용 프로그램 웹 서비스
확장된 디버깅 및 추적 지원으로 클라이언트 스크립트를 관리하는 서버 컨트롤

ASP.NET AJAX 기능을 사용하면 수동 코딩 작업에 대한 부담 없이 JavaScript 기능을 활용할 수 있습니다. 또한 이를 통해 JavaScript 기능을 확장하고 ASP.NET에 통합되는 클라이언트 기능을 만들기 위한 프레임워크를 제공할 수 있습니다.

이 항목에서는 ASP.NET 웹 페이지에 클라이언트 스크립트를 추가하는 데 사용되는 옵션에 대해 간략하게 설명합니다. 여기에는 다음 단원이 포함되어 있습니다.

시나리오
ASP.NET 페이지에 사용자 지정 클라이언트 스크립트 포함
ASP.NET AJAX 기능으로 JavaScript 확장
ASP.NET 클라이언트 스크립트를 기반으로 하는 ASP.NET 서버 컨트롤
ASP.NET 서버 컨트롤에 클라이언트 스크립트 이벤트 추가
클라이언트 스크립트에서 서버 컨트롤 참조
서버 컨트롤에 대한 클라이언트 Click 이벤트 발생
클라이언트 스크립트와 서버 코드 간의 통신
클라이언트 스크립트 구성 요소 만들기
서버 컨트롤에 클라이언트 기능 추가

시나리오

다음과 같은 경우에 클라이언트 스크립트를 사용합니다.

더욱 다양한 기능을 제공하고 사용자 작업에 더 빠르게 응답하면서도 기존의 클라이언트 응용 프로그램처럼 동작하는 웹 페이지를 통해 사용자 경험 개선 예를 들어 클라이언트 스크립트를 사용하여 텍스트 상자의 키보드 입력 내용을 문자 단위로 검사할 수 있습니다.
ASP.NET 웹 페이지에 AJAX 기능 추가. 이를 통해 다음을 수행할 수 있습니다.
- 페이지에서 DOM 요소를 동적으로 조작하여 전체 페이지 새로 고침을 줄이고 페이지 깜빡임을 방지합니다.
- 서버에 포스트백을 수행하지 않고 UI(사용자 인터페이스)를 업데이트하고 관리합니다.
- 코드를 클라이언트 구성 요소에 구성합니다. 클라이언트 구성 요소는 Microsoft AJAX 라이브러리를 기반으로 하는 JavaScript를 캡슐화하는 다시 사용 가능한 개체입니다. 또한 클라이언트 구성 요소는 사용자 지정 서버측 컨트롤을 통해 관리하거나, 기존 서버 컨트롤과 연결하여 클라이언트 기능을 추가할 수 있습니다.

ASP.NET 페이지에 사용자 지정 클라이언트 스크립트 포함

ASP.NET 웹 페이지도 HTML 태그를 렌더링하므로 사용자 지정 클라이언트 스크립트를 ASP.NET 페이지에 추가할 수 있습니다. ASP.NET 페이지에서 클라이언트 스크립트가 지원되는 범위는 페이지를 요청하는 브라우저에서 클라이언트 스크립트를 지원하는 범위에 따라 다릅니다. 페이지가 휴대폰이나 다른 장치의 브라우저에서 실행 중인 경우에는 브라우저에 따라 클라이언트 스크립트에 대한 지원 수준이 달라집니다.

클라이언트 스크립트를 ASP.NET 페이지에 포함할 때는 다음과 같은 여러 가지 옵션을 사용할 수 있습니다.

include 특성을 사용하여 JavaScript(.js) 파일을 참조하거나, 코드를 포함하는 script 블록에 클라이언트 스크립트를 정적으로 포함할 수 있습니다. 이 옵션을 사용하여 스크립트 블록을 삽입합니다. 그렇지 않으면 동적으로 만들 필요가 없고 Microsoft AJAX 라이브러리에서 제공하는 추가 AJAX 기능도 필요 없는 클라이언트 스크립트가 JavaScript 파일에 포함됩니다.
ClientScriptManager 클래스를 사용하여 클라이언트 스크립트를 동적으로 만들고 ASP.NET 웹 페이지에 추가할 수 있습니다. 이 옵션은 런타임에만 제공되는 정보에 의존하는 스크립트를 만들려는 경우에 사용합니다.
ASP.NET의 AJAX 기능을 활용하려는 경우에는 ScriptManager 서버 컨트롤을 사용하여 클라이언트 스크립트 파일을 관리할 수 있습니다. 또한 ScriptManager 서버 컨트롤은 스크립트가 실행되기 전에 Microsoft AJAX 라이브러리가 브라우저에 로드되도록 합니다. 자세한 내용은 ASP.NET AJAX 개요를 참조하십시오.

정적 클라이언트 스크립트 블록 포함

HTML 페이지에서처럼 script 블록을 ASP.NET 페이지에 추가할 수 있습니다. 클라이언트 스크립트를 사용하면 페이지의 onload 이벤트와 같은 클라이언트 이벤트에 대한 이벤트 처리기를 작성할 수 있습니다. ASP.NET 페이지가 브라우저에서 실행 중인 경우 이 페이지의 태그 요소는 클라이언트 스크립트로 처리될 수 있으며 HTML 페이지의 요소와 마찬가지로 모든 클라이언트측 이벤트를 발생시킵니다.

참고:
클라이언트 스크립트에서 ASP.NET 서버 컨트롤을 참조할 수 있습니다. 자세한 내용은 이 항목 뒷부분에서 클라이언트 스크립트에서 서버 컨트롤 참조를 참조하십시오.

또한 ASP.NET 웹 페이지는 다음 예제에서처럼 스크립트 파일을 <script> 태그의 src 특성에서 참조하는 방식으로 해당 스크립트 파일에 액세스할 수 있습니다.

<script type="text/javascript" src="MyScript.js"></script>

클라이언트 스크립트를 페이지 자체가 아닌 외부 .js 파일에 보관하면 클라이언트 스크립트를 손쉽게 구성할 수 있습니다. 또한 이로 인해 버전 제어를 위한 관리가 용이해지고 페이지 간에 공유하기도 편리해질 수 있습니다.

외부 .js 파일은 웹 페이지 및 이미지가 캐시되는 방식과 유사하게 브라우저에 의해 캐시됩니다. 브라우저에서 스크립트가 외부 파일로 로드된 후에는 캐시에서 이를 필요로 하는 다른 웹 페이지에 사용될 수 있으며, 이를 통해 웹 응용 프로그램의 성능을 향상시킬 수 있습니다.

클라이언트 스크립트를 동적으로 만들기

대부분의 경우 페이지에 대한 클라이언트 스크립트를 선언적으로 만들 수 있는데 대개 스크립트 블록 형식으로 만듭니다. 그러나 클라이언트 스크립트를 동적으로 만들 수도 있습니다. 이 방법은 스크립트가 런타임에만 제공되는 정보에 의존하는 경우에 유용합니다. 예를 들어 응용 프로그램이 실행될 때까지 이름(ID)을 알 수 없는 서버 컨트롤을 처리하는 페이지에 클라이언트 스크립트를 삽입하거나, 사용자로부터 가져오는 값에 의존하는 스크립트를 만들 수 있습니다.

다음과 같이 ClientScriptManager 클래스의 메서드를 호출하여 클라이언트 스크립트를 만들고 렌더링된 페이지에 동적으로 삽입할 수 있습니다.

스크립트 블록을 렌더링된 페이지의 맨 위에 삽입하는 RegisterClientScriptBlock입니다.
스크립트 블록을 렌더링된 페이지의 끝에 삽입하는 RegisterStartupScript입니다.

다음 예제에서는 생성된 클라이언트 스크립트를 페이지에 동적으로 추가하는 방법을 보여 줍니다. 이 코드에서는 checkDisplayCount라는 확인란이 선택되어 있는지 확인합니다. 확인란이 선택되어 있는 경우 이 코드는 다음 작업을 수행합니다.

span 요소를 사용하여 TextBox1이라는 TextBox 컨트롤에 문자 수를 표시하는 클라이언트 스크립트 함수를 만듭니다.
클라이언트 이벤트를 TextBox 컨트롤에 추가합니다.
span 요소를 생성합니다.

이 코드에서는 페이지에 AutoPostBack 속성이 true로 설정된 checkDisplayCount라는 확인란과 PlaceHolder1이라는 PlaceHolder 컨트롤이 포함되어 있는 것으로 가정합니다.

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs)
    If checkDisplayCount.Checked Then
        Dim scriptText As String = ""
        scriptText &= "function DisplayCharCount(){"
        scriptText &= "   getElementByID("spanCounter").innerText = " & _
            "document.forms[0].TextBox1.value.length"
        scriptText &= "}"
        ClientScriptManager.RegisterClientScriptBlock(Me.GetType(), _
            "CounterScript", scriptText, True)
        TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()")
        Dim spanLiteral As New LiteralControl()
        spanLiteral.Text = "<span id=""spanCounter""></span>"
        PlaceHolder1.Controls.Add(spanLiteral)
    End If
End Sub

void Page_Load(object sender, EventArgs e)
{
    if(checkDisplayCount.Checked)
    {
        String scriptText = "";
        scriptText += "function DisplayCharCount(){";
        scriptText += "   spanCounter.innerText = " + 
            " document.forms[0].TextBox1.value.length";
        scriptText += "}";
        ClientScriptManager.RegisterClientScriptBlock(this.GetType(), 
           "CounterScript", scriptText, true);
        TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()");
        LiteralControl spanLiteral = new 
            LiteralControl("<span id=\"spanCounter\"></span>");
        PlaceHolder1.Controls.Add(spanLiteral);
    }
}

자세한 내용은 방법: ASP.NET 웹 페이지에 동적으로 클라이언트 스크립트 추가를 참조하십시오.

ClientScriptManager 클래스 메서드에 대해 스크립트 블록이 연결되는 형식을 제공하고 스크립트 블록에 키를 부여합니다. 형식을 제공하면 페이지와 컨트롤(사용자 지정 컨트롤 또는 사용자 정의 컨트롤)이 모두 스크립트 블록을 같은 페이지에 추가하는 경우 충돌을 방지할 수 있습니다. 키를 사용하면 중복을 방지하는 데 도움이 됩니다. 스크립트를 추가할 메서드 중 하나를 호출하는 경우 키와 형식이 같은 스크립트가 이미 있으면 스크립트가 다시 추가되지 않습니다.

형식과 키를 제공하면 불필요한 중복 문제를 방지할 수 있으므로 일반적으로 스크립트 블록이 이미 있는지 여부를 명시적으로 확인할 필요가 없습니다. 그러나 응용 프로그램에서 기존 스크립트 블록이 있는지 확인하는 것이 유용할 경우에는 다음 메서드를 호출할 수 있습니다.

ScriptManager 컨트롤을 사용하여 클라이언트 스크립트 추가

ASP.NET AJAX 기능을 사용하는 경우 ScriptManager 컨트롤을 통해 페이지에 스크립트 파일을 추가할 수 있습니다. 여기에는 디스크의 정적 스크립트 파일(.js 파일)과 어셈블리에 리소스로 포함된 스크립트 파일이 포함됩니다. 스크립트 파일은 컨트롤에 선언적으로 지정할 수 있습니다. 또는 기존 클라이언트 스크립트 파일을 프로그래밍 방식으로 관리하고 부분 페이지 업데이트 지원을 위해 스크립트를 사용하도록 하는 ScriptManager 컨트롤의 등록 메서드를 사용할 수도 있습니다.

ScriptManager 컨트롤에 대한 개요는 ScriptManager 컨트롤 개요를 참조하십시오. JavaScript 파일을 어셈블리에 리소스로 포함하는 방법과 이를 웹 페이지에서 사용하는 방법에 대한 자세한 내용은 연습: 어셈블리에 JavaScript 파일을 리소스로 포함을 참조하십시오.

참고:
서버측 기능이 아닌 ASP.NET의 클라이언트 AJAX 기능을 사용하는 경우에는 ClientScriptManager 클래스의 메서드를 사용하여 ASP.NET 웹 페이지에 스크립트를 삽입합니다. 예를 들어 스크립트에 UpdatePanel 컨트롤이나 지역화 기능을 사용하지 않는 경우에는 ScriptManager 컨트롤이 필요 없으므로 해당 메서드를 호출하여 페이지에 클라이언트 스크립트를 삽입할 수 없습니다. 일반적으로 ClientScriptManager 클래스의 메서드를 사용하는 것이 ScriptManager 컨트롤 메서드를 사용하는 것보다 효율적입니다. 이는 ClientScriptManager 클래스 메서드의 경우 ScriptManager 컨트롤에서 지원되는 서버 기반 기능을 추가로 처리할 필요가 없기 때문입니다. 기존 스크립트만 관리하는 대신 스크립트를 동적으로 만들어야 하는 경우에는 ClientScriptManager 클래스를 사용하여 클라이언트 스크립트를 페이지에 삽입합니다. 예를 들어 기존 스크립트 파일에서 참조할 수 없는 정보를 기반으로 클라이언트 스크립트를 프로그래밍 방식으로 만들려면 ClientScriptManager 클래스를 사용합니다.

서버측 기능이 아닌 ASP.NET의 클라이언트 AJAX 기능을 사용하는 경우에는 ClientScriptManager 클래스의 메서드를 사용하여 ASP.NET 웹 페이지에 스크립트를 삽입합니다. 예를 들어 스크립트에 UpdatePanel 컨트롤이나 지역화 기능을 사용하지 않는 경우에는 ScriptManager 컨트롤이 필요 없으므로 해당 메서드를 호출하여 페이지에 클라이언트 스크립트를 삽입할 수 없습니다. 일반적으로 ClientScriptManager 클래스의 메서드를 사용하는 것이 ScriptManager 컨트롤 메서드를 사용하는 것보다 효율적입니다. 이는 ClientScriptManager 클래스 메서드의 경우 ScriptManager 컨트롤에서 지원되는 서버 기반 기능을 추가로 처리할 필요가 없기 때문입니다. 기존 스크립트만 관리하는 대신 스크립트를 동적으로 만들어야 하는 경우에는 ClientScriptManager 클래스를 사용하여 클라이언트 스크립트를 페이지에 삽입합니다. 예를 들어 기존 스크립트 파일에서 참조할 수 없는 정보를 기반으로 클라이언트 스크립트를 프로그래밍 방식으로 만들려면 ClientScriptManager 클래스를 사용합니다.

ASP.NET AJAX 기능으로 JavaScript 확장

ASP.NET에서는 클라이언트 스크립트를 사용하여 ASP.NET 웹 페이지에 다양한 기능을 추가할 수 있도록 하는 AJAX 기능을 지원합니다. 이러한 기능에는 비동기 포스트백, 응답 수준이 뛰어난 UI 등이 있습니다. AJAX 기능은 브라우저 간 ECMAScript(JavaScript)와 동적 HTML(DHTML) 기술이 통합된 클라이언트 스크립트 라이브러리로 구성되어 있는 Microsoft AJAX 라이브러리를 사용하여 구현됩니다. AJAX 기능은 ASP.NET 서버 기반 개발 플랫폼에 통합되어 있습니다.

Microsoft AJAX 라이브러리 형식 시스템, 개체 지향 기능 및 JavaScript 개체에 대한 확장을 사용하면 사용자 지정 클라이언트 스크립트를 만들기 위한 다음과 같은 기능을 제공할 수 있습니다.

네임스페이스
상속
인터페이스
열거형
리플렉션
디버깅 도우미
추적
입력된 예외 처리
문자열 및 배열에 대한 도우미 메서드

참고:

Microsoft AJAX 라이브러리는 ASP.NET의 서버 기반 AJAX 기능을 사용하지 않는 경우에도 사용할 수 있습니다.

참고:
Microsoft AJAX 라이브러리는 ASP.NET의 서버 기반 AJAX 기능을 사용하지 않는 경우에도 사용할 수 있습니다.

Microsoft AJAX 라이브러리가 JavaScript를 확장하는 방법에 대한 자세한 내용은 다음 항목을 참조하십시오.

AJAX 기능 브라우저 호환성

Microsoft AJAX 라이브러리의 브라우저 호환성 레이어는 Microsoft Internet Explorer, Mozilla Firefox 및 Apple Safari를 비롯하여 가장 일반적으로 사용되는 브라우저에 대한 AJAX 스크립팅 호환성을 제공합니다. 이 기능을 사용하면 지원되는 브라우저 중 어떤 브라우저를 대상으로 지정하든 상관없이 동일한 스크립트를 작성할 수 있습니다. 자세한 내용은 ASP.NET AJAX 개요를 참조하십시오.

ASP.NET 클라이언트 스크립트를 기반으로 하는 ASP.NET 서버 컨트롤

일부 ASP.NET 서버 컨트롤의 기능은 클라이언트 스크립트를 기반으로 합니다. 예를 들어 LinkButton 컨트롤의 경우 다시 게시 동작을 지원하기 위해 클라이언트 스크립트가 필요합니다. 페이지를 렌더링하면 ASP.NET 웹 서버 컨트롤에 필요한 클라이언트 스크립트가 자동으로 페이지에 추가됩니다. 이러한 컨트롤에 대해 생성되는 클라이언트 스크립트는 사용자가 직접 만드는 클라이언트 스크립트와 별개입니다.

자세한 내용은 클라이언트 스크립트를 사용하는 ASP.NET 웹 서버 컨트롤을 참조하십시오.

ASP.NET 서버 컨트롤에 클라이언트 스크립트 이벤트 추가

ASP.NET 컨트롤은 페이지에서 요소로 렌더링됩니다. 이때 컨트롤에서 렌더링하는 정확한 요소는 페이지의 태그 언어(HTML, XHTML 또는 다른 언어)에 따라 다릅니다. 따라서 페이지의 모든 요소와 마찬가지로 컨트롤에 클라이언트 스크립트 이벤트 처리를 추가할 수 있습니다. 그러나 경우에 따라서는 컨트롤에서 결과를 렌더링하는 방식과 컨트롤에 자체적으로 예약된 특성을 고려해야 합니다.

자세한 내용은 방법: ASP.NET 웹 서버 컨트롤에 클라이언트 스크립트 이벤트 추가를 참조하십시오.

클라이언트 이벤트 처리기를 선언적으로 추가

ASP.NET 서버 컨트롤의 태그에서 특성을 사용하여 속성 값을 설정합니다. 예를 들어 TextBox 컨트롤의 Text 속성을 설정하려면 다음과 같은 태그를 만듭니다.

<asp:textbox id="TextBox1"  text="Sample Text" />

보안 정보:
TextBox는 사용자 입력을 허용하므로 보안상 위험할 수 있습니다. 기본적으로 ASP.NET 페이지에서는 사용자 입력 내용에 스크립트나 HTML 요소가 포함되어 있지 않은지 유효성을 검사합니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.

컨트롤의 속성에 매핑되지 않는 특성을 포함하는 경우, ASP.NET에서는 서버를 처리하는 동안 이 특성을 무시하고 컨트롤에서 생성된 태그의 일부로 이 특성을 있는 그대로 포함하여 브라우저에 전달합니다. 예를 들어 TextBox 컨트롤에는 onkeyup이라는 속성이 없습니다. 따라서 TextBox 컨트롤에 대한 태그에 onkeyup 특성을 포함하면 이 특성이 브라우저에 전달됩니다. 이 동작을 사용하면 태그에서 이벤트 바인딩을 선언하여 서버 컨트롤에 추가할 수 있습니다. 예를 들어 TextBox 컨트롤에 대해 다음과 같은 태그를 작성하면 사용자가 텍스트 상자에서 키를 누를 때마다 spanCounter라는 span 요소의 현재 텍스트 길이가 텍스트 상자에 표시됩니다.

<asp:textbox id="TextBox1"  text="Sample Text" 
  onkeyup="spanCounter.innerText=this.value.length;" />

이벤트는 다음과 같이 페이지의 다른 곳에서 클라이언트 스크립트에 정의된 메서드를 호출할 수도 있습니다.

<asp:textbox id="TextBox1"  text="Sample Text" 
  onkeyup="DisplayCount(this);" />

서버 코드에 사용하는 언어(Visual Basic 또는 C#)는 항상 ECMAScript(JavaScript 또는 JScript)로 작성되는 클라이언트 스크립트에 아무런 영향을 주지 않습니다.

자세한 내용은 방법: ASP.NET 웹 서버 컨트롤에 클라이언트 스크립트 이벤트 추가를 참조하십시오.

서버 코드에 특성 추가

통과 특성을 선언적으로 컨트롤에 추가할 수 있을 뿐만 아니라 서버 코드를 사용하여 프로그래밍 방식으로 특성을 추가할 수도 있습니다. 이는 추가할 특성 값이 런타임에만 제공되는 경우에 유용합니다. 자세한 내용은 방법: ASP.NET 웹 페이지에서 컨트롤의 HTML 특성 설정을 참조하십시오.

클라이언트 스크립트에서 서버 컨트롤 참조

ASP.NET 서버 컨트롤이 렌더링되는 경우 이 컨트롤의 ClientID 속성이 결과 요소의 id 및 name 특성으로 페이지에 렌더링됩니다. ClientID 속성은 사용자가 설정한 ID 속성에서 자동으로 생성됩니다. 예를 들어 다음과 같은 ASP.NET 서버 컨트롤을 만들 수 있습니다.

<asp:textbox id="TextBox1"  text="Sample Text" />

ClientID 속성은 TextBox1로 설정되고 HTML 기반 브라우저의 결과 요소는 다음과 같이 나타납니다.

<input name="TextBox1" type="text" value="Sample Text" id="TextBox1" />

참고:
form 요소는 ID 특성만 렌더링하고 name 특성은 렌더링하지 않습니다.

따라서 이러한 특성을 사용하여 클라이언트 스크립트에서 서버 컨트롤을 참조할 수 있습니다. 일반적으로 클라이언트 스크립트에서 정규화된 참조를 사용하여 컨트롤을 지정합니다. 컨트롤이 페이지에 있는 form 요소의 자식인 경우에는 대개 구문을 다음 예제와 같이 사용하여 클라이언트 스크립트에서 컨트롤을 참조합니다.

var tb1 = document.getElementById("TextBox1");
tb1.value = "New value";

다음 예제에서는 페이지의 form 요소에 form1로 설정된 id 특성이 있다고 가정합니다.

document.form1.TextBox1.value = "New value";

서버 컨트롤을 참조하는 데 필요한 정확한 구문은 현재 사용 중인 컨트롤 및 이 컨트롤이 다른 컨트롤의 자식인지 여부에 따라 다릅니다. 컨트롤을 참조하는 방법을 잘 모를 경우에는 페이지를 실행하여 소스를 검토하고 컨트롤이 렌더링된 방법을 확인하면 도움이 됩니다.

다른 컨트롤 내에 렌더링되는 컨트롤 참조

일부 컨트롤은 자식 컨트롤을 페이지에 렌더링합니다. 예를 들면 ListView, GridView, DetailsView, FormView, DataList, Repeater 등의 데이터 목록 컨트롤과 사용자 정의 컨트롤 및 웹 파트 컨트롤이 여기에 해당합니다.

이러한 경우 모든 데이터 행에 대해 새 컨트롤 인스턴스를 생성하는 템플릿에 자식 컨트롤이 정의되거나(데이터 목록 컨트롤) 외부 소스의 페이지에 부모 컨트롤을 추가할 수 있으므로(사용자 정의 컨트롤 및 웹 파트 컨트롤) 자식 컨트롤에 고유한 ID가 없을 수도 있습니다. 따라서 이러한 부모 컨트롤은 INamingContainer를 구현하는 명명 컨테이너입니다. 명명 컨테이너를 사용하면 페이지에서 자식 컨트롤에 고유한 ID가 부여됩니다.

예를 들어 DataList 컨트롤에 ItemTemplate 속성을 만들고, 템플릿에서 ID가 checkEnabled로 설정된 CheckBox 컨트롤을 추가할 수 있습니다. DataList 컨트롤이 렌더링되면 각 데이터 항목에 대해 새 checkEnabled 컨트롤이 렌더링됩니다. 렌더링된 페이지에는 checkEnabled 요소의 인스턴스가 여러 개 포함될 수 없으므로 DataList 컨트롤은 각 자식 컨트롤에 대한 고유 ID를 만듭니다.

명명 컨테이너의 자식 컨트롤에 대한 고유 ID는 두 가지 속성을 렌더링하여 생성됩니다. 각 자식 컨트롤에 대해 다음과 같은 속성이 렌더링됩니다.

컨트롤의 UniqueID 속성이 name 특성으로 렌더링됩니다.
컨트롤의 ClientID 속성이 id 특성으로 렌더링됩니다.

ClientID 속성과 UniqueID 속성은 모두 원래 ID 속성을 기반으로 하고 결과가 페이지 내에서 고유하도록 충분한 정보로 수정됩니다. ClientID의 값, 즉 렌더링된 요소의 id 특성 값을 클라이언트 스크립트에서 참조할 수 있습니다.

명명 컨테이너를 포함하는 페이지를 브라우저에 표시하는 경우 이 페이지의 소스를 검토하여 명명 컨테이너의 자식 컨트롤에 대한 name 및 id 특성으로 생성된 고유 ID를 확인할 수 있습니다. 그러나 브라우저에서 볼 때 ID를 직접 참조하지 않는 것이 좋습니다. 자식 컨트롤에 대한 고유 ID를 생성하는 데 사용되는 방법은 변할 수 있습니다. 대신 서버 코드에서 자식 컨트롤의 ClientID 속성 값을 가져온 다음 이 값을 사용하여 자식 컨트롤을 참조합니다. 예를 들어 페이지에서 동적으로 클라이언트 스크립트를 만들 수 있습니다. 클라이언트 스크립트가 자식 컨트롤을 참조하는 경우 이 자식 컨트롤의 ClientID 속성을 가져온 다음 동적 스크립트에 포함합니다.

서버 컨트롤에 대한 클라이언트 Click 이벤트 발생

앞에서 설명했듯이 컨트롤의 태그에 onclick 특성을 추가하여 대부분의 ASP.NET 서버 컨트롤에 클라이언트 Click 이벤트를 추가할 수 있습니다. 그러나 일부 컨트롤은 서버 이벤트에 대한 바인딩을 정의하기 위해 onclick 특성을 예약합니다. 예를 들면 Button, LinkButton 및 ImageButton 컨트롤 등이 여기에 해당합니다. 이러한 컨트롤에서는 onclick 특성을 선언적으로 사용하여 클라이언트 스크립트 처리기를 컨트롤에 추가할 수 없습니다.

다음과 같은 두 가지 방법을 사용하여 Click 이벤트에 대한 클라이언트 스크립트 처리기를 추가할 수 있습니다.

컨트롤의 OnClientClick 속성을 실행 대상 스크립트로 설정합니다. Button 컨트롤이 렌더링되면 OnClientClick 값이 onclick 특성으로 변환됩니다.

컨트롤의 Attributes 컬렉션에 대한 Add 메서드를 호출하여 onclick 특성을 프로그래밍 방식으로 추가합니다.

참고:
컨트롤에서 onclick을 LinkButton 같은 해당 기본 기능의 일부로 이미 사용하는 경우에는 onclick 특성을 서버 컨트롤에 프로그래밍 방식으로 추가할 수 없습니다.

다음 코드 예제에서는 클라이언트측 및 서버 Click 이벤트를 모두 발생시키는 Button 컨트롤을 보여 줍니다.

<asp:button id="Button1" 
   
  OnClientClick="return confirm('Ok to post?')" 
  onclick="Button1_Click" 
  Text="Click!" />

클라이언트 스크립트와 서버 코드 간의 통신

ASP.NET 웹 페이지는 표준 포스트백을 사용하는 것 외에도 다양한 방법으로 클라이언트 스크립트와 서버 코드 간에 통신할 수 있습니다. UpdatePanel 서버 컨트롤 같은 ASP.NET의 AJAX 기능은 비동기 부분 페이지 업데이트를 자동으로 수행합니다. 또한 ASP.NET AJAX에서는 웹 서비스를 비동기적으로 호출할 수 있도록 합니다.

ASP.NET의 AJAX 기능을 사용하지 않는 경우에는 사용자 지정 클라이언트 콜백을 직접 호출하고 다양한 메서드를 통해 브라우저와 서버 간에 정보를 공유할 수 있습니다. 다음 단원에서는 사용 가능한 옵션에 대한 정보를 제공합니다.

클라이언트 스크립트에서 직접 서버 코드 호출

클라이언트 콜백을 구현하면 클라이언트 스크립트에서 서버 코드를 직접 호출할 수 있습니다. ASP.NET 웹 페이지에 대한 일반적인 시퀀스에서는 서버 코드를 실행하는 각 사용자 작업을 다시 게시해야 합니다. 그러나 전체 포스트백을 수행하지 않고 브라우저에서 서버 처리를 호출할 수도 있습니다. 이 시나리오에서는 브라우저에서 전체 페이지를 서버로 보낸 다음 서버가 응답할 때 이를 다시 로드하지 않습니다. 대신 브라우저에서는 소량의 데이터를 서버로 보냅니다. 서버가 응답을 보내면 브라우저의 클라이언트 스크립트는 페이지를 다시 로드하지 않고 반환된 데이터를 처리합니다. 서버에서 처리하는 도중 지역 변수 같은 모든 클라이언트 상태는 그대로 유지됩니다. 이러한 프로세스를 비동기 포스트백이라고 하며 부분 페이지 렌더링에서 핵심적인 역할을 합니다.

다음과 같은 방법으로 포스트백을 수행하지 않고 클라이언트 스크립트에서 서버 메서드를 호출할 수 있습니다.

ASP.NET UpdatePanel 서버 컨트롤을 사용합니다. 이 컨트롤은 ASP.NET AJAX 기능의 일부로, 부분 페이지 업데이트로 새로 고쳐질 페이지의 영역을 정의하는 데 사용할 수 있습니다. UpdatePanel 컨트롤을 사용하는 경우에는 비동기 부분 페이지 업데이트를 호출하기 위해 클라이언트 스크립트를 직접 작성할 필요가 없습니다. 자세한 내용은 부분 페이지 렌더링 개요 및 UpdatePanel 컨트롤 개요를 참조하십시오.
웹 서비스 통신에 대한 ASP.NET AJAX 지원을 사용하여 웹 서버 메서드를 호출하는 클라이언트 스크립트를 작성합니다. 이 접근 방식은 클라이언트 스크립트 콜백을 직접 작성하여 웹 서버 메서드를 호출하는 것과 개념 면에서 유사합니다. 하지만 Microsoft AJAX 라이브러리에서는 서버 메서드 호출의 세부 사항을 처리하며, 호출을 수행하고 처리하기 위한 보다 견고한 클라이언트 스크립트 라이브러리를 제공합니다. 자세한 내용은 ASP.NET AJAX의 웹 서비스를 참조하십시오.
클라이언트 콜백을 구현합니다. 이 시나리오에서는 요청을 보내고 결과를 처리하는 클라이언트 코드를 작성합니다. 가장 일반적인 접근 방법은 클라이언트 스크립트의 호출 함수와 서버가 결과를 반환하면 호출되는 호출 함수를 만드는 것입니다. 자세한 내용은 ASP.NET 웹 페이지에서 다시 게시하지 않는 클라이언트 콜백을 프로그래밍 방식으로 구현을 참조하십시오.

각 방법에는 다양한 이점이 있습니다. 클라이언트 콜백을 직접 만들면 대개 오버헤드와 페이지 크기가 최소화됩니다. UpdatePanel 서버 컨트롤을 사용하면 클라이언트 스크립트를 직접 작성하지 않고도 부분 페이지 업데이트를 구현할 수 있습니다. 또한 AJAX를 사용하여 웹 서비스를 호출하면 비동기 웹 서비스를 호출하기 위해 작성하는 클라이언트 스크립트가 대부분 불필요해집니다.

HiddenField 컨트롤을 사용하여 데이터 공유

HiddenField 컨트롤을 페이지에 추가하여 클라이언트 스크립트와 서버 코드 간에 정보를 공유할 수 있습니다. 클라이언트의 숨김 필드는 ID별로 참조할 수 있습니다. 또한 서버 코드에서도 숨김 필드를 참조할 수 있으며, 이를 통해 한 코드 블록에 값을 저장하고 다른 코드 블록에서 해당 값을 읽을 수 있습니다. 서버 코드에서 클라이언트 스크립트로 정보를 전달하려면 RegisterHiddenField 메서드를 사용하여 프로그래밍 방식으로 숨김 필드를 만듭니다. 이 메서드를 사용하면 필드에 대해 ID와 값을 지정하여 클라이언트 스크립트에서 읽을 수 있는 방식으로 페이지에 동적 값을 저장하는 필드를 사용할 수 있습니다.

쿠키를 사용하여 데이터 공유

쿠키를 사용하여 서버 코드와 클라이언트 스크립트 간에 값을 공유할 수도 있습니다. 서버 코드에서 쿠키를 작성하고 읽는 방법에 대한 자세한 내용은 방법: 쿠키 작성 및 방법: 쿠키 읽기를 참조하십시오. JavaScript를 사용하여 쿠키를 읽고 작성하는 방법에 대한 자세한 내용은 MSDN 웹 사이트에서 JavaScript and cookies를 참조하십시오.

비동기 포스트백 동안 데이터 공유

ASP.NET의 AJAX 기능을 사용하는 경우 RegisterDataItem 메서드를 사용하여 비동기 포스트백(부분 페이지 렌더링) 동안 서버에서 클라이언트로 사용자 지정 데이터를 문자열로 보낼 수 있습니다. RegisterDataItem 메서드를 사용하면 서버 코드를 사용하여 컨트롤에 연결된 필드를 등록할 수 있습니다. 브라우저에서 클라이언트 스크립트의 필드 값은 ASP.NET AJAX Sys.WebForms.PageLoadingEventArgs, Sys.WebForms.PageLoadedEventArgs 및 Sys.WebForms.PageLoadedEventArgs 개체를 통해 액세스할 수 있습니다. RegisterDataItem 메서드는 비동기 포스트백 도중에만 호출할 수 있습니다.

RegisterDataItem 메서드를 사용하여 서버와 클라이언트 간에 데이터를 공유하는 방법에 대한 자세한 내용은 다음 항목을 참조하십시오.

클라이언트 스크립트 구성 요소 만들기

클라이언트 구성 요소는 Microsoft AJAX 라이브러리를 기반으로 하는 JavaScript를 캡슐화하는 다시 사용 가능한 개체입니다. 라이브러리는 다음과 같은 다양한 클라이언트 기능을 제공하기 위해 파생시킬 수 있는 기본 클라이언트 개체 형식 클래스인 Component(비시각적 구성 요소의 기본 클래스), Control 및 Behavior 클래스를 제공합니다.

초기화에서 삭제까지의 수명 주기에 대한 액세스. 여기에는 속성 값이 변경될 때 발생하는 이벤트가 포함됩니다.
DOM 요소를 새 기능이 있는 클라이언트 개체로 표현. 이렇게 하면 DOM 요소의 동작이 확장됩니다. 예를 들어 기존 텍스트 상자에 연결할 수 있는 워터마크 동작을 추가할 수 있습니다.

자세한 내용은 다음 항목을 참조하십시오.

서버 컨트롤에 클라이언트 기능 추가

기존 ASP.NET 서버 컨트롤이나 사용자 지정 ASP.NET 서버 컨트롤을 ASP.NET AJAX Extender 컨트롤로 전환할 수 있습니다. Extender 컨트롤은 서버와의 대화형 작업 및 비동기 통신 같은 기능을 추가하기 위해 웹 브라우저의 ECMAScript(JavaScript), DHTML 및 AJAX 기능을 사용하는 웹 서버 컨트롤입니다.