728x90
300x250
[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" %>
<%@ 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>
<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);
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();
{
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;
}
}
}
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
});
});
<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"); }
});
{
"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>
</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>
참조)
http://www.integratedwebsystems.com/2009/12/using-jquery-modal-dialog-confirmation-with-an-asp-net-server-control/
위의 내용을 참조하여 적용하는 방법에 대해 확인하시기 바랍니다.
출력 결과는 아래와 같습니다.
초깃값이 800 * 600 해상도인데 캡처를 하기 위해서 수동으로 줄였습니다.
조금 전에 jQuery를 압축 풀었던 폴더로 돌아가시면 Demo 자료가 있습니다.
이 자료들을 참고하시어 ASP.NET 환경에 맞게 설정해주시면 됩니다.
AjaxControlToolkit도 편리하지만, jQuery보다는 매력이다는 생각은 들지 않습니다.
jQuery는 Google과 같은 거대한 사이트에서도 적용하고 있을 만큼 굉장히 이식성이 좋습니다.
더불어 Open License라서 개조하기도 수월합니다.
AjaxControlToolkit은 DLL을 웹 서버에도 적용시켜줘야 하고 손이 많이 타기 때문에 개인적으로 jQuery가 더 마음에 듭니다.
이만 글을 정리하며 많은 분이 성공적인 Web2.0 환경을 구축하길 바랍니다.
반응형
'소프트웨어(SW) > MS - ASP.NET' 카테고리의 다른 글
| [ASP.NET] 웹 서비스 구현 하기(Ajax) - Javascript로 호출 - Hello World (4) | 2011.01.26 |
|---|---|
| [ASP.NET] CS 코드(C# 코드)에 자바스크립트 구현하기 (5) | 2011.01.24 |
| [ASP.NET] 내장 암호화(HashPasswordForStoringInConfigFile) 기법 사용하기 - 복호화(X) (6) | 2011.01.23 |
| [ASP.NET] 내장 암호화(FormsAuthenticationTicket) 기법 사용하기 - 복/부호화 (O) (6) | 2011.01.23 |
| [ASP.NET] 폼 인증 방식 (6) | 2011.01.22 |