株式会社インデペンデンスシステムズ横浜

システム開発エンジニアの西田五郎が運営しております。新規開発案件のご依頼をお待ちしております。

*

ASP.NET Web APIでデータ蓄積の続き(その1)データ表示ページ

   

ASP.NET Web APIでデータ蓄積というテーマで以下から始まるシリーズを書きました。まず以下のページが概要です。
ASP.NET Web APIでデータ蓄積(その1)ASP.NET Web APIとは

以下の各ページで事前準備的にMVCのそれぞれの個別のテーマについて書きました。
ASP.NET Web APIでデータ蓄積(その2)ASP.NET コードファーストでのモデル構築
ASP.NET Web APIでデータ蓄積(その3)ASP.NET ApiControllerクラス
ASP.NET Web APIでデータ蓄積(その4)ASP.NET ApiControllerクラスとView

そして、以下から再度ASP.NET Web APIテンプレートからプロジェクトを構築してデータ蓄積機能を実装しました。
ASP.NET Web APIでデータ蓄積(その5)ASP.NET Web APIテンプレートからの構築
ASP.NET Web APIでデータ蓄積(その6)ASP.NET Web APIでの動作確認

最後にRaspbery Piからの温度データ蓄積をテストしました。
ASP.NET Web APIでデータ蓄積(その7)Raspbery Piからの温度データ蓄積

その結果が以下のグラフです。2時間ほどですが温度データの記録です。
tmpchart1

そのプロジェクト一式が以下です。(※単なるサンプルプログラムです。ご利用による不具合、不利益等について弊社は一切責任を負わないものとします。)
Visual Studio Community 2013でのプロジェクト一式

確かにグラフを表示するところまで出来ましたが、このグラフはデータベースを管理ツールから直接コピーペーストでExcelにコピーしてExcelでチャート表示したものです。またRaspbery Piからのデータが蓄積出来ているかどうかもデータベースを管理ツールで確認していました。これではさすがに機能が物足りないかなということでもう少し続きとして書いてみます。

今回は最終的に以下のように表示するページを作成します。
0006

温度データの表示ページ(スキャフォールディング)の作成
上記画像のような表示で温度データが蓄積されているかどうか確認出来るページを作成します。前回のシリーズで作成したASP.NETアプリケーションでは以下のASP.NET Web APIテンプレート(認証なし)から始めました。
0007

この場合は、ASP.NET MVCのViewとControllerも使えます。そこでここではこのASP.NET MVCのViewとControllerで温度データ(のモデル)を表示してみます。上記のプロジェクト一式の状態からスタートします。以下その手順です。

コントローラとビューを追加します。プロジェクトのContollersフォルダを右クリック -> [追加] -> [新しいスキャフォールディング アイテム]を選択します。
0001

「Entity Framework を使用した、ビューがあるMVC 5 コントローラ」を選択します。以下のように モデル関連の項目で温度データに関連するクラスを選択します。
0005

ビルド実行後、ビルドエラーがないことを確認して実行します。当然スタートページが表示されますので、以下のようなURL(※ポート番号は例です)を直接入力します。ポイントはもちろんコントローラの名称です。上で追加したコントローラの名称です。
http://localhost:62205/TemperatureDatasDisplay
以下のように表示されました。
0006
これで少なくとも温度データの表示が出来ました。これをカスタマイズしていきます。

温度データの表示ページ(スキャフォールディング)のカスタマイズ
項目名を表示します。
上記の段階ではモデルのプロパティ名で表示されている項目名を日本語で表示されるようにします。ここではモデルのアノテーションで対応します。以下のように設定しました。

using System.ComponentModel.DataAnnotations;
using System.ComponentModel;

/// <summary>
/// 温度データ
/// </summary>
public class TemperatureData
{
    public int Id { get; set; }

    [Required]
    [DisplayName("デバイス")]
    public int DeviceId { get; set; }

    [Required]
    [DisplayName("温度")]
    public double TemperatureValue { get; set; }

