はじめに

Visual Studio を使えば Web ブラウザ上で動作する JavaScript から Web サーバー上にある C# のコード(メソッド)を容易に呼び出すことができます。
実際に動作するコードを見れば、簡単にエレガントにリモート呼び出し(Ajax 呼び出し)ができることがわかるでしょう。

C# のメソッドの引数や戻り値にレコードを指定することもできますが、今回は引数と戻り値に整数を指定したサンプルを提示しました。([基礎編]ですから！)

詳細な手順説明はこちら(無料の Visual Studio Express 2013 for Web で実際に開発してみよう)

呼び出される側(C#)のコード

Service1.svc.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
 
namespace WebApplication1
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode =
     AspNetCompatibilityRequirementsMode.Allowed)]
    public class Service1
    {
        // 追加の操作をここに追加して、[OperationContract] とマークしてください
        [OperationContract, WebInvoke(Method = "POST")]
        public int Add2(int x, int y)
        {
            return x + y;
        }
    }
}

呼び出す側(JavaScript/jQuery)のコード

Views/Home/Index.cshtml

@{
    ViewBag.Title = "Home Page";
}
<h3>AJAX テスト</h3>
 
<input id="button1" type="button" value="Add2" />
<br />
<b>JSON:</b><div id="json"></div>
<b>戻り値</b><div id="result"></div>
 
@section scripts {
<script type="text/javascript">
    $(document).ready(function () {
        $("#button1").click(function () {
            var args = { x: 11, y: 22 };
            $.ajax({
                type: "POST",
                url: '@VirtualPathUtility.ToAbsolute("~/Service1.svc/Add2")',
                contentType: "application/json",
                data: JSON.stringify(args),
                success: function (data) {
                    $("#json").text(JSON.stringify(data));
                    $("#result").text(data.d);
                },
                error: function (xhr) {
                    alert("failed");
                    alert(xhr.responseText);
                }
            });
        });
    });
</script>
}

詳細な手順説明はこちら(無料の Visual Studio Express 2013 for Web で実際に開発してみよう)