강좌 전 태오의 잡담>

... 조금만 더 힘을 내자... 파이팅... o_o

ASP.NET Button Control

버튼 컨트롤로는 3가지 스타일의 버튼이 제공되는데, 일반 버튼(Button), 링크 버튼(LinkButton), 이미지 버튼(ImageButton)이 그것이다. 버튼은 주로 폼에서 작업을 완료했거나 특정 명령을 수행할 경우 사용한다. 이러한 3 가지 모양의 버튼은 모습만 다를 뿐 수행하는 역할은 동일하다고 볼 수 있다. 버튼 컨트롤은 다음과 같은 계층 구조를 가지고 있다.(ImageButton의 경우는 조금 다르다)

다시 말하면, 버튼 컨트롤도 WebControl 클래스의 모든 기능을 상속 받아 보유하고 있다는 이야기가 된다. 더해서, 버튼 컨트롤은 추가적으로 자신만의 독특한 2개의 이벤트 함수를 노출하는데, 하나는 Click이고, 다른 하나는 Command이다. 이전에 정리한 표를 확인해 보기 바란다.

또한, 버튼 컨트롤은 WebControl 클래스로부터 상속되는 속성들 외에 CommandName과 CommandArgument 라는 추가적인 속성들도 가지고 있는데, 이 두 속성은 버튼을 통해 특정 명령을 수행하고자 할 경우에 사용할 수 있는 속성으로 Command 이벤트와 밀접한 관계를 가지고 있다.

그렇다면, 버튼 컨트롤의 여러 가지 기능을 예제를 통해서 익혀보도록 하자. VS.NET을 열고, 이전에 만들어 두었던 TaeyoAspNet 웹 어플리케이션을 로드 한다.(만일, VS.NET을 닫지 않고 있었다면 그를 계속해서 사용한다) 그리고, 다음 그림처럼 솔루션에 새로운 웹 폼을 하나 추가하자.

새로운 웹 폼 페이지의 이름은 Buttons.aspx라고 주도록 하자.

그리고, 웹 폼을 다음 그림처럼 구성해 보도록 하자.

처음이니 어려울 수도 있을 것이다. 그렇다면, 필자와 함께 하나씩 컨트롤들을 추가하고, 컨트롤들의 속성을 지정해 보도록 하자. 우선 “ASP.NET 이 웹 어플리케이션을 위한 최적의 기술이라 생각하십니까?” 라는 문자열을 웹 폼 위에 직접 입력하고, 그 옆으로 두 개의 버튼을 올려 놓는다. 첫 번째 버튼의 경우는 [속성 창]에서 다음 그림과 같이 id 값으로 btnYes를 지정하고, BorderStyle 값으로는 Groove를, Text 값으로는 Yes를 지정하도록 한다.

두 번째 버튼은 id 값으로 btnNo를 지정하고, BorderStyle 값으로 Groove를, Text 값으로 No를 지정하도록 한다.

그리고, 앞 페이지에서 보여주었던 웹 폼의 디자인을 참고하여 나머지 부분을 꾸며보자. “명령 버튼의 예 : “ 라는 문자열을 작성하고, 그 뒤로 3개의 버튼을 올려놓도록 하자. 우선 첫 번째 버튼의 id 를 Button1 라고 지정하고, 기존 버튼들과 마찬가지로 BorderStyle 값으로 Groove를 지정한다. 그리고, Text 속성의 값으로는 '추가'라고 지정하도록 한다. 이것은 이전 btnYes, btnNo 버튼의 설정과 유사하므로 그림으로 다시금 보여줄 필요는 없을 것이다. 단, 추가적으로 현재 버튼의 CommandName 과 CommandArgument 속성의 값을 각각 다음과 같이 'Add', 'taeyo' 라고 지정하도록 한다.

그리고, 두 번째 버튼의 경우는 id를 Button2 라고 설정하고, BorderStyle 은 Groove, Text 는 '수정' 으로 설정하고, CommandName과 CommandArgument 속성은 각각 'Edit', 'taiji' 라고 설정한다.

마지막으로, 세 번째 버튼의 경우는 id 값을 Button3이라고 설정하고, BorderStyle은 Groove, Text 속성의 값은 '삭제'로 설정하고, CommandName과 CommandArgument 속성의 값은 각각 'Delete', 'queen' 이라고 설정한다.