    [DisplayName("取得日時")]
    [Required]
    public DateTime CreatedDateTime { get; set; }
}

以下のようになりました。
0003

ページタイトルとデータ操作のリンクの削除
ViewsフォルダのTemperatureDatasDisplayフォルダ配下のIndex.cshtmlを編集します。タイトルを編集して、ここでは使わないであろうと思われる、Create、Edit、Detailを削除しました。

@model IEnumerable<ASPNETWebApiTemperature.Models.TemperatureData>

@{
    ViewBag.Title = "Index";
}

<h2>温度データの一覧</h2>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.DeviceId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.TemperatureValue)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CreatedDateTime)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.DeviceId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TemperatureValue)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CreatedDateTime)
        </td>
        <td>
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>

0004

ヘッダ部分の表示
アプリケーション名の変更と温度データの一覧のページのリンクを追加します。ViewsフォルダのSharedフォルダ配下の_Layout.cshtmlを編集します。以下は該当部分のみです。

   <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
   </button>
   @Html.ActionLink("温度データ管理", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
   </div>
   <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
        <li>@Html.ActionLink("ホーム", "Index", "Home", new { area = "" }, null)</li>
        <li>@Html.ActionLink("温度データ", "Index", "TemperatureDatasDisplay", new { area = "" }, null)</li>
        <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
        </ul>
   </div>

以下のように表示出来ました。
0005

データの並び替え
温度データを最新の順に並ぶように修正します。こちらはコントローラを修正します。TemperatureDatasDisplayController.csです。以下の部分です。

    // GET: TemperatureDatasDisplay
    public ActionResult Index()
    {
        var recSet = db.TemperatureDatas.OrderByDescending(itm => itm.CreatedDateTime);
        return View(recSet.ToList());
    }

以下のように表示出来ました。
0006

実際には検索の機能も必要になると思いますが、ここでは温度データが蓄積出来ているかどうか確認出来ればということでここまでにします。

最終的な今回のプロジェクトは以下です。(※単なるサンプルプログラムです。ご利用による不具合、不利益等について弊社は一切責任を負わないものとします。)
プロジェクトファイル一式

次回は今回の温度データのグラフ表示をするページを作成します。

Amazon関連商品


 - ASP.NET

AdSense

AdSense

  関連記事

no image
Microsoft AzureでASP.NETサイトを公開してみる(その3)Visual Studio EEからの公開

Microsoft AzureでASP.NETサイトを公開してみるの3回目です。 …

ASP.NET Web APIでデータ蓄積(その1)ASP.NET Web APIとは

ASP.NET Web APIを利用してデータを蓄積する機能を実装してみたいと思 …

no image
ASP.NETユーザ管理(その9) パスワードのリセット

ASP.NETユーザ管理(ASP.NET Identityフレームワーク)の9回 …

ASP.NET Web APIでデータ蓄積(その4)ASP.NET ApiControllerクラスとView

ASP.NET Web APIでデータ蓄積の4回目です。前回はASP.NET A …

ASP.NET Web APIでデータ蓄積(その7)Raspbery Piからの温度データ蓄積

ASP.NET Web APIでデータ蓄積の7回目です。前回までで少なくとも温度 …

no image
ASP.NETユーザ管理(その5)メンバー専用エリアと管理者ページ

ASP.NETユーザ管理(ASP.NET Identityフレームワーク)の5回 …

no image
ASP.NETユーザ管理(その2)WebFormsでのASP.NET Identity

ASP.NETユーザ管理の2回目です。前回は、主にASP.NET Identit …

ASP.NET Web APIでデータ蓄積(その6)ASP.NET Web APIでの動作確認

ASP.NET Web APIでデータ蓄積の6回目です。前回は、ASP.NET …

no image
ASP.NETユーザ管理(その1)identityフレームワーク

今現在で最新のVisual Studio 2013で利用可能なASP.NETでの …

ASP.NET Web APIでデータ蓄積(その2)ASP.NET コードファーストでのモデル構築

ASP.NET Web APIでデータ蓄積の2回目です。前回は、ASP.NET …