웹폼에서 Ajax 실행하기 3 - jQuery Ajax + JSON

 

 

웹폼에서 Ajax 를 실행할 때 jQuery Ajax 와 더불어 JSON 을 사용하여 서버단 함수에 데이터를 넘기고 받는 예제입니다.

 

이 예제에서는 C# 과 jQuery v1.7.1, 그리고 JSON 처리를 위해 json3 를 사용합니다.

json3는 github 에서 진행되는 오픈소스 라이브러리이며 json3 을 검색하여 다운로드 받거나 아래 첨부파일을 다운로드 받으시면 됩니다.

 

json3.min.js

 

 

1. WebForm4.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

namespace WebApplication1
{
    public partial class WebForm4 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string Hello(HelloData data)
        {
            return string.Format("Hello, {0}!", data.Name);
        }
    }

    public class HelloData
    {
        public string Name { get; set; }
        public string Name2 { get; set; }
    }
}

설명: 클라이언트 단에서 호출할 Hello 함수는 HelloData 라는 객체를 파라미터로 받도록 합니다.
그냥 string 형으로 받아서 Javascript Serializer 로 Deserializing 이 안 되어 알아보니 이렇게 하면 되더군요. 아마 json 타입으로 데이터를 넘기면 .Net 에서 자동으로 Deserializing 을 하는 듯 합니다.
그리고 Hello 함수의 파라미터 이름 data 를 클라이언트 단의 json 데이터에서 명시해 줘야 하며, 역시 json 데이터 생성시 HelloData 클래스의 구조에 맞게 속성이름을 맞춰 생성해야 합니다.

 

2. WebForm4.aspx - html 부분

    Name : 
    


    
결과 : 

 

3. WebForm4.aspx - Javascript 부분

json3 라이브러리를 추가시키고 Object 타입 변수에 서버단 HelloData 클래스의 속성 이름와 동일하게 데이터를 생성합니다.
그리고 json3 의 stringify 를 이용해 json 데이터를 생성합니다. 이 때, 서버단 Hello 함수의 파라미터 이름인 data 와 동일하게 json 데이터에 이름을 명시해 줍니다.
이 예제에서는 json 데이터가 어떤 구조로 넘어가는지 알아보기 위해 생성된 json 데이터를 알림창으로 띄워 확인해 보았습니다.
그리고 jQuery Ajax 호출 실패 콜백 함수에서는 Error 데이터 역시 json 형식으로 반환되기 때문에 이를 json3 의 parse 를 이용해 Object 타입으로 변환합니다.

 

4. 결과 화면