지금까지는 일반적인 모양의 버튼 컨트롤 기능에 대해서 논의해 보았다. 하지만, ASP.NET은 일반적인 버튼 모양이 아닌 조금은 다른 모양의 버튼 컨트롤도 제공하는데, 그것은 LinkButton과 ImageButton 이다. 기능과 코드는 Button과 거의 일치한다. 여러분은 단지 Buttons.aspx 소스에서 Button 이라는 부분을 LinkButton 이라는 이름으로 대체하는 것만으로도 Button 컨트롤 대신 LinkButton 버튼을 사용할 수 있다.

먼저 UI 페이지를 열도록 하자. [솔루션 탐색기]에서 Buttons.aspx 페이지에 마우스를 우측 클릭한 다음 그림과 같이 [디자이너 보기]를 선택하면 UI 디자이너로 전환할 수 있을 것이며, 어렵지 않게 HTML 소스 모드로 다시 전환할 수 있을 것이다.

HTML 소스에서 asp:Button 이라는 부분을 모두 asp:LinkButton 이라고 바꾸어 보자. 닫는 태그까지 모두 10개를 바꾸면 될 것이다. 그리고, 비하인드 코드 페이지로 가서 다음과 같이 개체변수 선언부분의 Button 이라는 클래스를 모두 LinkButton 으로 바꾸어 보자.

모두 바꾸었다면 수정된 aspx 페이지를 컴파일 하고 실행해 보도록 하자. 다음과 같은 결과 화면을 확인할 수 있을 것이다.

결과화면으로는 재미있게도 모든 버튼 컨트롤이 하이퍼링크로 바뀐 것을 볼 수 있다. 하지만, 주의해야 한다. 눈에 보이기에는 하이퍼링크일지 모르겠지만, 이 하이퍼링크는 사실 버튼의 역할을 하는 링크 버튼이다. 즉, 모습만 하이퍼링크인 버튼 컨트롤인 것이다. LinkButton은 버튼 컨트롤이며, 외형만 하이퍼링크의 형태를 갖는 컨트롤이다.

물론, aspx 페이지를 새로 만들고 그 위에 LinkButton을 올려서 페이지를 구성할 수도 있겠지만, 위 예제의 경우에는 Button 컨트롤의 모든 코드를 LinkButton으로 바꾸는 작업을 통해서도 같은 결과를 얻을 수 있다는 것을 보여주기 위해서 그렇게 한번 해 보았다. Button 컨트롤과 LinkButton 컨트롤은 외양만 다를 뿐, 기능은 정확히 같다. 그렇기에 이러한 방법이 가능한 것이다. 재미있다. 그렇지 않은가?

버튼 컨트롤이 이처럼 여러 형태의 외양을 제공하기에 여러분은 페이지 UI를 좀 더 구미에 맞게 작성할 수가 있다. 일반 버튼(Push 버튼이라고도 부른다), 하이퍼링크 형태의 버튼과 더불어 ASP.NET 은 또 다른 형태의 외양을 갖는 ImageButton도 제공한다. 이번에는 이 컨트롤을 한번 사용해 보도록 하자.

이전 예제와 같은 방법으로 소스를 약간 수정하여 LinkButton을 ImageButton으로 바꾸려 시도할 수도 있겠지만, 그럴 경우 이번에는 바꾸어야 할 사항이 조금은 많은 편이다. 이유는 ImageButton 컨트롤은 이미지를 나타내야 하는 조금은 복잡한 컨트롤이기 때문이다. 물론, 소스를 직접적으로 수정해서 이미지 버튼 컨트롤로 대체할 수 없는 것은 아니지만, 그 작업은 시작하는 여러분에게는 자못 어렵게 느껴질 수 있다. 해서, 이번에는 새롭게 예제를 하나 더 만들어서 ImageButton 컨트롤을 테스트 해 보려 한다.

ASP.NET ImageButton Control

ImageButtons.aspx 라는 새로운 웹 폼 페이지를 추가하고, ImageButton 컨트롤을 웹 폼 위에 올려놓도록 하자. 이미지 버튼에 이미지를 나타내기 위해서는 약간의 이미지도 필요한데, 그 이미지는 다운로드 받은 파일 중 현재 장(Chapter)에 해당하는 폴더에서 얻을 수 있다. 이미지를 구했다면 여러분의 웹 어플리케이션에 이미지들을 모아둘 새로운 폴더를 Images 라는 이름으로 하나 만들도록 하자. 다음 그림을 참고하여 폴더를 만들고, 이미지들을 모두 그곳에 복사해 넣도록 하자.

