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