« ASP.NET Web API を作る・その５ | トップページ | 【今月（６月）の一言】 »

2018.05.08

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/
でアクセスしてみて、
2018050471

このようになればOKです。
実はjson形式で帰ってくるのを期待していたのですが、どこかで設定の誤りがあるかもしれません。
クロスドメインを考慮しなければこれでもOKです。
もう一つKEYを指定しないで、
http://サーバー名称/ws/WebApplication1/api/テーブル名称/
でアクセスしてみて、
2018050472

テーブルの内容が全件表示されればOKです。

続いてAjaxをつかってテーブルの内容を表示させてみます。
2018050473

ここで［一覧ロード］ボタンをクリックすると、
2018050474

テーブルの内容が全件表示されます。あとは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>

2018.05.08 Web, C#, Javascript |

« ASP.NET Web API を作る・その５ | トップページ | 【今月（６月）の一言】 »

「Web」カテゴリの記事

「C#」カテゴリの記事

「Javascript」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です： ASP.NET Web API を作る・その６:

« ASP.NET Web API を作る・その５ | トップページ | 【今月（６月）の一言】 »