次の方法で共有

JavaScript クライアントを作成する

完成したプロジェクトのダウンロード

このセクションでは、HTML、JavaScript、 およびKnockout.js ライブラリを使用して、アプリケーションのクライアントを作成します。 クライアント アプリを段階的にビルドします。

  • 書籍の一覧を表示しています。
  • 書籍の詳細を表示しています。
  • 新しい書籍を追加する。

Knockout ライブラリでは、Model-View-ViewModel (MVVM) パターンを使用します。

  • このモデルは、ビジネス ドメイン内のデータ (ここでは書籍や著者) のサーバー側表現です。
  • ビューはプレゼンテーション レイヤー (HTML) です。
  • ビュー モデルは、モデルを保持する JavaScript オブジェクトです。 ビュー モデルは、UI のコード抽象化です。 HTML 表現に関する知識がありません。 代わりに、"書籍の一覧" など、ビューの抽象的な特徴を表します。

ビューは、ビュー モデルにデータ バインドされます。 ビュー モデルの更新は、ビューに自動的に反映されます。 ビュー モデルでは、ボタンのクリックなどのイベントもビューから取得されます。

サーバー Web API とクライアントモデル JSON が A J A X によってリンクされ、ビュー モデルとビュー HTML がデータ バインディングによってリンクされていることを示す図。

この方法では、コードを書き直すことなくバインディングを変更できるため、アプリのレイアウトと UI を簡単に変更できます。 たとえば、項目の一覧を <ul>として表示し、後でテーブルに変更できます。

ノックアウト ライブラリを追加する

Visual Studio の [ツール ] メニューから、[ NuGet パッケージ マネージャー] を選択します。 次に、[ パッケージ マネージャー コンソール] を選択します。 [パッケージ マネージャー コンソール] ウィンドウで、次のコマンドを入力します。

Install-Package knockoutjs

このコマンドは、Knockout ファイルを Scripts フォルダーに追加します。

ビュー モデルを作成する

app.js という名前の JavaScript ファイルを Scripts フォルダーに追加します。 (ソリューション エクスプローラーで、[スクリプト] フォルダーを右クリックし、[ 追加] を選択し、[ JavaScript ファイル] を選択します)。次のコードを貼り付けます。

var ViewModel = function () {
    var self = this;
    self.books = ko.observableArray();
    self.error = ko.observable();

    var booksUri = '/api/books/';

    function ajaxHelper(uri, method, data) {
        self.error(''); // Clear error message
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null
        }).fail(function (jqXHR, textStatus, errorThrown) {
            self.error(errorThrown);
        });
    }

    function getAllBooks() {
        ajaxHelper(booksUri, 'GET').done(function (data) {
            self.books(data);
        });
    }

    // Fetch the initial data.
    getAllBooks();
};

ko.applyBindings(new ViewModel());

Knockout では、 observable クラスによってデータ バインディングが有効になります。 監視対象の内容が変更されると、その観察可能オブジェクトはすべてのデータバインドされたコントロールに通知し、コントロール自体が更新されるようにします。 ( observableArray クラスは 、observable の配列バージョンです)。まず、ビュー モデルには 2 つの監視可能なデータがあります。

  • books は書籍のリストを保持します。
  • error には、AJAX 呼び出しが失敗した場合のエラー メッセージが含まれています。

getAllBooks メソッドは、書籍の一覧を取得するために AJAX 呼び出しを行います。 次に、結果を books 配列にプッシュします。

ko.applyBindingsメソッドは、Knockout ライブラリの一部です。 ビュー モデルをパラメーターとして受け取り、データ バインディングを設定します。

スクリプト バンドルを追加する

バンドルは、ASP.NET 4.5 の機能で、複数のファイルを 1 つのファイルに簡単に結合またはバンドルできます。 バンドルすると、サーバーへの要求の数が減り、ページの読み込み時間が短縮されます。

ファイル App_Start/BundleConfig.csを開きます。 RegisterBundles メソッドに次のコードを追加します。

public static void RegisterBundles(BundleCollection bundles)
{
    // ...

    // New code:
    bundles.Add(new ScriptBundle("~/bundles/app").Include(
              "~/Scripts/knockout-{version}.js",
              "~/Scripts/app.js"));
}

前へ次へ

  • Last updated on