마지막으로 페이지의 가장 하단에 Label 컨트롤을 하나 추가하도록 하자. Label 컨트롤의 id는 lblDisplay라고 주도록 하고, Text 속성의 값은 공백으로 두도록 하자. 이것을 표로 정리하면 다음과 같다. 이후로는 각각의 컨트롤들의 속성 설정을 다음과 같이 표로 나타낼 것이다.

Button	id	btnYes
	BorderStyle	Groove
	Text	Yes
Button	id	btnNo
	BorderStyle	Groove
	Text	No
Button	id	Button1
	BorderStyle	Groove
	Text	추가
	CommandName	Add
	CommandArgument	Taeyo
Button	id	Button2
	BorderStyle	Groove
	Text	수정
	CommandName	Edit
	CommandArgument	Taiji
Button	id	Button3
	BorderStyle	Groove
	Text	삭제
	CommandName	Delete
	CommandArgument	Queen
Label	id	LblDisplay
	Text

이제 UI는 모두 준비되었다. 버튼 컨트롤을 배워보기 위한 준비가 매우 거창한 편이기는 했지만, 이것이 VS.NET으로 꾸미는 첫 번째 예제이기에 비교적 구체적으로 설명하고 있는 것이다. 이후의 예제에서는 여러분의 능력을 믿기에, 가급적 간략하게 서술하도록 하겠다.

자. 이제 각각의 버튼이 눌려질 경우, 어떠한 작업을 할 것인지 알아보자. 사실 대단한 작업은 아니다. 단지 버튼이 클릭 될 경우, Label 컨트롤에 그 이벤트가 발생했음을 나타내는 것이 전부이다. 하지만, 이 예제를 통해서 버튼 컨트롤의 Click 이벤트와 Command 이벤트, 그 각각의 용도에 대해 이해할 수 있게 될 것이다.

우선 웹 폼에서 [Yes] 라는 텍스트의 버튼을 더블 클릭하도록 하자. 그러면, VS.NET은 코드 비하인드 페이지로 이동하며, 다음과 같은 코드를 자동으로 생성해 줄 것이다.

private void btnYes_Click(object sender, System.EventArgs e)
{
}

이전 장에서 우리가 직접 작성했던 예제(Start.aspx)를 떠올려보면 VS.NET가 이전의 경우와 매우 유사하게 이벤트 함수를 만들어 준다는 것을 알 수 있다. 버튼 컨트롤의 id 명에 Click 이라는 이벤트 명이 붙은 형식으로 함수의 이름이 만들어지며, 함수의 인자도 이전의 예제와 일치한다. 이제 btnYes 버튼이 클릭 되었을 경우 실행될 코드들을 함수 안에 다음과 같이 작성하도록 한다.

private void btnYes_Click(object sender, System.EventArgs e)
{
    lblDisplay.Text = "YES 버튼을 클릭하셨습니다.";
}

이제, 페이지가 실행되고 [Yes] 버튼이 클릭 될 경우, 폼은 서버로 전송될 것이고, btnYes_Click 이벤트 함수가 동작하여, lblDisplay 이란 id를 갖는 Label 컨트롤에 “YES 버튼을 클릭하셨습니다.” 라는 문자열이 출력될 것이다.

버튼이 클릭되는 등의 이벤트가 발생할 때마다, 일단 폼은 서버로 서브밋된다는 사실을 기억하자.

이번에는 다시 웹 폼의 디자인 모드로 돌아가서 [No] 라는 버튼을 더블 클릭하자. 그러면 다음과 같은 코드를 또한 자동으로 생성해 줄 것이다. VS.NET은 개발자를 대신해 이렇듯 대부분의 코드를 자동으로 생성해 준다. 이 얼마나 편리한 기능인가?

private void btnNo_Click(object sender, System.EventArgs e)
{
}

이 이벤트는 [No] 버튼이 클릭 되었을 경우에, 동작하는 이벤트 함수이다. 함수 안에는 다음과 같은 코드를 추가하도록 하자

private void btnNo_Click(object sender, System.EventArgs e)
{
    lblDisplay.Text = "NO 버튼을 클릭하셨습니다.";
}

이제, 페이지가 실행되고 [No] 버튼이 클릭 될 경우, 폼은 서버로 전송될 것이고, btnNo_Click 이벤트 함수가 동작하여, lblDisplay란 id를 갖는 Label 컨트롤에 “NO 버튼을 클릭하셨습니다.” 라는 문자열을 출력할 것이다.

