Button 웹 서버 컨트롤 개요

업데이트: 2007년 11월

ASP.NET 단추 웹 서버 컨트롤을 사용하면 사용자가 서버에 페이지를 게시하고 페이지에서 이벤트를 트리거할 수 있습니다.

이 항목의 내용은 다음과 같습니다.

  • 배경

  • 코드 예제

  • 클래스 참조

배경

Button 웹 서버 컨트롤을 사용하면 사용자가 서버에 페이지를 게시할 수 있습니다. 컨트롤에서는 포스트백에 응답하기 위해 처리할 수 있는 서버 코드의 이벤트를 트리거합니다. 예를 들어 사용자는 폼을 완료했거나 특정 명령을 수행하려 한다는 것을 나타낼 수 있습니다.

ASP.NET에는 다음 표에 나열된 대로 웹 페이지에서 각각 다르게 나타나는 세 가지 종류의 단추 컨트롤이 포함되어 있습니다.

컨트롤

설명

Button

HTML input 요소로 렌더링되는 표준 명령 단추를 표시합니다.

LinkButton

페이지의 하이퍼링크로 렌더링됩니다. 그러나 이 컨트롤에는 폼을 서버로 포스트백을 수행하는 클라이언트측 스크립트가 포함됩니다. 실제 하이퍼링크를 만들려면 HyperLink 웹 서버 컨트롤을 사용합니다.

ImageButton

그래픽을 단추로 렌더링합니다. ImageButton 컨트롤은 화려한 모양의 단추를 표시하는 데 유용할 뿐만 아니라 또한 ImageButton 컨트롤은 그래픽 내에서 클릭한 좌표에 대한 정보를 제공합니다.

HtmlButtonHtmlInputButton 컨트롤을 사용해도 페이지에 서버 코드에서 프로그래밍할 수 있는 단추를 만들 수 있습니다. HTML과 웹 서버 컨트롤 간의 차이점에 대한 자세한 내용은 ASP.NET 웹 서버 컨트롤 개요를 참조하십시오.

ImageMap 컨트롤을 사용하면 사용자가 포스트백 또는 다른 작업을 수행하기 위해 클릭할 수 있는 핫 스폿이 있는 그래픽을 만들 수 있습니다.

Button 이벤트

사용자가 웹 서버 컨트롤 단추를 클릭하면 서버에 페이지가 전달됩니다. 그러면 웹 페이지가 처리되고 서버 기반 코드에 보류 중인 모든 이벤트가 발생됩니다. 단추가 자체적으로 Click 이벤트를 발생시키도록 이 이벤트에 대한 이벤트 처리기를 작성할 수도 있습니다.

단추 컨트롤 및 유효성 검사

페이지에 기본적으로 ASP.NET 유효성 검사 컨트롤이 포함되어 있는 경우 단추 컨트롤을 클릭하면 유효성 검사 컨트롤이 검사를 수행합니다. 유효성 검사 컨트롤에 대해 클라이언트측 유효성 검사가 활성화되어 있는 경우 유효성 검사에 실패하면 페이지가 전송되지 않습니다.

다음 표에서는 유효성 검사 프로세스를 보다 정밀하게 제어할 수 있도록 단추 컨트롤에서 지원하는 속성에 대해 설명합니다.

속성

설명

CausesValidation

단추를 클릭하면 유효성 검사도 수행할 것인지 여부를 지정합니다. 유효성 검사를 수행하지 않으려면 이 속성을 false로 설정합니다.

ValidationGroup

단추를 클릭하면 페이지에서 호출되는 유효성 검사기를 지정할 수 있습니다. 유효성 검사 그룹을 설정하지 않은 경우 단추를 클릭하면 페이지에 있는 모든 유효성 검사기가 호출됩니다.

자세한 내용은 ASP.NET 웹 페이지에서 사용자 입력 유효성 검사를 참조하십시오.

단추 포스트백 동작

사용자가 단추 컨트롤을 클릭하면 페이지가 서버에 포스트백됩니다. 기본적으로 페이지는 해당 페이지로 포스트백되므로 같은 페이지가 다시 생성되고 페이지의 컨트롤에 대한 이벤트 처리기가 처리됩니다.

현재 페이지를 다른 페이지로 게시하도록 단추를 구성할 수도 있습니다. 이러한 구성은 다중 페이지 양식을 만드는 데 유용합니다. 자세한 내용은 ASP.NET 웹 페이지에서 페이지 간 게시를 참조하십시오.

기본적으로 Button 컨트롤은 HTML POST 연산을 사용하여 페이지를 전송합니다. LinkButtonImageButton 컨트롤은 HTML POST 연산을 직접 지원할 수 없습니다. 따라서 이러한 단추를 사용할 때는 컨트롤이 페이지를 프로그래밍 방식으로 전송할 수 있도록 하는 클라이언트 스크립트를 페이지에 추가해야 합니다. 따라서 LinkButtonImageButton 컨트롤을 사용하려면 브라우저에 클라이언트 스크립트가 활성화되어 있어야 합니다.

