BANANA.Web.MessageBox

BANANA.Web.MessageBox 클래스는 자바스크립트에서도 호출할 수 있고, C#(abc.aspx.cs) 코드에서도 호출할 수 있는 메시지박스 클래스입니다.
MessageBox.Show 함수를 사용하시려면, 해당 페이지를 BANANA.Web.BasePage로부터 상속 받아야 합니다.
아래는 Code Behind 소스의 샘플입니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace BANANA.Web.Framework.Service.HowToUse
{
	public partial class _01_MessageBox : BANANA.Web.BasePage
	{
		protected void Page_Load(object sender, EventArgs e)
		{

		}
	}
}

자~ 우선 자바스크립트에서 메시지박스를 호출하는 방법부터 알아볼까요?

창을 띄우는 방법에는 3가지가 있습니다.
1) Alert: 일반적인 경고메시지를 출력합니다.
2) Confirm: 사용자에게 YES/NO의 옵션을 주어서, 선택하도록 유도합니다.
3) Prompt: 사용자에게 특정한 값을 입력하도록 유도합니다.

또한, 각각의 메시지박스마다 아이콘도 지정할 수가 있습니다.
1) Warning: 노란색 경고 표시 아이콘이 생깁니다.
2) Error: 빨간색 오류 아이콘이 표시됩니다.
3) Information: 파란색 정보 아이콘이 표시됩니다.
자, 이제 각각의 옵션들을 호출하는 방법을 알아볼까요?

JavaScript 1) 함수의 기본구조

$.MessageBox.Show(Message, Title, MessageBoxType, MessageBoxIcon, Callback);
Message: 메시지박스에 출력할 메시지입니다. 문자열 형식으로 전달하세요.
Title: 메시지박스의 제목을 지정합니다.
MessageBoxType: 메시지박스의 종류를 선택합니다. enum 형식으로 지정합니다.
MessageBoxIcon: 메시지박스의 아이콘을 선택합니다. enum 형식으로 지정합니다.
Callback: 사용자가 YES/NO 혹은 OK/Cancel을 선택하고 난 후, 호출되는 콜백 함수를 지정합니다.

2-1) 기본형 메시지박스

$.MessageBox.Show("Hello world!");

2-2) 제목을 설정

$.MessageBox.Show("Hello world!", "Greeting");

2-3) 메시지박스 종류를 설정(Alert)

$.MessageBox.Show("Hello world!", null, MessageBoxType.Alert);

2-4) 메시지박스 종류를 설정(Confirm)

$.MessageBox.Show("Hello world!", "", MessageBoxType.Confirm);

2-5) 메시지박스 종류를 설정(Prompt)

$.MessageBox.Show("Hello world!", "", MessageBoxType.Prompt);

Alert, Confirm 및 Prompt 메시지박스를 띄우는 방법을 확인하셨나요?
자, 그럼 이제 메시지박스 아이콘을 한 번 바꿔보도록 하겠습니다.
3-1) Warning 아이콘(기본형)

$.MessageBox.Show("Hello world!", null, MessageBoxType.Alert);
MessageBoxIcon 변수에는 값을 입력해도 되고, 안 해도 됩니다.
Warning 아이콘이 기본입니다.

3-2) Error 아이콘

$.MessageBox.Show("Hello world!", "Error 아이콘입니다.", MessageBoxType.Alert, MessageBoxIcon.Error);

3-3) Information 아이콘

$.MessageBox.Show("Hello world!", "Information 아이콘입니다.", MessageBoxType.Alert, MessageBoxIcon.Information);

아이콘을 변경해 보셨나요?
이제 마지막 남은 부분은 콜백을 설정하는 단계입니다.
콜백을 한 번 설정해 볼까요?
콜백 함수는 inline 함수로 설정할 수도 있고, 별도로 지정할 수도 있습니다.
4-1) Inline 콜백 함수

