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

文書番号 : 81700     文書種別 : HowTo
登録日 : 2016/06/27     最終更新日 : 2016/06/27

対象製品

Wijmo 5

詳細

このページでは、JavaScriptとWeb APIを用いてデータベースのCRUD処理を行う方法を紹介します。より詳細な実装方法は、下記のページで確認してください。

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


1. Web APIを作成する


既存のWeb APIを使用するか、新規にWeb APIを作成します。新規に作成する場合は、ASP.NET Web APIとスキャフォールディング機能を使用すると、簡単にデータベース処理を行うためのWeb APIを作成することができます。

2. ビューを作成する


FlexGridコントロールを使用すると、Excelのような操作方法で、データベースを表示および編集することができます。また、CollectionViewを使用すると、複雑な処理を実装しなくても、Web APIに送信する変更データを簡単に管理することができます。

3. 読み込み処理を行う


Web APIにGET要求を送信します。wijmo.httpRequestメソッドを使用すると、jQueryを使用しなくても、XMLHttpRequestよりもシンプルなコードでHTTP要求を送信することができます。

◎サンプルコード
wijmo.httpRequest('/api/Products', {
  success: function (xhr) {
    cv.sourceCollection = JSON.parse(xhr.response);
  }
});


4. 更新処理を行う


Web APIにPUT要求を送信します。FlexGridで更新したデータの一覧はCollectionView.itemsEditedプロパティで取得できます。

◎サンプルコード
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]
    });
  }
}


5. 生成処理を行う


Web APIにPOST要求を送信します。FlexGridで追加したデータの一覧はCollectionView.itemsAddedプロパティで取得できます。

◎サンプルコード
function update()
  :
  for (var i = 0; i < cv.itemsAdded.length; i++) {
    wijmo.httpRequest('/api/Products/', {
      method: 'POST',
      data: cv.itemsAdded[i]
    });
  }
}


6. 削除処理を行う


Web APIにDELETE要求を送信します。FlexGridで削除したデータの一覧はCollectionView.itemsRemovedプロパティで取得できます。

◎サンプルコード
function update()
  :
  for (var i = 0; i < cv.itemsRemoved.length; i++) {
    wijmo.httpRequest('/api/Products/' + cv.itemsRemoved[i].ProductID, {
      method: 'DELETE'
    });
  }
}