LoginSignup
36

More than 5 years have passed since last update.

jQuery (JavaScript) から C# のメソッドを呼び出す [基礎編]

Last updated at Posted at 2014-04-21

はじめに

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 で実際に開発してみよう)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36