方法 : AJAX 対応 WCF サービスとこのサービスにアクセスする ASP.NET クライアントを作成する

[アーティクル]
05/10/2023

ここでは、Visual Studio を使用して、AJAX 対応 Windows Communication Foundation (WCF) サービスと、このサービスにアクセスする ASP.NET クライアントを作成する方法について説明します。

ASP.NET Web アプリを作成する

Visual Studio を開きます。
[ファイル] メニューで [新規作成]>[プロジェクト] を選択します。
[新しいプロジェクト] ダイアログで [インストール済み]>[Visual C#]>[Web] カテゴリを展開し、 [ASP.NET Web Application (.NET Framework)] を選択します。
プロジェクトに「SandwichServices」という名前を付け、 [OK] をクリックします。
[新しい ASP.NET Web アプリケーション] ダイアログで、 [空] を選択し、 [OK] を選択します。

Web フォームを追加する

ソリューションエクスプローラーで SandwichServices プロジェクトを右クリックし、 [追加]>[新しい項目] を選択します。
[新しい項目の追加] ダイアログで [インストール済み]>[Visual C#]>[Web] カテゴリを展開し、 [Web フォーム] テンプレートを選択します。
既定の名前 (WebForm1) をそのまま使用し、 [追加] を選択します。

[ソース] ビューで WebForm1.aspx が開かれます。

<body> タグ内に次のマークアップを追加します。

<input type="button" value="Price of 3 sandwiches" onclick="Calculate()"/>
<br />
<span id="additionResult"></span>

AJAX 対応 WCF サービスを作成する

ソリューションエクスプローラーで SandwichServices プロジェクトを右クリックし、 [追加]>[新しい項目] を選択します。
[新しい項目の追加] ダイアログで [インストール済み]>[Visual C#]>[Web] カテゴリを展開し、 [WCF サービス (AJAX 対応)] テンプレートを選択します。
サービスに「CostService」という名前を付け、 [追加] を選択します。

エディターで CostService.svc.cs が開かれます。
この操作をサービスに実装します。次のメソッドを CostService クラスに追加して、ある数量のサンドイッチのコストを計算します。
```
[OperationContract]
public double CostOfSandwiches(int quantity)
{
    return 1.25 * quantity;
}
```

サービスにアクセスするようにクライアントを構成する

WebForm1.aspx ファイルを開き、 [デザイン] ビューを選択します。
[表示] メニューで [ツールボックス] を選択します。
[AJAX Extensions] ノードを展開し、 [ScriptManager] をフォームにドラッグアンドドロップします。
[ソース] ビューに戻り、<ScriptManager> タグの間に次のコードを追加して、WCF サービスのパスを指定します。
```
<Services>
   <asp:ServiceReference Path="~/CostService.svc" />
</Services>
```
JavaScript 関数 Calculate() のコードを追加します。 Web フォームの head セクションに、次のコードを配置します。
```
<script type="text/javascript">

    function Calculate() {
        CostService.CostOfSandwiches(3, onSuccess);
    }

    function onSuccess(result) {
        var myres = $get("additionResult");
        myres.innerHTML = result;
    }

</script>
```
このコードは、CostService のメソッドを呼び出して、3 個のサンドイッチの価格を計算し、additionResult というスパンに結果を表示します。

プログラムを実行する

WebForm1.aspx にフォーカスがあることを確認してから、 [スタート] ボタンをクリックして Web クライアントを起動します。ボタンには、緑色の三角形が表示され、"IIS Express (Microsoft Edge) " のようなテキストが表示されます。または、F5 キーを押すこともできます。 [3 個のサンドイッチの価格] ボタンをクリックして、想定される出力である "3.75" を生成します。

例

次に示すのは、CostService.svc.cs ファイルの完全なコードです。

using System.ServiceModel;
using System.ServiceModel.Activation;

namespace SandwichServices
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class CostService
    {
        [OperationContract]
        public double CostOfSandwiches(int quantity)
        {
            return 1.25 * quantity;
        }
    }
}

次に示すのは、WebForm1.aspx ページの完全な内容です。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SandwichServices.WebForm1" %>

<!DOCTYPE html>

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

        function Calculate() {
            CostService.CostOfSandwiches(3, onSuccess);
        }

        function onSuccess(result) {
            var myres = $get("additionResult");
            myres.innerHTML = result;
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/CostService.svc" />
            </Services>
        </asp:ScriptManager>

        <input type="button" value="Price of 3 sandwiches" onclick="Calculate()" />
        <br />
        <span id="additionResult"></span>
    </form>
</body>
</html>

次の方法で共有