이것이 Click 이벤트이다. 클릭 이벤트는 일반적으로 웹 폼을 서버로 PostBack(자기 자신 페이지로 재전송)을 하는 역할을 담당한다. 기존의 Submit 버튼과 같은 역할을 한다고 보면 된다. 하지만, 간혹(실은 자주) 버튼이 클릭 되었을 경우, 특정 명령을 서버로 전송해야 할 경우도 있다. 예를 들면, 게시판의 경우 [삭제] 버튼이 눌렸을 경우에, 서버로 현재의 글을 삭제해야 한다는 명령을 보낼 수 있어야 한다. 이러한 경우에는 추가적인 정보를 서버로 보내줄 필요도 있을 텐데, 그러한 추가적인 정보는 대부분의 경우 해당 글의 고유한 키값이 될 것이다. 그리고, 서버는 전송되어 온 ID 값을 가지고 실제로 “삭제” 명령을 서버에서 수행해야 할 것이고 말이다.

해서, 버튼 컨트롤은 이렇게 명령을 내릴 수 있는 기능도 보유하고 있는데, 그와 관련된 속성이 바로 CommandName, CommandArgument 이다. 버튼 컨트롤의 CommandName 속성에 값을 부여하면, 버튼은 이제 클릭 시 Command 라는 이벤트도 수행하게 된다.(물론, 이에 앞서 Click 이벤트 함수가 서버에서 먼저 실행된다. 단, Click 이벤트가 작성되어 있다면 말이다) 이를 테스트 해보기 위해서 웹 폼에 존재하는 [추가], [수정], [삭제] 3개의 버튼에게(이 버튼들은 CommandName 속성이 지정되어 있는 버튼이다) 공통의 Command 이벤트를 지정해 보도록 하자. 먼저, 다음 그림처럼 [추가] 란 이름의 버튼 컨트롤을 선택하고, [속성 창]에서 번개 모양의 버튼을 클릭한다. 그러면, 여러분은 버튼 컨트롤이 지원하는 여러 이벤트들의 목록을 볼 수 있게 되는데, 여기서 Command 이벤트 란에 “btnCommand_Command”라는 값을 입력하도록 한다. 그리고, 해당 값을 더블 클릭한다.

그러면, 코드 모드로 들어가면서 Command 이벤트 함수가 우리가 지정한 이름으로 만들어지게 된다

참고 이벤트 함수의 두 번째 인자로 제공되는 System.Web.UI.WebControls.CommandEventArgs는 System.Web.UI.WebControls 네임 스페이스가 using 키워드를 통해 페이지에 참조되어 있다면 생략할 수 있다. 하지만, VS.NET은 그것을 생략하지 않고 모두 표기한다. 여러분이 원한다면 네임스페이스 부분은 생략하고 CommandEventArgs 라고만 표기해도 무관하다.

이 함수는 명령 인자(CommandName)를 가진 버튼에 대해 수행되는 함수로써, 버튼 컨트롤에 지정한 CommandName 과 CommandArgument 값은 이벤트 함수의 두 번째 인자로 제공되는CommandEventArgs 이벤트 개체를 통해 얻어낼 수 있다. 이를 확인해 보기 위해, 함수 내에 다음과 같은 코드를 추가 해 보자. (한 줄로 코딩 한다)

lblDisplay.Text = e.CommandName + "명령을 실행합니다. 인자는 " + e.CommandArgument + " 입니다.";

결과로 코드는 다음과 같이 구성될 것이다.

이제, 다시 웹 폼 디자인 모드로 돌아가서, [수정] 버튼과, [삭제] 버튼에도 위와 같이 이벤트를 지정해 주도록 한다. 두 버튼 모두 Command 이벤트 란에([속성 창]에서 번개 모양의 버튼을 클릭하면 나타남) btnCommand_Command 라고 지정하도록 한다. 즉, 3개의 버튼이 모두 Command 이벤트가 발생할 경우, 그 처리를 btnCommand_Command에서 하겠다는 의미이다. 이렇게 하나의 함수에서 여러 Command의 처리를 할 수도 있다. 물론 각각의 함수로 처리해도 되지만, 연관성이 있는 명령이라면 하나의 함수에서 처리하는 것이 더욱 바람직하다.

