ComponentOne Information

ComponentOne Studio/Wijmo/Xuniの最新情報を公開中

JavaScriptとWeb APIでデータベース処理を行うWebアプリを作成する

この記事では、JavaScriptとWeb APIを用いてデータベースのCRUD処理を行う方法を紹介します。

f:id:ComponentOne_JP:20160623093535p:plain

ビューはJavaScriptとHTMLで開発します。また、操作性と生産性を高めるために、WijmoFlexGrid(データグリッドコントロール)とCollectionView(変更データを管理するためのユーティリティクラス)を使用します。

サーバーは次のフレームワークおよび製品を使用して開発します。

  • ASP.NET Web API
  • SQL Server
  • Entity Framework
  • Visual Studio 2015

Web APIはCRUD処理を提供し、JavaScriptからHTTP要求を送信することで、データベース処理を行います。

CRUDとは、データベース処理に必要な、生成(Create)、読み込み(Read)、更新(Update)、削除(Delete)の機能を示しています。

ビューとサーバー間のデータの受け渡しには、JavaScriptで扱いやすいJSONデータを使用します。

1. Web APIを作成する

まず、データベースのCRUD処理を提供するWeb APIを作成します。

Visual Studioで新しいASP.NET Web Applicationプロジェクトを作成します。

f:id:ComponentOne_JP:20160623093713p:plain

空のテンプレートを使用してプロジェクトを作成します。

f:id:ComponentOne_JP:20160623093722p:plain

プロジェクトにApp_Dataフォルダーを追加します。

f:id:ComponentOne_JP:20160623093730p:plain

App_DataフォルダーにSQL Serverのデータベースファイルを追加します。ここでは、ComponentOne Studioトライアル版に収録されている、NORTHWND.MDFファイルを使用します。

f:id:ComponentOne_JP:20160623093738p:plain

プロジェクトにADO.NET Entity Data Modelを追加します。

f:id:ComponentOne_JP:20160623093749p:plain

Entity Data Modelウィザード画面のモデルのコンテンツの選択ページで、データベースからEF Designerを選択します。

f:id:ComponentOne_JP:20160623093756p:plain

データ接続の選択ページで、MDFファイルが自動的に選択されていることを確認します。

f:id:ComponentOne_JP:20160623093811p:plain

バージョンの選択ページで、使用するEntity Frameworkのバージョンを選択します。

f:id:ComponentOne_JP:20160623093819p:plain

データベースオブジェクトと設定の選択ページで、使用するデータベースオブジェクトを選択します。ここでは、Productsテーブルだけを選択します。

f:id:ComponentOne_JP:20160623093827p:plain

モデルが作成されて、デザイナーが表示されます。

f:id:ComponentOne_JP:20160623093835p:plain

モデルの設定を反映するために、デザイナーを閉じてプロジェクトをビルドします。

プロジェクトにスキャフォールディングアイテムを追加します。

f:id:ComponentOne_JP:20160623093841p:plain

スキャフォールディングを追加画面で、Entity Frameworkを使用したアクションがあるWeb API 2コントローラーを選択します。

f:id:ComponentOne_JP:20160623093849p:plain

コントローラーの追加画面で、モデルクラスデータコンテキストクラスをドロップダウンから選択します。

f:id:ComponentOne_JP:20160623093859p:plain

以上で、CRUD処理を提供するWeb APIが作成されました。

ASP.NET Web APIとEntity Frameworkを使用したWebアプリケーションを作成する方法の詳細は、ASP.NET公式サイトのチュートリアルでも紹介されています。

Using Web API 2 with Entity Framework 6 | The ASP.NET Site

2. ビューを作成する

続いて、エンドユーザーがデータベース処理を行うためのビューを作成します。

ここでは、Web APIアプリケーションプロジェクトのインデックスページでビューを作成します。

Web APIプロジェクトにHTMLページを追加して、ファイル名をindex.htmlに変更します。

f:id:ComponentOne_JP:20160623093926p:plain

index.html<head>に、Wijmoの参照情報を追加します。

<!-- Wijmo -->
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css" />
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>

index.html<body>に、更新ボタンとFlexGridコントロールをホストする要素を追加します。

<button onclick="update()">更新</button>
<div id="flexGrid" style="height: 300px;"></div>

index.html<body> の末尾に次のJavaScriptコードを追加します。CollectionViewとFlexGridコントロールを生成します。

<script>
var cv = new wijmo.collections.CollectionView();
var flexGrid = new wijmo.grid.FlexGrid('#flexGrid');
flexGrid.itemsSource = cv;
</script>

プロジェクトを実行すると、インデックスページに更新ボタンと空のFlexGridコントロールが表示されます。

f:id:ComponentOne_JP:20160623093946p:plain

3. 読み込み処理を行う

次に、データベースからデータを読み込んで、FlexGridに表示します。

