'WEB/AJAX' 카테고리의 글 목록

WEB/AJAX 2007. 3. 15. 11:04

AJAX 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를 호출해야 겠지.. (얼릉 말할것이지..)

마지막으로 Web.config의 Setting도 약간 손봐야 해..

나는 니가 이 글을 좋아했으면 좋겠어... 즐거운 코딩되삼..

by Mohammad Azam

,

WEB/AJAX 2007. 3. 14. 16:08

Tips : Rico 1.1.2 breaks prototype 1.5.0_rc2 on firefox

링크 : http://forum.openrico.org/topic/2228#2539

증상 : Rico Beta를 1.1.2 로 패치하게 되면 FireFox에서 모든 Ajax Function이 안먹는다. :

원인 : Rico 1.1.2와 Prototype 1.5의 Header문제로 보임 :

해결책 : Prototype의 다음 부분을 수정한다.

,

WEB/AJAX 2007. 3. 14. 11:44

A Quick Guide How to start : AjaxPro

원문 : http://www.ajaxpro.info/quickguide.aspx

1. Download the latest Ajax.NET Professional files from www.schwarz-interactive.de
2. Add a reference to the AjaxPro.2.dll (for the .NET 1.1 Framework use AjaxPro.dll)
3. Add following lines to your web.config:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.web>
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>

[...]

</system.web>
</configuration>

4. Now, you have to mark your .NET methods with an AjaxMethod attribute:

[AjaxPro.AjaxMethod]
public DateTime GetServerTime()
{
return DateTime.Now;
}

5. To use the .NET method on the client-side JavaScript you have to register the methods, this will be done to register a complete class to Ajax.NET:

namespace MyDemo
{
public class _Default
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
}

[AjaxPro.AjaxMethod]
public DateTime GetServerTime()
{
return DateTime.Now;
}
}
}

6. If you start the web page two JavaScript includes are rendered to the HTML source.
To call a .NET method form the client-side JavaScript code you can use following syntax:

function getServerTime()
{
MyDemo._Default.GetServerTime(getServerTime_callback); // asynchronous call
}

// This method will be called after the method has been executed
// and the result has been sent to the client.

function getServerTime_callback(res)
{
alert(res.value);
}

,

WEB/AJAX 2007. 3. 9. 13:35

Ajax 활용시 고려해야 될 점..

1. Ajax를 사용한 이벤트 처리시에 디자인이 깨지는 거 고려해야 되요~ [2007.01.30]

자.. 무슨 말이냐..
Ajax를 사용해서 이벤트를 처리하고 그 뒷처리까지 깨끗이 했으면!!
분명히 무언가 바꼈을끄에요.
무언가 바꼈으니 레이아웃도 조곰 변경됐을텐데!!
나머지부분은 적용이 안된다는 거~!!
그러니까 리플을 예로 들믄

1) 리플 삭제 -> Ajax
2) CallBack 처리 - 삭제 결과값
3) 리플 리스트 다시 바인딩하고 -> Ajax

여기까지 하면 리플 아래에 있는 Footer 같은 거.
아님 머 이미지 네비 같은거.
아님 글 리스트 같은 건
제자리에 그대로 있다는 거~!!

그러니까 저기서 끈나는게 아니라 변경된 레이아웃까지 다시 잡아줘야 된다는 거..

2. CS단의 Ajax Method에서는 Data값이 남아있지 않아요~ [2007.01.30]
이건 조금 하믄 당근 아는거..

[cs]

private int aaa = 1;
   private void Page_Load(object sender, System.EventArgs e)
{
   AjaxPro.Utility.RegisterTypeForAjax(typeof(Viewer));

// 이렇게 aaa를 cs단에 박아넣어도..
if(Request.QueryString["aa"] != null
&& Request.QueryString["aa"].ToString() != "")
this.aaa = int.Parse(Request.QueryString["aa"]);
}

[AjaxPro.AjaxMethod]
   public bool Delete(int ID)
{
// 불러도 이건 쓰레기값~!!
return this.aaa;
}

3. AjaxPro.AjaxMethod는 Overload가 되지 않습니다요~ [2007. 2. 12]

cs단에 아래와 같이 이름이 같고, 파라미터가 다르게 오버로드를 하려고 해도 AjaxPro에서는
함수 Overloading을 지원하지 않기때문에 스크립트에서 정의되지 않은 / 정확한 파라미터가 아니라는 에러가 난다.

[cs]

[AjaxPro.AjaxMethod]
public bool CreateContentReply(int ZMID, int ZMCID, string Name){...}

[AjaxPro.AjaxMethod]
public bool CreateContentReply(int ZMID, int ZMCID){...}

[Html]
AjaxPro.PG.Viewer.CreateContentReply(ZMID, ZMCID, Name, CallBack_proc);
AjaxPro.PG.Viewer.CreateContentReply(ZMID, ZMCID, CallBack_proc); Error

,

Pang's Land

검색결과 리스트

WEB/AJAX에 해당되는 글 4건

글

AJAX in Action by Mohammad Azam : 대충 번역본

트랙백

댓글

글

Tips : Rico 1.1.2 breaks prototype 1.5.0_rc2 on firefox

트랙백

댓글

글

A Quick Guide How to start : AjaxPro

트랙백

댓글

글

Ajax 활용시 고려해야 될 점..

트랙백

댓글

사이드 메뉴

CATEGORY

RECENT POSTS

RECENT COMMENT

TAG

ARCHIVE

CALENDAR

NOTICE

MY LINK

COUNTER

티스토리툴바