어떤 경우에는 Button 컨트롤이 포스트백 작업을 수행하는 클라이언트 스크립트를 사용할 수도 있습니다. 이렇게 하면 포스트백을 페이지의 요소에 첨부하는 등 프로그래밍 방식으로 조작하는 경우 편리합니다. Button 컨트롤의 UseSubmitBehavior 속성을 true로 설정하면 Button 컨트롤이 클라이언트 스크립트 기반의 포스트백을 사용하게 됩니다.

UpdatePanel 컨트롤에서 단추 사용

부분 페이지 렌더링을 사용하면 포스트백 없이 페이지 부분을 새로 고칠 수 있습니다. UpdatePanel 컨트롤을 사용하여 부분 페이지 렌더링에 참여하는 페이지 부분을 표시할 수 있습니다. Button 컨트롤을 비롯하여 UpdatePanel 컨트롤 내에 있는 컨트롤의 기본 동작은 포스트백 대신 비동기 포스트백을 수행하는 것입니다. 이 동작을 수행하면 포스트백이 시작된 UpdatePanel 컨트롤의 내용만 새로 고쳐집니다.

UpdatePanel 컨트롤 내부에 있는 Button 컨트롤의 시나리오 이외에 사용자는 다음 시나리오에서도 UpdatePanel 컨트롤에 Button 컨트롤을 사용할 수 있습니다.

  • UpdatePanel 컨트롤 외부에 있는 Button 컨트롤을 해당 패널에 대한 AsyncPostBackTrigger 컨트롤로 정의합니다. 단추를 클릭하면 비동기 포스트백을 수행하고 패널의 내용을 새로 고칩니다.

  • UpdatePanel 컨트롤 내부에 있는 Button 컨트롤을 해당 패널에 대한 PostBackTrigger 컨트롤로 정의합니다. 이 Button 컨트롤이 UpdatePanel 컨트롤 내부에 있어도 단추를 클릭하면 포스트백을 수행합니다.

부분 페이지 렌더링 및 UpdatePanel 컨트롤 사용법에 대한 자세한 내용은 UpdatePanel 컨트롤 개요부분 페이지 렌더링 개요를 참조하십시오.

단추 컨트롤에 대한 클라이언트측 이벤트 처리

단추 컨트롤은 서버 이벤트와 클라이언트 이벤트를 모두 발생시킬 수 있습니다. 서버 이벤트는 포스트백이 완료된 후에 발생하며 페이지에 대해 작성된 서버측 코드에서 처리됩니다. 클라이언트 이벤트는 일반적으로 ECMAScript(JavaScript) 같은 클라이언트 스크립트에서 처리되며 페이지를 전송하기 전에 발생합니다. 클라이언트측 이벤트를 ASP.NET 단추 컨트롤에 추가하면 페이지를 전송하기 전에 확인 대화 상자 표시 같은 작업을 수행하고 전송을 취소할 수도 있습니다. 자세한 내용은 ASP.NET 웹 페이지의 클라이언트 스크립트방법: 클라이언트 스크립트에서 단추 웹 서버 컨트롤 이벤트에 응답을 참조하십시오.

데이터 컨트롤의 단추

Button 웹 서버 컨트롤은 주로 DataList, GridViewRepeater 목록 컨트롤에 있는 데이터 컨트롤에 사용됩니다. 이러한 경우 일반적으로 단추 클릭 이벤트에 직접 응답하지 않습니다. 대신 데이터 컨트롤의 단추는 데이터 컨트롤에 해당하는 이벤트를 발생시킵니다. 예를 들어 DataList 컨트롤에 있는 단추를 클릭하면 Button 컨트롤의 Click 이벤트를 발생시키는 대신 DataList 컨트롤의 ItemCommand 이벤트를 발생시킬 수 있습니다.

데이터 바인딩된 목록 컨트롤에는 여러 단추가 포함될 수 있으므로 단추의 CommandArgument 속성을 설정하여 이벤트의 일부로 전달할 값을 지정할 수 있습니다. 그러면 이 인수를 테스트하여 어떤 단추가 클릭되었는지 확인할 수 있습니다.

컨트롤에 데이터 바인딩

Button 웹 서버 컨트롤을 데이터 소스에 바인딩하여 그 속성 설정을 동적으로 제어할 수 있습니다. 예를 들어 데이터 바인딩을 사용하여 단추의 Text 속성을 설정할 수 있습니다.

코드 예제

방법: Web Forms 페이지에 Button 웹 서버 컨트롤 추가(Visual Studio)

방법: Web Forms 페이지에 ImageButton 웹 서버 컨트롤 추가(Visual Studio)

방법: ImageButton 웹 서버 컨트롤에서 좌표 확인

방법: Button 웹 서버 컨트롤 이벤트에 응답

방법: 클라이언트 스크립트에서 단추 웹 서버 컨트롤 이벤트에 응답

맨 위로 이동

클래스 참조

다음 표에서는 단추 컨트롤과 관련된 핵심 클래스를 보여 줍니다.

멤버

설명

Button, LinkButton, ImageButton

단추 컨트롤의 기본 클래스입니다.

맨 위로 이동

참고 항목

작업

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

개념

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

ASP.NET 웹 페이지에서 페이지 간 게시