jQuery.ajax メソッドで ASP.NET ポストバックを行う

jQuery の ajax メソッドを利用して ASP.NET のサーバーサイドメソッドを呼び出してみましょう。

ASP.NET のサーバーサイドイベントの定義では public と static 修飾子を付け、WebMethod 属性も設定しておきます。WebMethod 属性は初めて使いました(^_^;) MSDN を見たところ、ajax 通信で利用される属性のようです。非同期通信でサーバーサイドイベントを呼び出しているので、サーバーサイドでページの再生成を行わないため static にしておいて一度生成したメソッドを使い続けるのかなと思います。

クライアントサイド

$(function () {
    $("#button1").click(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/ajaxMethod",
            contentType: "application/json; charset=utf-8",
            data: "{'val1':'23', 'val2' : '35'}",
            success: function (result) {
                console.log(result.d);
            }
        });
    });
});

...

<input id="button1" type="button" value="button" />

サーバーサイド

[WebMethod]
public static int ajaxMethod(int val1, int val2)
{
    Debug.WriteLine("ajaxMethod");

    return val1 + val2;
}

参考になったリンクたち

連載ASP.NET AJAXを理解する 第2回 ASP.NET AJAXを使いこなす
http://www.atmarkit.co.jp/fdotnet/aspnetajax/aspnetajax02/aspnetajax02_04.html

WebMethodAttribute クラス
http://msdn.microsoft.com/ja-jp/library/system.web.services.webmethodattribute%28v=vs.100%29.aspx

WebMethod 属性を使用する
http://msdn.microsoft.com/ja-jp/library/byxd99hx%28v=vs.90%29.aspx

jQuery.ajax() For ASP.NET Developers
http://sett.ociweb.com/sett/settJun2013.html

ASP.Net Ajax and Postback
http://stackoverflow.com/questions/20367995/asp-net-ajax-and-postback