Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

はじめに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away