作成日: 2016/06/27 最終更新日: 2023/07/10
文書種別
使用方法
詳細
このページでは、JavaScriptとWeb APIを用いてデータベースのCRUD処理を行う方法を紹介します。より詳細な実装方法は、下記のページをご確認ください。
Wijmo利用ガイド > Webアプリケーションをつくる
既存のWeb APIを使用するか、新規にWeb APIを作成します。新規に作成する場合は、ASP.NET Web APIとスキャフォールディング機能を使用すると、簡単にデータベース処理を行うためのWeb APIを作成することができます。
FlexGridコントロールを使用すると、Excelのような操作方法で、データベースを表示および編集することができます。また、CollectionViewを使用すると、複雑な処理を実装しなくても、Web APIに送信する変更データを簡単に管理することができます。
Web APIにGET要求を送信します。wijmo.httpRequestメソッドを使用すると、jQueryを使用しなくても、XMLHttpRequestよりもシンプルなコードでHTTP要求を送信することができます。
◎サンプルコード
Web APIにPUT要求を送信します。FlexGridで更新したデータの一覧はCollectionView.itemsEditedプロパティで取得できます。
◎サンプルコード
Web APIにPOST要求を送信します。FlexGridで追加したデータの一覧はCollectionView.itemsAddedプロパティで取得できます。
◎サンプルコード
Web APIにDELETE要求を送信します。FlexGridで削除したデータの一覧はCollectionView.itemsRemovedプロパティで取得できます。
◎サンプルコード
Wijmo利用ガイド > 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);
}
});
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]
});
}
}
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]
});
}
}
：
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'
});
}
}
：
for (var i = 0; i < cv.itemsRemoved.length; i++) {
wijmo.httpRequest('/api/Products/' + cv.itemsRemoved[i].ProductID, {
method: 'DELETE'
});
}
}
旧文書番号
81700