$.MessageBox.Show("Hello world!", "Inline 콜백 함수", MessageBoxType.Alert, MessageBoxIcon.Information, function (r) {
	alert(r);
	alert('OK 버튼을 클릭하셨습니다.');
});

4-2) 별도의 콜백 함수(Confirm)

$.MessageBox.Show("Hello world!", "별도의 콜백 함수", MessageBoxType.Confirm, MessageBoxIcon.Information, MessageBox_Callback);

function MessageBox_Callback(r) {
	alert(r);
	alert('별도의 콜백 함수가 호출되었습니다.');
}

4-3) 별도의 콜백 함수(Prompt)

$.MessageBox.Show("Hello world!", "별도의 콜백 함수", MessageBoxType.Prompt, MessageBoxIcon.Information, MessageBox_Callback2);

function MessageBox_Callback2(r) {
	alert(r);
	alert("사용자가 " + r + "을(를) 입력하셨습니다.");
}

5-1) 메시지박스 접근자
자, 이제 마지막으로 접근자를 알아보겠습니다.
사용자가 OK/YES/NO/Cancel 버튼을 클릭할 때까지는 메시지박스가 사라지지 않습니다.
이러한 경우에 코드상에서 임의적으로 메시지박스를 없애고 싶은데....
혹은 메시지박스의 위치를 옮기고 싶은데...어떡해야 할까요?
메시지박스의 접근자를 활용하면, jquery를 이용할 수가 있습니다.
메시지박스는 다음과 같은 구조로 구성되어있습니다.

<div id="message-box-container"></div>
<div id="message-box">
...
</div>

message-box-container라는 개체는 메시지박스가 표시될 때 메시지박스를 제외한 나머지 웹 페이지를 반투명으로 만들고 어떠한 개체도 클릭이 되지 않도록 처리하는 div입니다.
message-box라는 개체는 실제 메시지박스가 시작되는 개체입니다.
이 개체들을 적절히 이용한다면, 메시지박스를 3초 뒤에 자동으로 사라지게 만들 수도 있습니다.

5-2) 메시지박스를 자동으로 사라지게 만들기

$.MessageBox.Show('이 메시지는 3초뒤에 사라집니다.', '메시지박스 자동으로 사라지기');  setTimeout(function () {
	$('#message-box-container').hide();
	$('#message-box-container').remove();
	$('#message-box').hide();
	$('#message-box').remove();
}, 3000);

이때 주의하실 점은 hide()와 함께 remove() 함수도 같이 사용해 주셔야 한다는 점입니다.
그러나, 단순히 메시지박스를 없애기만 하시려면 $.MessageBox.Hide()를 권장해 드립니다.

$.MessageBox.Hide();

C# 소스에서도 자바스크립트와 동일한 함수를 사용하시면 됩니다

aspx & Code Behind 포스트백을 발생시킨 후, 메시지박스를 띄워 보겠습니다.

aspx
<asp:Button ID="Button1" runat="server" Text="메시지 표시" onclick="_btnMessageBox01_Click" />

aspx.cs
protected void _btnMessageBox01_Click(object sender, EventArgs e)
{
	MessageBox.Show("Code Behind에서 호출한 메시지입니다.", "포스트백 발생", MessageBox.MessageBoxType.Confirm, MessageBox.MessageBoxIcon.Information, null);
}

C#에서는 총 5개의 메시지박스 호출 함수를 제공합니다.
public static void Show(string Message);
public static void Show(string Message, string Title);
public static void Show(string Message, string Title, BANANA.Web.MessageBox.MessageBoxType MessageBoxType);
public static void Show(string Message, string Title, BANANA.Web.MessageBox.MessageBoxType MessageBoxType, BANANA.Web.MessageBox.MessageBoxIcon MessageBoxIcon);
public static void Show(string Message, string Title, BANANA.Web.MessageBox.MessageBoxType MessageBoxType, BANANA.Web.MessageBox.MessageBoxIcon MessageBoxIcon, string Callback);

TOP