jQuery Ajax로 ASP.NET과 연동하는 방법

=================================== ResponseText.aspx ========================================

using System;

using System.Web.Services;

using System.Collections.Generic;

using System.Web.Script.Services;

public partial class Ajax_AspNet_ResponseText : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        // Empty

    }

    // 단일값 반환 : 01.SingleValueReturn.htm에서 테스트

    [WebMethod]

    public static string GetMessage()

    {

        return "닷넷코리아";

    }

    // 개체값 반환 : 02.htm

    [WebMethod]

    public static Person GetRedPlus()

    { 

        // 아래와 같이 했을 때 

        // {"d":{"__type":"Person","Name":"박용준","Age":21,"Male":true}}로 변환됨

        // Ajax쪽에서는 data.d.Name, data.d.Age 식으로 가져감

        return new Person() { Name = "박용준", Age = 21, Gender = true };

    }

    // 날짜값 반환 : 03.DateTimeValueReturn.htm

    [WebMethod]

    public static DateTime GetTime()

    {

        return DateTime.Now.ToUniversalTime(); 

    }

    // List<T> 형태를 JSON 형태로 출력

    [WebMethod]

    [ScriptMethod(ResponseFormat=ResponseFormat.Json)]

    public static List<Memo> GetMemos()

    {

        List<Memo> lst = new List<Memo>() { 

            new Memo(){Num=1,Name="홍길동"},

            new Memo(){Num=2,Name="백두산"},

            new Memo(){Num=3,Name="한라산"}

        };

        return lst; 

    }

}

public class Memo

{

    public int Num { get; set; }

    public string Name { get; set; }

}

public class Person

{

    public string Name { get; set; }

    public int Age { get; set; }

    public bool Gender { get; set; }

}



================================================ SingleValueReturn =======================================

            $.ajax({

                type: "post",

                url: "ResponseText.aspx/GetMessage",

                data: "{}",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (data) {

                    alert(data.d); // 단일값 : {d:'닷넷코리아'}

                },

                error: function (data) { alert('에러 발생'); }

            });

================================================ ObjectValueReturn =======================================

            $.ajax({

                type: "post",

                url: "ResponseText.aspx/GetRedPlus",

                data: "{}",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (data) {

                    var result = data.d;

                    var type = result.__type; // "Person"

                    var name = result.Name; // "박용준"

                    var age = result.Age; // 21

                    var male = result.Gender; // true

                    debugger; // IE : 여기서 멈춤, 디버깅 창 출력(옵션에서 디버깅 사용시)

                },

                error: function (data) { alert('에러 발생'); }

            });

================================================ DateTimeValueReturn =======================================

        // unix time 형태의 시간 문자열을 JavaScript 날짜형으로 변환 

        function DateDeserialize(dateStr) {

            return eval('new' + dateStr.replace(/\//g, ' '));

        }

        $(document).ready(function () {

            $.ajax({

                type: "post",

                url: "ResponseText.aspx/GetTime",

                data: "{}",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (data) {

                    var result = data.d;

                    document.write(result); // /Date(1259306350000)/

                    document.write("<br />");

                    var time = DateDeserialize(data.d); // 자바스크립트 날짜형으로 출력

                    document.write(time);

                    var today = new Date(time); // 자바스크립트에서 원하는 형태로 사용 가능

                    document.write("<br />" + today.getFullYear() + "년 입니다."); 

                    //return; debugger;

                },

                error: function (data) { alert('에러 발생'); }

            });

        });

================================================ ListToJSON =======================================
 

<head>

    <title>리스트값 반환</title>

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $.ajax({

                type: "post",

                url: "ResponseText.aspx/GetMemos",

                data: "{}",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success:displayData, // displayData함수로 외부에 출력코드 작성

                error: function (data) { alert('에러 발생'); }

            });

        });

        function displayData(data, status) {

            $('#ctlMemoList').empty();

            var table = "<table><tr><td>번호</td><td>이름</td></tr>";

            // Microsoft Ajax에서는 보안목적으로 data.d로 실제 데이터를 감싸놓음.

            $.each(data.d, function (index, entry) {

                table += '<tr><td>' + entry["Num"] + '</td><td>' + entry["Name"] + '</td></tr>';

            });

            table += "</table>";

            $('#ctlMemoList').append(table); 

        }

    </script>

</head>

<body>

    <div id="ctlMemoList"></div>

</body>