ASP.NET에서 AJAX를 이용하여 좀 더 편하게 웹사이트를 개발하기 위해서ASP.NET AJAX1.0이란 라이브러리를 제공합니다.
저 라이브러리는 ASP.NET 2.0에서 지원이 되기때문에 ASP.NET 1.X버전은 사용할 수가 없었습니다.
ASP.NET 1.X시절 AJAX를 좀 더 편리하게 사용하여 개발할 수 있게 도와준 라이브러리가 있었습니다.
AJAX.NET이란 이름으로 MSDN에도 소개가 되었었죠...
Michael Schwarz라는 개발자가 개인적으로 만든 라이브러리인데 간단하게 사용할 수 있어서 저도 1.X시절에 이를 이용하여 개발을 했었습니다. 잠깐 잊고 있었는데 우연하게 다시금 찾게 되어 웹사이트에 들어가 보니 떡하니... 2.0도 지원하는 라이브러리를 내놨네요...
AJAX.NET Professional이란 이름인데요.이 웹사이트는 여기, 라이브러리 개발자인Michael Schwarz의 개인 블로그는 여기로 방문하면 됩니다. 좀 더 많은 기능을 제공하는 것 같기는 한데 영어 실력도 형편없고 머리도 아프고 이런저런 핑계를 다 대고는 싶지만...ㅠ
그리하여..... 1.X시절에MSDN에 소개가 되었고태오사이트에서도 소개가 됐던 예제를 2.0버전을 다운 받아서 비슷한 예제를 소개할까 합니다.
AJAX.NET Professional다운로드참고로 6.대 버전으로 다운로드 하세요. 7.대 버전은 제 예제가 실행이 안되더군요. DataSet을 리턴받지 못하는거 같던데 이유는 찾기 귀찮습니다.
다운받은 dll파일을 참조추가로 추가해주면 라이브러리를 이용할 준비는 끝입니다.
그럼 예제 나갑니다. pubs 데이터베이스의 titles테이블에서 type을 선택하면 type에 해당하는 title들을 반환하는 예제입니다.
일단 예제를 보고 간단하게 설명하렵니다.
web.config의 system.web하위에 아래의 코드를 추가하세요.
<httpHandlers>
<addverb="*"path="*.ashx"type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
</httpHandlers>
aspx소스....
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"
Inherits="AjaxNetProExam._Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>AJAX.NET Professional Example</title>
<scripttype="text/javascript">
functiongetTitle(obj)
{
var_value = obj.options[obj.selectedIndex].value;
if(_value !="")
{
AjaxNetProExam._Default.GetTitle(_value, _callBack1);
}
}
function_callBack1(argument)
{
if(argument.error !=null)
alert(argument.error.Message);
else
{
varDropDownList2 = document.getElementById("DropDownList2");
DropDownList2.options.length = 0;
for(i=0;i<argument.value.Tables[0].Rows.length;i++)
{
DropDownList2.options[DropDownList2.options.length] =newOption(argument.value.Tables[0].Rows[i].title,argument.value.Tables[0].Rows[i].title);
}
}
}
function_callBack2(argument)
{
alert(argument.value);
}
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:DropDownListID="DropDownList1"runat="server"onchange="getTitle(this);">
<asp:ListItemText="전체"Value=""/>
<asp:ListItemText="business"Value="business"/>
<asp:ListItemText="mod_cook"Value="mod_cook"/>
<asp:ListItemText="popular_comp"Value="popular_comp"/>
<asp:ListItemText="psychology"Value="psychology"/>
<asp:ListItemText="trad_cook"Value="trad_cook"/>
<asp:ListItemText="UNDECIDED"Value="UNDECIDED"/>
</asp:DropDownList>
<asp:DropDownListID="DropDownList2"runat="server">
</asp:DropDownList>
<inputtype="button"value="XML보기"onclick="AjaxNetProExam._Default.GetDataSet(_callBack2);"/>
</div>
</form>
</body>
</html>
aspx.cs소스....
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Data.SqlClient;
namespaceAjaxNetProExam
{
publicpartialclass_Default: System.Web.UI.Page
{
privatestaticDataSetds;
protectedvoidPage_Load(objectsender,EventArgse)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
}
[AjaxPro.AjaxMethod]
publicDataSetGetTitle(stringtype)
{
using(SqlConnectioncon =newSqlConnection("server=(local);database=pubs;user id=sa;password=*****"))
{
SqlCommandcmd =newSqlCommand();
cmd.Connection = con;
cmd.CommandText ="select title from titles where type = @paramType group by title order by title";
cmd.Parameters.Add("@paramType",SqlDbType.VarChar);
cmd.Parameters["@paramType"].Value = type;
con.Open();
ds =newDataSet();
SqlDataAdapterda =newSqlDataAdapter(cmd);
da.Fill(ds);
returnds;
}
}
[AjaxPro.AjaxMethod]
publicstringGetDataSet()
{
returnds.GetXml();
}
}
}
AJAX.NET Pro를 사용하기 위해선 반드시 위에서 말한 web.config에 코드를 추가하고 AJAX에 사용될 메서드가 있는 클래스에 아래의 코드가 존재해야 합니다.
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
그리고 AJAX메서드는 [AjaxPro.AjaxMethod]를 위에 추가해주면 끝입니다. 이 코드 추가로 JavaScript에서 cs의 함수를 호출할 수 있는
즉, AJAX를 이용한 개발이 완료가 된 것 입니다.
자바스크립트에서 cs의 AJAX메서드의 호출은
AJAX메서드가 포함된 클래스의 네임스페이스.클래스.AJAX메서드명으로 호출을 합니다.
그런 방법으로 나온 코드가
AjaxNetProExam._Default.GetTitle(_value, _callBack1);
호출할 때 괄호안에 필수 인자가 있는데요. 그 인자는 결과를 리턴 받을 자바스크립트 메서드이고 그 메서드는 하나의 인자를 받습니다.
그 인자에 리턴 받은 결과가 담기게 되지요.
그리고 AJAX메서드에 인자가 있다면 그 인자를 차례대로 자바스크립트에서도 넣어주면 됩니다.
단, 맨 마지막은 리턴 받을 자바스크립트 메서드여야 합니다.
예제에서는 사용자가 선택한 DropDownList의 값입니다. 이 값을 선택하면 AJAX메서드를 호출하여 title테이블의 type에 해당하는
title정보를 DataSet에 담고 그 DataSet을 리턴하게 됩니다.
인자의 value속성에 결과 값이 들어오게 되는데 이 결과값에는 우리가 C#에서 DataSet을 다루는 문법과 비슷합니다.
Tables[0].Rows[0].title
비슷하지 않나요?? 마지막 title은 컬럼명입니다. 자바스크립트 코드를 보시면 이해가 될 것으로 생각이 되구요.
위 예제를 비록 1.X버전이긴 하지만 아주~ 잘 설명해주신태오님 강좌를 참고해보세요.
예제가 틀린데요? 라고 한다면 무자게 곤란합니다. 알아서 이해를 하셔요...
한가지 아쉬운 점이 도움말이 없다는거 어디에 있는지 알려주세요.
DataSet으로 리턴 받으면 어떻게 그걸 참조하는지 각 리턴 타입별로 알려주면 안되나... ㅡㅡ;;
예제의 버튼은 해당 DataSet이 어떻게 나오는지 보여주는 버튼입니다.
기타 궁금한 사항은 댓글이나태오사이트에 질문해주세요. 태오님을 포함한 여러 MVP분들이 친절하게 답변해주실 겁니다.
