ASP.NETとC#4.0を使ったWebサービスの作成とjQueryからの呼び出し方

web制作 Tags:

ASP.NETを使ったWebサービスの作成とjQueryからWebサービスを利用する方法をご紹介します。

ASP.NETはVisual BasicやC#などいくつかのプログラム言語を選択できますが、今回はC#を選択しています。

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

前提条件

  • Microsoft Visual Web Developer 2010 Express
  • ASP.NET (C#)
  • .NET Freamwork 4

参考

INDEX

1. 新しいWebサイトを作成する

asp-dot-net-csharp-webservice-01
ファイル メニューから、新しいWeb サイト をクリックします。

asp-dot-net-csharp-webservice-02
言語として Visual C# を選択し、テンプレートとして ASP.NET 空の Webサイト を選択します。 場所 欄では、ドロップダウン リストで ファイル システム が選択されていることを確認した後、パスとして C:\MyWebSite と入力し、OK をクリックします。

2. Webサービスを作成する

asp-dot-net-csharp-webservice-03
ソリューションエクスプローラ で、C:\MyWebSite を選択して右クリックをします。

asp-dot-net-csharp-webservice-04
新しい項目の追加 をクリックします。

asp-dot-net-csharp-webservice-05
言語として Visual C# を選択し、テンプレートとして Webサービス を選択します。 名前 欄では、WebService.asmx と入力されていることを確認し、OK をクリックします。

asp-dot-net-csharp-webservice-06
WebService.cs を編集します。

asp-dot-net-csharp-webservice-07
jQueryやJavaScriptからWebサービスを利用する場合、//[System.Web.Script.Services.ScriptService] の部分のコメントアウトを解除します。

WebService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// WebService の概要の説明です
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// この Web サービスを、スクリプトから ASP.NET AJAX を使用して呼び出せるようにするには、次の行のコメントを解除します。 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

	public WebService () {

		//デザインされたコンポーネントを使用する場合、次の行をコメントを解除してください 
		//InitializeComponent(); 
	}

	[WebMethod]
	public string HelloWorld() {
		return "Hello World";
	}
	
}

3. Webフォームを作成する

先ほどと同じようにソリューションエクスプローラ の右クリックメニューから、新しい項目の追加 をクリックします。

asp-dot-net-csharp-webservice-08
言語として Visual C# を選択し、テンプレートとして Web フォーム を選択します。 名前 欄では、Default.aspx と入力されていることを確認し、OK をクリックします。

asp-dot-net-csharp-webservice-09
Default.aspx を開いて編集します。

Default.aspx (編集前)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
	<div>
	
	</div>
	</form>
</body>
</html>

Default.aspx (編集後)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>

	<%-- jQueryの読み込みとAjax通信の記述 --%>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script type="text/javascript">
	$(function () {
		$.ajax({
			type: "POST",
			datatype: "json",
			// Webサービスまでのパスとメソッド名を指定
			url: "/MyWebSite/WebService.asmx/HelloWorld",
			data: null,
			contentType: "application/json; charset=utf-8",
			success: function (data, textStatus, xhr) {
				// Webサービスから返された結果の表示
				$("#result").html(data.d);
			},
			error: function (xhr, textStatus, errorThrown) {
				alert(xhr.responseText);
		}
		});
	});
	</script>
</head>
<body>
	<form id="form1" runat="server">
	<div>
		<%-- 結果表示用の要素  --%>
		<div id="result"></div>
	</div>
	</form>
</body>
</html>

WebサービスまでのパスとWebサービスのメソッド名を指定し、JSON形式で受け取ります。
data.d に返り値が入っているので、ブラウザで実行すると HelloWorld メソッドの返り値 Hello World が表示されます。

asp-dot-net-csharp-webservice-10

4. Webサービスのメソッドに引数を渡す

WebService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// WebService の概要の説明です
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// この Web サービスを、スクリプトから ASP.NET AJAX を使用して呼び出せるようにするには、次の行のコメントを解除します。 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

	public WebService () {

		//デザインされたコンポーネントを使用する場合、次の行をコメントを解除してください 
		//InitializeComponent(); 
	}

	[WebMethod]
	public string HelloWorld( string name, string message )
	{
		return message + name + "さん";
	}
	
}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>

	<%-- jQueryの読み込みとAjax通信の記述 --%>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script type="text/javascript">
	$(function () {
		var obj = { "name": "Tsuyoshi.", "message": "こんにちは！" };
		var arg = JSON.stringify(obj);
		$.ajax({
			type: "POST",
			datatype: "json",
			// Webサービスまでのパスとメソッド名を指定
			url: "/MyWebSite/WebService.asmx/HelloWorld",
			data: arg,
			contentType: "application/json; charset=utf-8",
			success: function (data, textStatus, xhr) {
				// Webサービスから返された結果の表示
				$("#result").html(data.d);
			},
			error: function (xhr, textStatus, errorThrown) {
				alert(xhr.responseText);
			}
		});
	});
	</script>
</head>
<body>
	<form id="form1" runat="server">
	<div>
		<%-- 結果表示用の要素  --%>
		<div id="result"></div>
	</div>
	</form>
</body>
</html>

実行結果

こんにちは！Tsuyoshi.さん

5. Webサービスのメソッドの返り値がオブジェクトだった場合

WebService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// WebService の概要の説明です
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// この Web サービスを、スクリプトから ASP.NET AJAX を使用して呼び出せるようにするには、次の行のコメントを解除します。 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

	public WebService () {

		//デザインされたコンポーネントを使用する場合、次の行をコメントを解除してください 
		//InitializeComponent(); 
	}

	[WebMethod]
	public HelloMessage HelloWorld()
	{
		HelloMessage obj = new HelloMessage();
		obj.name = "Tsuyoshi.";
		obj.message = "こんにちは！";

		return obj;
	}

	public class HelloMessage
	{
		public string name { set; get; }
		public string message { set; get; }
	}
	
}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>

	<%-- jQueryの読み込みとAjax通信の記述 --%>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script type="text/javascript">
		$(function () {
			$.ajax({
				type: "POST",
				datatype: "json",
				// Webサービスまでのパスとメソッド名を指定
				url: "/MyWebSite/WebService.asmx/HelloWorld",
				data: null,
				contentType: "application/json; charset=utf-8",
				success: function (data, textStatus, xhr) {
					// Webサービスから返された結果の表示
					if (data.d != null) {
						$("#result").html(data.d.message + data.d.name + "さん");
					}
				},
				error: function (xhr, textStatus, errorThrown) {
					alert(xhr.responseText);
				}
			});
		});
	</script>
</head>
<body>
	<form id="form1" runat="server">
	<div>
		<%-- 結果表示用の要素  --%>
		<div id="result"></div>
	</div>
	</form>
</body>
</html>

実行結果

こんにちは！Tsuyoshi.さん

あわせて読みたい記事

  1. Flexチックなかっこいいテーブルを生成するjQueryプラグイン「Flexigrid」
  2. jQuery jQuery & Ajax通信を使ってPHPから取得した値をタイマーで監視するサンプル
  3. 画面のスクロールに合わせて画像を読み込むjQueryプラグイン「LazyLoad with jQuery」
  4. jQuery jQuery & Ajax通信を使ってPHPにPOSTでデータを送信するサンプル
  5. jQuery Mobileで作成したTODOリストアプリケーションのサンプル
  6. ｊQuery PHPからMySQLのデータをJSON形式で出力してjQueryとAjax通信を使って取得して表示するサンプル
  

共有やブックマークなど

コメントは受け付けていません。