Web APIを呼び出す(HTTP要求を送信する)には、jQueryのajax関数XMLHttpRequestを使用する方法がありますが、ここではWijmoのwijmo.httpRequestメソッドを使用します。このメソッドを使用すると、jQueryを使用しなくても、XMLHttpRequestよりもシンプルなコードでHTTP要求を送信することができます。

次のJavaScriptコードを追加します。Web APIにGET要求を送信して、要求が成功したときに、読み込んだJSONデータをJavaScript配列オブジェクトに変換してCollectionViewに設定します。

wijmo.httpRequest('/api/Products', {
  success: function (xhr) {
    cv.sourceCollection = JSON.parse(xhr.response);
  }
});

Web APIのURLとHTTPメソッドは、自動生成されたコントローラー(ProductsController.cs )のコメントに記載されています。

プロジェクトを実行すると、データベースから読み込んだデータがFlexGridに表示されます。

f:id:ComponentOne_JP:20160623093956p:plain

4. 更新処理を行う

次に、FlexGridで更新したデータをデータベースに反映します。

ここでは、逐次更新処理(データを1件更新するたびにデータベースに反映する)ではなく、バッチ更新処理(複数のデータを更新した後で一括してデータベースに反映する)を行います。

バッチ更新処理を行うには、どのデータを変更したのかを追跡して、変更データの一覧を管理する必要があります。CollectionViewではこれらの処理を自動的に行うため、複雑な処理を実装しなくても、簡単にバッチ更新処理を行うことができます。

次のJavaScriptコードを追加します。CollectionViewで変更データの追跡を有効にします。次に、更新されたデータの一覧(CollectionView.itemsEditedプロパティ)を取得して、Web APIにPUT要求を送信します。PUT要求では、URLに更新データのIDを指定して、データに更新データを指定します。

cv.trackChanges = true;

function update() {
  for (var i = 0; i < cv.itemsEdited.length; i++) {
    wijmo.httpRequest('/api/Products/' + cv.itemsEdited[i].ProductID, {
      method: 'PUT',
      data: cv.itemsEdited[i]
    });
  }
}

この方法で作成したWeb APIでは、一度に1件のデータしか更新できないため、更新されたデータ件数だけWeb APIを呼び出します。逐次更新処理と比べると、Web APIの呼び出し回数は変わりませんが、任意のタイミングで更新を行えるという利点があります。

プロジェクトを実行して、複数のデータを更新してから更新ボタンを押します。ページをリロードすると、データベースに更新が反映されていることが確認できます。

f:id:ComponentOne_JP:20160623094005p:plain

5. 生成処理を行う

次に、FlexGridで追加したデータをデータベースに反映します。

次のJavaScriptコードを追加します。FlexGridで行の追加を有効にします。次に、追加されたデータの一覧(CollectionView.itemsAddedプロパティ)を取得して、Web APIにPOST要求を送信します。POST要求では、データに追加データを指定します。

flexGrid.allowAddNew = true;

function update() 
  :
  for (var i = 0; i < cv.itemsAdded.length; i++) {
    wijmo.httpRequest('/api/Products/', {
      method: 'POST',
      data: cv.itemsAdded[i]
    });
  }
}

FlexGridの一番下に新しい行が表示され、セルを入力すると新しいデータが追加されます。

f:id:ComponentOne_JP:20160623094014p:plain

プロジェクトを実行して、複数のデータを追加してから更新ボタンを押します。ページをリロードすると、データベースのデータが追加されていることが確認できます。

f:id:ComponentOne_JP:20160623094021p:plain

6. 削除処理を行う

次に、FlexGridで削除したデータをデータベースに反映します。

次のJavaScriptコードを追加します。FlexGridで行の削除を有効にします。次に、削除されたデータの一覧(CollectionView.itemsRemovedプロパティ)を取得して、Web APIにDELETE要求を送信します。DELETE要求では、URLに削除データのIDを指定します。

flexGrid.allowDelete = true;

function update() 
  :
  for (var i = 0; i < cv.itemsRemoved.length; i++) {
    wijmo.httpRequest('/api/Products/' + cv.itemsRemoved[i].ProductID, {
      method: 'DELETE'
    });
  }
}

FlexGridでは、行を選択してDeleteキーを押すと、行が削除されます。複数行をまとめて選択して削除することも可能です。

プロジェクトを実行して、5.で追加したデータを削除してから更新ボタンを押します。ページをリロードすると、データベースのデータが削除されていることが確認できます。

NORTHWND.MDFデータベースでは、既存のデータには他のテーブルとのリレーションシップが設定されているため、削除することはできません。

f:id:ComponentOne_JP:20160623094037p:plain

以上で、JavaScriptとWeb APIを用いたWebアプリケーションで、データベースのCRUD処理を実行することができました。

ComponentOne