리소스(이미지들)가 준비되었다면, 다음 그림과 표를 참고로 하여 웹 폼 페이지를 꾸며보도록 하자.

ImageButton의 AlternateText 속성은 이미지를 나타낼 수 없을 경우, 이미지를 대체하여 출력할 텍스트 문자열이며, ImageUrl 속성은 버튼에 나타낼 이미지의 상대적인 경로를 나타낸다.

페이지의 UI가 완성되었으면, 각 버튼들이 해야할 일을 설정하도록 하자. 우선 웹 폼에서 imgBtnSubmit 라는 id를 갖는 이미지 버튼 컨트롤을 더블 클릭하도록 하자. 그러면, VS.NET은 코드 비하인드 페이지로 전환되며, 다음과 같은 버튼 클릭 이벤트 함수 코드를 자동으로 생성해 줄 것이다.

이는 기존의 버튼 컨트롤의 클릭 이벤트 함수와 거의 동일하지만, 한가지 다른 부분이 있다. 그것은 함수의 두 번째 인자로 ImageClickEventArgs가 지정되어 있다는 점이다. 이 두 번째 인자 개체는 우리에게 이미지 버튼만이 갖는 유용한 정보를 추가적으로 제공해 주는데, 그것은 사용자가 클릭한 이미지의 좌표 값(X,Y)을 얻어낼 수 있다는 것이다. 그렇다면, 함수 안에 다음과 같은 코드를 작성하여, 출력 결과에 클릭된 이미지의 좌표 값도 나타내 보도록 하자.

lblDisplay.Text = “ImageButton is Clicked!! 클릭된 위치 (X:” + e.X + “ , Y:” + e.Y + “)”;

그리고, 나머지 3개의 ImageButton은 명령 버튼으로 동작하게끔 해 보자. 각각의 이미지 버튼의 Command 이벤트에 imgBtnCommand_Command 라는 함수 명을 지정하고(기억이 나지 않는다면, 이전 Button 컨트롤에서의 설정 방법을 참고하라) 함수 명을 더블클릭 하자. VS.NET은 코드 비하인드 페이지로 전환되며, 다음과 같은 Command 이벤트 함수 코드를 자동으로 생성해 줄 것이다.

이제 함수 내에 다음과 같이 코딩 해 보자. (한 줄로 코딩 한다)

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

즉, 코드를 다음과 같이 구성하면 된다.

이제 페이지를 컴파일 하고, 실행해 보도록 하자. 일반 전송 이미지 버튼이 클릭되었을 경우와, 명령 이미지 버튼이 클릭되었을 경우의 결과화면은 각각 다음과 같을 것이다.

버튼이 이미지로 출력된다는 것을 제외하면 기존의 Button, LinkButton 컨트롤이 동작하는 방식과 동일하다. 단지, 이미지 전송 버튼의 경우는 이미지의 클릭 좌표 값을 추가적으로 얻어낼 수 있다는 것이 새롭다. 이 좌표 값은 Click 이벤트에서만 얻어낼 수 있으며, Command 이벤트에서는 얻어낼 수가 없다. 이 좌표 값은 여러분이 ImageButton을 마치 이미지 맵(Image Map)처럼 사용할 수 있게 해줄 것이지만 그런 식으로 사용할 일이 그리 많지는 않을 것이다.

ASP.NET 웹 폼 컨트롤 중 첫 번째로 버튼 컨트롤들에 대해서 알아보았다. 버튼 컨트롤은 여러분이 그리 어렵지 않게 이해할 수 있는 간단, 명료한 컨트롤이기는 하지만, 이 컨트롤을 명령 버튼으로써도 사용할 수 있다는 사실을 반드시 기억해 두기 바란다. 나중에 DataGrid 컨트롤을 다룰 경우 보게 되겠지만, 버튼 컨트롤들은 Command 컨트롤로써도 자주 사용된다.

3가지 종류의 버튼 중 어떤 버튼이 가장 많이 사용될 것으로 생각되는가? 개인적으로는 일반 버튼 컨트롤이라고 말하고 싶지만, 사이트의 아름다운 디자인을 선호하는 국내에서라면 일반버튼이나 링크버튼보다는 이미지 버튼이 가장 많이 사용되지 않을까 추측해 본다.