ASP.NET Web API を作る・その６
『ASP.NET Web API を作る・その５』の続きです。１．前提と２．作成手順概要は再掲載します。
１．前提
言語： C# を使用
サーバー環境：
ＯＳ：Windowsserver 2012R2
ＤＢ：SQL Server 2014
Web Server IIS Ver8.5
ツール：VisualStudio Professional 2013 Update 4
２．作成手順概要
(1) ASP.NET Web API プロジェクト新規作成
(2) ADO.NET Entity Data Model の設定
(3) Web API コントローラの作成
(4) 公開用DBのテーブルにアクセス権の設定
(5) IISに仮想ディレクトリ・アプリケーションの設定
(6) 確認用AjaxHtmlの作成＆実行
３．作成手順詳細
(6) 確認用AjaxHtmlの作成＆実行
最初にWebAPIが動作しているか確認します。
http://サーバー名称/ws/WebApplication1/api/テーブル名称/テーブルのKEY/
でアクセスしてみて、
このようになればOKです。
実はjson形式で帰ってくるのを期待していたのですが、どこかで設定の誤りがあるかもしれません。
クロスドメインを考慮しなければこれでもOKです。
もう一つKEYを指定しないで、
http://サーバー名称/ws/WebApplication1/api/テーブル名称/
でアクセスしてみて、
テーブルの内容が全件表示されればOKです。
続いてAjaxをつかってテーブルの内容を表示させてみます。
ここで［一覧ロード］ボタンをクリックすると、
テーブルの内容が全件表示されます。あとはhtmlの内容を加工すればアプリケーションとしては完成です。
ソースリストを以下に載せときます。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<body>
<div id="site">
<header>
<h3>
ajax01.html
</h3>
</header>
<nav>
</nav>
<section>
<input id="loadButton" type="button" value="一覧ロード" />
<table id="result" class="table"></table>
<script type="text/javascript">
<!--
$(function () {
//ボタンのクリックイベントにハンドラを割り当て
$("#loadButton").click(function () {
$.ajax({
//WebサービスのURLを作成
url: "http://サーバー名称/ws/プロジェクト名称/api/テーブル名称/",
//データ形式はJSON
dataType: "json",
//結果をid=resultのdivタグに設定
success: function (data) {
$("#result *").remove();
$(data).each(function () {
$('<tr>' +
'<td>' + this.hatu1 + '</td>' +
'<td>' + this.syubetu + '</td>' +
'<td>' + this.bansen + '</td>' +
'<td>' + this.ikisaki + '</td>' +
'<td>' + this.jikoku + '</td>' +
'<td>' + this.hensei + '</td>' +
'</tr><tr>' +
'<td>' + this.hatu2 + '</td>' +
'<td>' + this.syubetu2 + '</td>' +
'<td>' + this.bansen2 + '</td>' +
'<td>' + this.ikisaki2 + '</td>' +
'<td>' + this.jikoku2 + '</td>' +
'<td>' + this.hensei2 + '</td>' +
'</tr>').appendTo('#result');
});
}
})
});
});
// -->
</script>
</section>
<footer>
</footer>
</div>
</body>
| 固定リンク
| コメント (0)
| トラックバック (0)
最近のコメント