글
WEB/AJAX 2007. 3. 15. 11:04AJAX in Action by Mohammad Azam : 대충 번역본
예전에 번역해논 문서... 자체번역이라 오역도 많고 대충 의역해버린 -_-;
어쨌든 Ajax 첫 실습으로는 좋은 듯한..
원문 : http://www.codeproject.com/Ajax/AJAX.asp
Introduction
Ajax에 대해 얘기하자. 니가 알아야 할 건 Ajax가 Postback없이 server에 요청할 수 있다는 거다.
Downloading the AJAX.NET Library
우선 Michael Schwarz이 만든 Ajax.net 라이브러리를 다운받아. 그리고 니 프로젝트에 DLL을 참조시키삼.
그럼 우리는 some dirty stuff를 가지고 시작할 수 있어..
What are we going to do?
<select> html태그를 이용해서 Dropdown list를 만들꺼야..
이건 어떤 아이템을 선택할 수 있고 DB로부터 결과를 가져와 화면안의 DataGrid안에 뿌려줄꺼야
이건 postback없이 일어날꺼고. 난 강력하게 추천해주마. 너는 먼저 Ajax.net 라이브러리의 사용법부터 읽어
AJAX in Action
다른거 하기전에 우선 페이지부터 초기화하자..
private void Page_Load(object sender, System.EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(UsingAjax));
}
여기에선 Northwind database를 사용할끄야.
DataSet을 가져오고, Dropdown List를 바인딩할라믄 우선 Server쪽 Method부터 만들자..
[Ajax.AjaxMethod]
public DataSet GetDropDownListData()
{
string query = "SELECT CategoryID,CategoryName FROM Categories ";
SqlConnection myConnection = new SqlConnection(GetConnectionString());
SqlDataAdapter ad = new SqlDataAdapter(query,myConnection);
DataSet ds = new DataSet();
ad.Fill(ds,"Categories");
return ds;
}
니가 눈치가 빠르면 느끼겠지만 위에 메소드는 Ajax.AjaxMethod를 붙이고 있어.. 이뜻은 클라이언트에서 호출할 수 있는 메소드라는 거지..
인제 클라이언트에서 이 메소드를 어떻게 Access하는지 살펴보자.
function FillDropDownList()
{
UsingAjax.GetDropDownListData(FillDropDownList_CallBack);
}
function FillDropDownList_CallBack(response)
{
var ds = response.value;
var html = new Array();
if(ds!= null && typeof(ds) == "object" && ds.Tables!= null)
{
for(var i=0;i<ds.Tables[0].Rows.length;i++)
{
html[html.length] = "<option value=" +
ds.Tables[0].Rows[i].CategoryID + ">"
+ ds.Tables[0].Rows[i].CategoryName +
"</option>";
}
document.getElementById("Display").innerHTML =
"<select id=\"sel\" onchange=\" ChangeListValue" +
"(this.options[this.selectedIndex].value); \">" +
html.join("") + "</select>";
}
}
자, FillDropDownList() 이자식부터 살펴보자. UsingAjax에 들어가있는 GetDropDownListData가 실행될꺼야.
실제적인 코드가 들어있는 FillDropDownList_CallBack()이 불려지겠지.
document.getElementById("Display").innerHTML =
"<select id=\"sel\" onchange=\"
요기를 살펴봐. Display가 몰까?? 궁금하지? 별거 아닌데...그냥 Span Tag야..
function ChangeListValue(index)
{
GetResult(index);
}
Dropdown Change가 일어나믄 불려지는 ChangeListValue 메소드를 살펴보자.
function ChangeListValue(index)
{
GetResult(index);
}
이건 GetResult를 호출해.. 인제 GetResult를 보자..(장난하냐..)
function GetResult(categoryID)
{
UsingAjax.GetProductsByID(categoryID,GetResult_CallBack);
}
function GetResult_CallBack(response)
{
var ds = response.value;
if(ds!=null && typeof(ds) == "object" && ds.Tables!=null)
{
var s = new Array();
s[s.length] = "<table border = 1>";
for(var i=0;i<ds.Tables[0].Rows.length;i++)
{
s[s.length] = "<tr>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].ProductID + "</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].ProductName + "</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].QuantityPerUnit + "</td>";
s[s.length] = "</tr>";
}
s[s.length] = "</table>";
document.getElementById("Display1").innerHTML = s.join("");
}
}
GetResult 메소드는 서버쪽의 GetProductsByID를 호출해..
[Ajax.AjaxMethod]
public DataSet GetProductsByID(int categoryID)
{
string query = "SELECT * FROM Products WHERE CategoryID = @CategoryID ";
SqlConnection myConnection = new SqlConnection(GetConnectionString());
SqlCommand myCommand = new SqlCommand(query,myConnection);
myCommand.Parameters.Add("@CategoryID",categoryID);
SqlDataAdapter ad = new SqlDataAdapter(myCommand);
DataSet ds = new DataSet();
ad.Fill(ds);
return ds;
}
자, 인제 끈났어 니가 Dropdown에서 아이템을 선택할때마다 너의 DataGrid는 PostBack없이 새로운 결과들로 채워질꺼야.
그전에 바인딩 메소드도 만들어줘야해..;; FillDropDownList() 위에 말이야..
function BindControls()
{
FillDropDownList();
}
그리고 페이지가 로드될때 BindControls를 호출해야 겠지.. (얼릉 말할것이지..)
<body onload="BindControls();">
마지막으로 Web.config의 Setting도 약간 손봐야 해..
<configuration>
<system.web>
<httpHandlers>
<add verb="POST,GET " path="ajax /*.ashx"
type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>
...
<system.web>
</configuration>
나는 니가 이 글을 좋아했으면 좋겠어... 즐거운 코딩되삼..
by Mohammad Azam
RECENT COMMENT