AJAX + ASP.NET General .NET2010/06/28 01:19
ASP.NET을 이용하여 AJAX 통신을 해보겠습니다.
먼저 아래의 그림과 같이 코딩을 합니다.
이미지를 보면 번호가 붙어 있는데요. 각 번호에 대한 설명은 아래와 같습니다.
1번 - AJAX 통신을 위해 ScriptManager를 이용합니다. ScriptManager는 참조경로로 CostService.svc 를 연결합니다.
2번 - HTML 콘트롤로 버튼을 하나 생성합니다. 클릭시 자바스크립트로 연결됩니다. Button1_onclick()를 호출합니다.
3번 - AJAX 통신으로 취합된 데이터를 출력하는 엘리먼트 입니다.
1번에 보여진 svc 설정을 위해 아래의 그림과 같은 절차를 이행합니다.
먼저 프로젝트에서 마우스 우클릭하고, Add > New Item 을 클릭합니다.
.svc 선택을 위해 AJAX-enabled WCF Service를 선택하고 Name에 CostService.svc 를 적어 줍니다.
Add 버튼을 클릭하고 svc를 추가합니다.
svc의 내용은 다음과 같습니다.
설명은 코드상에 주석으로 표기해 놓았습니다.
|
using System; //네임스페이스는 SandwichServices 입니다. //데이터베이스에 연결하고 오픈합니다. //데이터를 가져오기 위한 쿼리 문자열을 생성합니다. SqlCommand cmd = new SqlCommand(Query, con); //데이터 셋을 JSONHelper 객체로 보내 JSON 문자열을 생성합니다. return ss; //아래는 JSON 헬퍼 입니다. public class JSONHelper #region Made from DataSet of dataset to JSON #region Make Data jsonBuilder.Append("]"); |
아래는 BaseCode.cs 입니다.
|
using System; namespace SandwichServices |
다 되었으면 2번 내용을 준비합니다.
Button1_onclick() 함수를 자바스크립트로 만들어야 하는데요. 코드는 아래와 같습니다.
설명을 하자면....
1번 Button1_onclick 함수는 svc에서 노출된 함수를 호출합니다. 호출된 json 문자열을 2번 onSuccess 함수에 값으로 전달하게 되고 onsuccess 함수는 전달된 json 문자열을 div 엘리먼트의 id가 dvPrintData 객체에 그 값을 전달하여 출력하게 합니다.
출력 결과는 아래와 같습니다.
이상으로 AJAX + ASP.NET의 가장 기초적인 작성을 해봤습니다.
'General .NET' 카테고리의 다른 글
| AJAX + ASP.NET (0) | 2010/06/28 |
|---|---|
| ASP.NET MVC(C#)으로 15분만에 영화 데이터베이스 애플리케이션 생성하기(4) (0) | 2009/11/20 |
| ASP.NET MVC(C#)으로 15분만에 영화 데이터베이스 애플리케이션 생성하기(3) (0) | 2009/11/19 |
| ASP.NET MVC(C#)으로 15분만에 영화 데이터베이스 애플리케이션 생성하기(2) (0) | 2009/11/18 |
| ASP.NET MVC(C#)으로 15분만에 영화 데이터베이스 애플리케이션 생성하기(1) (2) | 2009/11/17 |
| ASP.NET으로 웹 표준 코딩 해보기(1) (0) | 2009/05/22 |
