ASP.NET 은 서버 기반 기술이므로 브라우저와 직접 상호 작용하지 않습니다. 예를 들어 브라우저를 통해 키보드 입력을 가져오고, 마우스 이벤트에 응답하거나, 사용자와 브라우저 간의 상호 작용과 관련된 다른 작업을 수행할 수 있는 ASP.NET 메서드가 없습니다. ASP.NET에서는 페이지가 게시된 후에 이러한 작업의 결과를 가져올 수 있지만 브라우저 작업에 즉시 응답할 수 없습니다.
브라우저 상호 작용 작업의 이러한 형식은 ECMAScript(JavaScript 또는 JScript)로 작성된 클라이언트 스크립트를 사용하여 가장 효과적으로 처리됩니다. 브라우저에서 실행 중인 클라이언트 스크립트는 사용자 작업에 즉시 응답할 수 있습니다. 예를 들어 클라이언트 스크립트를 사용하면 마우스 포인터를 단추 또는 메뉴 항목 위로 가져갈 때 해당 항목이 변경되도록 "롤오버" 효과를 만들 수 있습니다. 마찬가지로 클라이언트 스크립트를 사용하면 텍스트 상자의 키보드 입력 내용을 문자 단위로 검사하고, 페이지의 모양을 동적으로 변경하거나, 주로 UI(사용자 인터페이스)를 기반으로 하고 즉시 응답해야 하는 다른 작업을 수행할 수 있습니다.
ASP.NET 서버 컨트롤과 클라이언트 스크립트
일부 ASP.NET 서버 컨트롤의 기능은 클라이언트 스크립트를 기반으로 합니다. 예를 들어 LinkButton 컨트롤의 경우 다시 게시 동작을 지원하기 위해 클라이언트 스크립트가 필요합니다. 페이지를 렌더링하면 ASP.NET 웹 서버 컨트롤에 필요한 클라이언트 스크립트가 자동으로 페이지에 추가됩니다. 이러한 컨트롤에 대해 생성되는 클라이언트 스크립트는 사용자가 직접 만드는 클라이언트 스크립트와 별개입니다.
자세한 내용은 클라이언트 스크립트를 사용하는 ASP.NET 웹 서버 컨트롤을 참조하십시오.
ASP.NET 페이지에 사용자 지정 클라이언트 스크립트 포함
ASP.NET 웹 페이지도 결국은 웹 페이지이므로 사용자 지정 클라이언트 스크립트를 ASP.NET 페이지에 추가할 수 있습니다. ASP.NET 페이지에서 클라이언트 스크립트가 지원되는 범위는 페이지를 요청하는 브라우저에서 클라이언트 스크립트를 지원하는 범위에 따라 다릅니다. 예를 들어 ASP.NET 웹 페이지가 Microsoft Internet Explorer 또는 Mozilla에서 실행 중인 경우, 동적 HTML을 사용하는 페이지에 클라이언트 스크립트를 추가하여 페이지의 모든 요소를 조작할 수 있습니다. 페이지가 휴대폰이나 다른 장치의 브라우저에서 실행 중인 경우에는 브라우저에 따라 클라이언트 스크립트에 대한 지원 수준이 달라집니다.
HTML 페이지 또는 다른 태그 페이지와 같은 방법을 사용하여 페이지에 클라이언트 스크립트를 포함할 수 있습니다. HTML 페이지의 경우와 마찬가지로 script 블록을 페이지에 추가하여 페이지의 요소를 조작할 수 있습니다. 클라이언트 스크립트를 사용하면 페이지의 이벤트와 같은 클라이언트 이벤트에 대한 이벤트 처리기를 작성할 수 있습니다. 브라우저에서 ASP.NET 페이지가 실행 중인 경우, 이 페이지의 태그 요소는 클라이언트 스크립트로 처리될 수 있으며 HTML 페이지의 요소와 마찬가지로 모든 클라이언트측 이벤트를 발생시킵니다.
ASP.NET 웹 페이지에서 클라이언트 스크립트를 사용한 작업은 다음과 같은 측면에서 HTML 페이지의 작업과 다릅니다.
ASP.NET 서버 컨트롤에 클라이언트 스크립트 이벤트 추가
클라이언트 스크립트에서 서버 컨트롤 식별
페이지에 동적으로 클라이언트 스크립트 추가
서버 컨트롤에 대한 클라이언트 Click 이벤트 발생
클라이언트 스크립트와 서버 코드 간에 정보 공유
다시 게시하지 않고 클라이언트 스크립트에서 서버 코드 호출
ASP.NET 서버 컨트롤에 클라이언트 스크립트 이벤트 추가
ASP.NET 컨트롤은 페이지에서 요소로 렌더링됩니다. 이 때 컨트롤에서 렌더링하는 정확한 요소는 페이지의 태그 언어(HTML, XHTML 또는 다른 언어)에 따라 다릅니다. 따라서 페이지의 모든 요소와 마찬가지로 컨트롤에 클라이언트 스크립트 이벤트 처리를 추가할 수 있습니다. 그러나 경우에 따라서는 컨트롤에서 결과를 렌더링하는 방식과 컨트롤에 자체적으로 예약된 특성을 고려해야 합니다.
클라이언트 이벤트 처리기를 선언적으로 추가
ASP.NET 서버 컨트롤의 태그에서 특성을 사용하여 속성 값을 설정합니다. 예를 들어 TextBox 컨트롤의 Text 속성을 설정하려면 다음과 같은 태그를 만듭니다.
<asp:textbox id="TextBox1" runat="server" text="Sample Text" />
컨트롤의 속성에 매핑되지 않는 특성을 포함하는 경우, ASP.NET에서는 서버를 처리하는 동안 이 특성을 무시하고 컨트롤에서 생성된 태그 안에 이 특성을 있는 그대로 포함하여 브라우저에 전달합니다. 예를 들어 TextBox 컨트롤에는 onkeyup이라는 속성이 없습니다. 따라서 TextBox 컨트롤에 대한 태그에 onkeyup 특성을 포함하면 이 특성이 브라우저에 전달됩니다. 이 동작을 사용하면 태그에서 이벤트 바인딩을 선언하여 서버 컨트롤에 추가할 수 있습니다. 예를 들어 TextBox 컨트롤에 대해 다음과 같은 태그를 작성하면 사용자가 텍스트 상자에서 키를 누를 때마다 spanCounter라는 span 요소의 현재 텍스트 길이가 텍스트 상자에 표시됩니다.
<asp:textbox id="TextBox1" runat="server" text="Sample Text" onkeyup="spanCounter.innerText=this.value.length;" />
이벤트는 다음과 같이 페이지의 다른 곳에서 클라이언트 스크립트에 정의된 메서드를 호출할 수도 있습니다.
<asp:textbox id="TextBox1" runat="server" text="Sample Text" onkeyup="DisplayCount(this);" />
서버 코드에 사용하는 언어(Visual Basic 또는 C#)는 항상 ECMAScript로 작성되는 클라이언트 스크립트에 아무런 영향을 주지 않습니다.
자세한 내용은 방법: ASP.NET 웹 서버 컨트롤에 클라이언트 스크립트 이벤트 추가를 참조하십시오.
서버 코드에 특성 추가
통과 특성을 선언적으로 컨트롤에 추가할 수 있을 뿐만 아니라 서버 코드를 사용하여 프로그래밍 방식으로 특성을 추가할 수도 있습니다. 이 방법은 추가할 특성의 값이 동적인 경우 유용합니다. 자세한 내용은 방법: ASP.NET 웹 페이지에서 컨트롤의 HTML 특성 설정을 참조하십시오.
클라이언트 스크립트에서 서버 컨트롤 식별
ASP.NET 서버 컨트롤이 렌더링되는 경우 이 컨트롤의 ClientID 속성이 결과 요소의 id 및 name 특성으로 페이지에 렌더링됩니다. ClientID 속성은 사용자가 설정한 ID 속성에서 자동으로 생성됩니다. 예를 들어 다음과 같은 ASP.NET 서버 컨트롤을 만들 수 있습니다.
<asp:textbox id="TextBox1" runat="server" text="Sample Text" />
ClientID 속성은 TextBox1으로 설정되고 HTML 기반 브라우저의 결과 요소는 다음과 같이 나타납니다.
<input name="TextBox1" type="text" value="Sample Text" id="TextBox1" />
참고
form 요소는 ID 특성만 렌더링하고 name 특성은 렌더링하지 않습니다.
따라서 이러한 특성을 사용하여 클라이언트 스크립트에서 서버 컨트롤을 참조할 수 있습니다. 일반적으로 클라이언트 스크립트에서 정규화된 참조를 사용하여 컨트롤을 지정해야 합니다. 컨트롤이 페이지에서 form 요소의 자식인 경우에는 다음 코드 예제와 같은 구문을 사용하여 클라이언트 스크립트에서 컨트롤을 참조합니다.
document.forms[0].TextBox1.value = "New value";
두 번째 예제에서는 페이지의 form 요소에 form1으로 설정된 id 특성이 있다고 가정합니다.
서버 컨트롤을 참조하는 데 필요한 정확한 구문은 현재 사용 중인 컨트롤 및 이 컨트롤이 다른 컨트롤의 자식인지 여부에 따라 다릅니다. 컨트롤을 참조하는 방법을 잘 모를 경우에는 페이지를 실행하여 소스를 검토하고 컨트롤이 렌더링된 방법을 확인하면 도움이 됩니다.
다른 컨트롤 내에 렌더링되는 컨트롤 참조
일부 컨트롤은 자식 컨트롤을 페이지에 렌더링합니다. 예를 들면 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 속성을 가져온 다음 동적 스크립트에 포함합니다.
페이지에 동적으로 클라이언트 스크립트 추가
대부분의 경우 페이지에 대한 클라이언트 스크립트를 선언적으로 만들 수 있는데 대개 스크립트 블록 형식으로 만듭니다. 그러나 경우에 따라 동적으로 클라이언트 스크립트를 만들 수도 있습니다. 이 방법은 스크립트 또는 스크립트의 값이 서버에서만 사용할 수 있는 정보에 따라 달라지는 경우 유용합니다. 예를 들어 응용 프로그램을 실행할 때까지 이름(ID)을 알 수 없는 서버 컨트롤을 처리하는 페이지에 클라이언트 스크립트를 삽입할 수 있습니다.
파일을 참조하는 클라이언트 스크립트 include 문을 삽입할 수도 있습니다. 이 방법은 클라이언트 스크립트를 페이지 자체가 아니라 .js 파일에 유지하는 경우 유용하고, 특히 스크립트를 직접 허용하지 않는 브라우저에서 응용 프로그램이 사용되는 경우 적합합니다.
ClientScriptManager 클래스의 메서드(예: RegisterClientScriptBlock, RegisterStartupScript)를 호출하여 클라이언트 스크립트 또는 클라이언트 스크립트 include 문을 페이지에 삽입할 수 있습니다. 자세한 내용은 방법: ASP.NET 웹 페이지에 동적으로 클라이언트 스크립트 추가를 참조하십시오.
모든 메서드에 대해 스크립트 블록이 연결되는 형식을 제공하고 스크립트 블록에 키를 부여합니다. 형식을 제공하면 페이지와 컨트롤(사용자 지정 컨트롤 또는 사용자 정의 컨트롤)이 모두 같은 페이지에 스크립트 블록을 추가하는 경우 충돌을 방지할 수 있습니다. 키를 사용하면 중복 문제를 방지할 수 있습니다. 스크립트를 추가할 메서드 중 하나를 호출하는 경우 키와 형식이 같은 스크립트가 이미 있으면 스크립트가 다시 추가되지 않습니다.
형식과 키를 제공하면 불필요한 중복 문제를 방지할 수 있으므로 일반적으로 스크립트 블록이 이미 있는지 여부를 명시적으로 확인할 필요가 없습니다. 그러나 응용 프로그램에서 기존 스크립트 블록이 있는지 확인하는 것이 유용할 경우에는 다음 메서드를 호출할 수 있습니다.
IsClientScriptBlockRegistered
IsClientScriptIncludeRegistered
IsOnSubmitStatementRegistered
IsStartupScriptRegistered
서버 컨트롤에 대한 클라이언트 Click 이벤트 발생
이 항목의 앞부분에서 설명했듯이 컨트롤의 태그에 특성을 추가하여 대부분의 ASP.NET 서버 컨트롤에 클라이언트 Click 이벤트를 추가할 수 있습니다. 그러나 일부 컨트롤은 서버 이벤트에 대한 바인딩을 정의하기 위해 특성을 예약합니다. 예를 들면 Button, LinkButton 및 ImageButton 컨트롤 등이 여기에 해당합니다. 이러한 컨트롤에서는 특성을 선언적으로 사용하여 클라이언트 스크립트 처리기를 컨트롤에 추가할 수 없습니다.
다음과 같은 두 가지 방법을 사용하여 Click 이벤트에 대한 클라이언트 스크립트 처리기를 추가할 수 있습니다.
컨트롤의 OnClientClick 속성을 실행 대상 스크립트로 설정합니다. Button 컨트롤이 렌더링되면 OnClientClick 값이 특성으로 변환됩니다.
컨트롤의 Attributes 컬렉션에 대한 Add 메서드를 호출하여 특성을 프로그래밍 방식으로 추가합니다.
다음 코드 예제에서는 클라이언트측 및 서버 Click 이벤트를 모두 발생시키는 Button 컨트롤을 보여 줍니다.
<asp:button id="Button1" runat="server" OnClientClick="return confirm('Ok to post?')" ="Button1_Click" Text="Click!" />
클라이언트 스크립트와 서버 코드 간에 정보 공유
일반적으로 클라이언트 스크립트와 서버 코드는 직접 통신할 수 없습니다. 예를 들어 클라이언트 스크립트 함수는 다시 게시 이벤트가 실행되는 동안 서버 코드에 직접 값을 전달할 수 없습니다.
참고
클라이언트 콜백을 구현하는 경우 클라이언트 스크립트에서 서버 코드를 직접 호출할 수 있습니다. 자세한 내용은 ASP.NET 웹 페이지에서 다시 게시하지 않는 클라이언트 콜백 구현을 참조하십시오.
그러나 클라이언트 스크립트와 서버 코드가 간접적인 방식으로 상호 작용하도록 할 수 있습니다. 페이지에 HiddenField 컨트롤을 추가하는 것이 한 가지 방법이 됩니다. 그런 다음 둘 중 하나의 코드 블록에 값을 저장하고 다른 코드 블록에서 값을 읽는 방식으로 클라이언트 스크립트와 서버 코드에서 ID를 기준으로 숨김 필드를 참조할 수 있습니다. 서버 코드에서 클라이언트 스크립트로 정보를 전달하려면 RegisterHiddenField 메서드를 사용하여 프로그래밍 방식으로 숨김 필드를 만듭니다. 이 메서드를 사용하면 필드에 ID와 값을 지정하여 클라이언트 스크립트에서 값을 읽을 수 있는 방식으로 페이지에 동적 값을 저장할 수 있습니다.
쿠키를 사용하여 서버 코드와 클라이언트 스크립트 간에 값을 공유할 수도 있습니다. 서버 코드에서 쿠키를 작성하고 읽는 데 대한 자세한 내용은 방법: 쿠키 작성 및 방법: 쿠키 읽기를 참조하십시오.
다시 게시하지 않고 클라이언트 스크립트에서 서버 코드 호출
ASP.NET 웹 페이지에 대한 일반적인 시퀀스에서는 서버 코드를 실행하는 각 사용자 작업을 다시 게시해야 합니다. 그러나 클라이언트 콜백을 구현하는 코드를 작성할 수도 있습니다. 이 시나리오에서는 전체 다시 게시 과정을 수행하지 않고 페이지를 실행하도록 클라이언트 스크립트가 서버에 요청을 보냅니다. 그러면 이 페이지에서는 메서드를 실행하고 메서드 결과를 브라우저의 클라이언트 함수로 반환할 수 있습니다. 클라이언트 콜백은 서버에서 정보를 가져오는 동안 지역 변수와 같은 클라이언트 상태를 유지하려는 경우에 유용합니다.
자세한 내용은 ASP.NET 웹 페이지에서 다시 게시하지 않는 클라이언트 콜백 구현을 참조하십시오.
-MSDN-
ms-help://MS.VSCC.v80/MS.MSDN.v80/MS.NETDEV.v10.en/dnaspp/html/clientsidescript.htm
[펌] http://honor1.tistory.com/37?srchid=BR1http%3A%2F%2Fhonor1.tistory.com%2F37
