[ASP.NET] Jquery - Modal Dialog 사용법
ASP.NET에서 Ajax(변형된 자바스크립트 - 비동기식 자바스크립트)를 사용하기 위해선 크게 두 가지 방법으로 요약할 수 있습니다.
첫 번째로 AjaxControlTookit을 이용하는 방법입니다. Microsoft에서 공개하고 있는 DLL 라이브러리를 이용하여 사용할 수 있습니다.
(홈페이지 주소 : http://www.asp.net/ajax/ajaxcontroltoolkit/)
두 번째로 jQuery를 이용하는 것입니다.
jQuery 팀 프로젝트에서 운영하는 jQuery(자바스크립트)를 이용하여 구현하는 방법을 들 수 있겠습니다.
(홈페이지 주소 : http://jqueryui.com)
이번 게시물은 간편하고 사용하기는 쉬우나 (힘들게하는) AjaxControltoolkit이 아닌 jQuery를 ASPX(ASP.NET 파일)에 적용하는 방법을 소개하겠습니다.
1. jQuery 홈페이지에서 사용자 테마에 맞는 jQuery 내려받기
jQuery 홈페이지에서 Download를 클릭합니다.
왼쪽에 Download를 클릭합니다.
참고) design a custom theme을 클릭해서 사용자 입맛에 맞게 설정된 테마가 포함된 라이브러리를 내려받으실 수 있습니다.
압축 파일은 이처럼 구성되어 있습니다.
index.html 파일을 열면 Demonstration을 보실 수 있습니다.
2. Visual Studio.NET의 ASP.NET 프로젝트에 적용시키기
사용자가 만들어낸 프로젝트 위치에 js와 css 폴더를 붙여 넣습니다.
(Visual Studio.NET의 프로젝트 경로는 내 문서에 Visual Studio 그리고 Projects 폴더 안에 생성되어 있습니다.)
-> 사용자가 별도로 지정한 경우에는 해당하지 않습니다.
Visual Studio의 자신의 프로젝트에 아까 복사 붙여 넣기 한 폴더를 끌고 와서 집어넣습니다.
아래의 코드는 Modal Dialog를 ASP.NET에서 사용할 수 있도록 구성된 예제입니다.
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/C#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
ClientScript.GetPostBackEventReference(uxGrid, string.Empty);
if (!Page.IsPostBack)
{
List<int> test = new List<int>();
test.Add(2);
test.Add(3);
test.Add(32);
test.Add(223);
test.Add(5);
test.Add(8);
uxGrid.DataSource = test;
uxGrid.DataBind();
}
}
protected void uxRowAction_Click(object sender, EventArgs e)
{
Button b = sender as Button;
if (b != null)
{
uxTest.Text = "clicked " + b.CommandArgument;
}
}
</script>
<link href="smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#dialogContent').dialog({
autoOpen: false,
modal: true,
bgiframe: true,
title: "MySql Membership Config Tool",
width: 800,
height: 600
});
});
function rowAction(uniqueID) {
$('#dialogContent').dialog('option', 'buttons',
{
"OK": function() { __doPostBack(uniqueID, ''); $(this).dialog("close"); },
"Cancel": function() { $(this).dialog("close"); }
});
$('#dialogContent').dialog('open');
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dialogContent">
<h3>confirm</h3>
<p>Click ok to accept</p>
</div>
<asp:Literal ID="uxTest" runat="server" />
<div>
<asp:DataGrid ID="uxGrid" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:Button ID="uxRowAction" runat="server" CommandArgument='<%#Container.DataItem.ToString() %>' Text="Row Action" OnClick="uxRowAction_Click" OnClientClick="javascript:return rowAction(this.name);" />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</div>
</form>
</body>
</html>
위의 내용을 참조하여 적용하는 방법에 대해 확인하시기 바랍니다.
출력 결과는 아래와 같습니다.
초깃값이 800 * 600 해상도인데 캡처를 하기 위해서 수동으로 줄였습니다.
조금 전에 jQuery를 압축 풀었던 폴더로 돌아가시면 Demo 자료가 있습니다.
이 자료들을 참고하시어 ASP.NET 환경에 맞게 설정해주시면 됩니다.
2. 이 글을 마치면서 느낀 점AjaxControlToolkit도 편리하지만, jQuery보다는 매력이다는 생각은 들지 않습니다.
jQuery는 Google과 같은 거대한 사이트에서도 적용하고 있을 만큼 굉장히 이식성이 좋습니다.
더불어 Open License라서 개조하기도 수월합니다.
AjaxControlToolkit은 DLL을 웹 서버에도 적용시켜줘야 하고 손이 많이 타기 때문에 개인적으로 jQuery가 더 마음에 듭니다.
이만 글을 정리하며 많은 분이 성공적인 Web2.0 환경을 구축하길 바랍니다.
jquery-ui-1.8.8.custom.zip