자. 이제 모든 설정을 다 마쳤다. 필자의 경우 완성된 HTML UI 소스는 다음과 같다

그림에서 보이는 필자의 소스는 VS.NET이 자동으로 추가해주는 몇몇 불필요한 태그들(과 같은)을 삭제하였으며, 페이지를 깔끔하게 보이게 하기 위해 CSS(Cascading Style Sheet)를 따로 하나 만들어 링크를 해 두었다. 이 CSS 파일은 다운로드 받은 파일 중에 Style.css라는 이름으로 존재하고 있다.

다음은 완성된 코드 비하인드 페이지의 모습이다.

이제 페이지를 컴파일 하고, 실행해 보도록 하자. [솔루션 탐색기]에서 우리가 만든 Buttons.aspx 페이지를 선택하고, 마우스 우측 클릭하여 [빌드 및 찾아보기]를 선택하자. 이 명령은 프로젝트 내의 ASP.NET 페이지 전체를 컴파일 한 다음, 현재 선택한 ASP.NET 페이지를 실행하는 명령이다.

컴파일로 인한 약간의 시간이 소요된 뒤, 다음과 같은 결과 화면이 나타날 것이다.

[Yes], [No] 버튼을 눌렀을 경우의 결과와, [추가], [수정], [삭제] 버튼이 눌렸을 경우의 결과를 비교해 보도록 하자. [Yes], [No] 버튼을 눌렀을 경우는 다음과 같은 결과를 마주하게 된다

폼은 단지 서버로 Postback 되며, 발생한 이벤트에 의해 이벤트 함수에 지정된 대로 Yes 버튼이 눌렸는지, No 버튼이 눌렸는지 그 결과만을 Label 컨트롤에 나타나게 한다. 버튼 컨트롤은 단지 폼을 자기 자신에게로 Submit 하는 역할로써 사용되고 있는 것이다.

이번에는 [추가], [수정], [삭제] 버튼이 눌렸을 경우의 결과를 확인해 보도록 하자. 각각의 경우, 지정된 CommandName 과 CommandArgument 에 의해 결과 문자열이 재 구성되는 것을 볼 수 있다.

CommandName과 CommandArgument은 btnCommand_Command 이벤트 함수의 두 번째 인자인 CommandEventArgs 이벤트 인자를 통해 얻어올 수가 있다. 해서 우리의 소스에서는 그 속성 값들을 얻어와 동적으로 문자열을 꾸며두었던 것이다.

내공이 있는 사용자들을 위해서 한마디를 거든다면, 현재 클릭된 버튼 컨트롤의 CommandName 속성 값과 CommandArgument 속성의 값을 반드시 Command 이벤트 함수의 두 번째 인자를 통해서만 얻어올 수 있는 것은 아니다. 이벤트 함수의 첫번째 인자를 통해서도 그 값을 얻어올 수 있는데, 이는 그 첫 번째 인자가 바로 이벤트를 발생시킨 개체 자체를 의미하기에, 그 개체를 Button 컨트롤로 원래대로 형 변환하여 해당 속성의 값들을 얻어올 수도 있는 것이다. 즉, 예를 들면 다음과 같은 코드도 유효하다.

public void btnCommand_Command(Object sender, …)
{
    lblDisplay.Text = ((Button)sender).CommandName + " 명령을 실행합니다. 인자는 " +
                    ((Button)sender).CommandArgument + " 입니다.";
}

물론, 실제 현업에서는 이와 같이 단순히 문자열을 꾸며 출력해주는 목적으로 명령 버튼(일명, Command 버튼)을 사용하지는 않는다. 실제로 버튼을 통해 어떤 명령을 서버에서 처리하기 위해 사용하며, 그럴 경우 버튼 컨트롤은 실행하고자 하는 명령의 구체적인 내용을 CommandName과 CommandArgument를 통해서 서버에게 알릴 수 있다. 차후, 실제 명령 버튼을 유용하게 사용하는 예제를 같이 하게 될 것이다. 지금 당장 그 활용 방법이 연상되지 않는다 하더라도 큰 문제는 없다. 여러분은 이제 막 ASP.NET을 시작하였고 아직 여러분을 즐겁게 해 줄 많은 예제와 기술들이 존재하고 있기 때문이다.