空のプロジェクトからASP.NET MVC5 EntityFramework6を試す

経緯

仕事ではClassic ASPおよびDelphi5の改修作業が多い。昨年の3月ぐらいまでは、Delphi5の既存アプリケーションをASP.NET + WebAPIで作り直す仕事があり、少しはモダン開発をやれたものの、その後はまた既存アプリケーションの改修作業に戻ってしまった。
仕事内でやりながら新しいことを覚えられるのが一番いいのだが、運用チームだけに開発向けのお金は渋られる傾向にあるようだ。なので既存アプリケーションの作り直し作業を合間にやって、提案していくという方向が良さそうである。
ASP.NET + MVC5 + EntityFramework6 が現状では最もモダンな開発環境と思ったので、Hello Worldから理解していく。

サンプルサイト

EntityFrameworkは置いておいて、ASP.NET MVC5から理解する。
Visual Studio 2015の新規作成でテンプレートのMVCで作成するとサンプルアプリケーションが出来るのだが、いきなりワケがわからない。
MVCについては全然触っていなかったので感覚が掴めない。そういえばASP.NET WebAPIをやった時もサンプルアプリケーションではよく分からなかったので空のプロジェクトから理解していった。
ネットで空のプロジェクトから始まる良さげなサイト「ASP.NET MVC5 をざっとペロる」を見つけた。しかも、EntityFrameworkのことも書いてあるし丁度良さ気だ。

環境

• Windows 7 Proffesional
• SQL Server 2014 Express

SQLServerの設定変更

SQL Server 2014 ExpressをインストールではWindows認証のままでしたが、サイトが sa でのログインするようになっていたので、「Microsoft SQLServer 2014 で sa でのログインを有効化」を参考に変更しました。
その後、「(provider: SQL ネットワーク インターフェイス, error: 26 - 指定されたサーバーまたはインスタンスの位置を特定しているときにエラーが発生しました)」のエラーでTCP/IPが有効化されていないのが原因とのことで、「SQL Server 2012 XE にTCP/IP接続する方法」にて最初のTCP/IPが有効化のみ行いました。ポートやファイアーウォールなどは変更してません。

ASP.NET MVC5を理解

プロジェクト名は「Chrowa3」から「MvcBasic」に変更して作成しました。
有りがたいことにASP.NET MVC5のなんとなくの動きは理解することが出来た。
そして、EntityFrameworkについても同様に進めていった。
しかし、サイトのまま「BookList」と入力しても「このページを表示できません」となる。
EntityFrameworkについて何か間違っているのだろうか見直した。
参考:第2回　Entity Frameworkコード・ファーストでモデル開発

BookListの表示

よくよく考えれば当たり前であった、「BookList」の対応コントローラーである「BookListController」についてこのサイトでは説明を省いているのである。

BookListControllerの作成

Contorollersフォルダに「BookListController.cs」を作成
※プロジェクト名は「Chrowa3」から「MvcBasic」に変更している。

BookListController.cs

using MvcBasic.Models;

namespace MvcBasic.Controllers
{
    public class BookListController : Controller
    {
        // アクションメソッド
        private StandardContext db = new StandardContext();

        // GET: BookList
        public ViewResult Index()
        {
            return View(db.Books.ToList());
        }
    }
}

ViewのBookListを作成

Viewフォルダ配下にBookListフォルダを作成し、「index.cshtml」を作成

index.cshtml

@model IEnumerable<MvcBasic.Models.Book>

@{
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Price</th>
            <th>ISBN</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Title)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Price)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ISBN)
                </td>
            </tr>
        }
    </tbody>
</table>

表示イメージの違い

「localhost:52955/BookList/」で無事にリストを表示することが出来ました。
しかし、表示イメージが違います。サンプルサイトでは区切りが横線のみになっています。
調べてみると「Bootstrap」によってテーブルの表示イメージが変更できるとのこと。
Bootstrap使い方メモ１（基本＋CSS）
tableタグに「class="table"」を付けるだけでいいみたい。

index.cshtml

<table class="table">
・・・
</table>

それでも駄目でした。どうやら自分の環境では下記部分の修正が必要でした。
※NuGetでBootstrap 3.3.6 をインストール
View\Shared\ _BaseLayout.cshtml

修正前　_BaseLayout.cshtml

<script src="/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/styles.css">

修正後　_BaseLayout.cshtml

<script src="~/scripts/bootstrap.min.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap.min.css">

これで同じ表示イメージとなりました。

WebGridの使用

今時、テーブルタグを使って地道に書くってことはしないんじゃないかと「WebGrid」があったので、これで同じように表示出来るはずだと思い試しました。
参考：[ASP.NET MVC] WebGrid のページング

index.cshtml

@model IEnumerable<MvcBasic.Models.Book>

@{
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
    // WebGridオブジェクト生成
    var grid = new WebGrid(source: Model);
}


<h2>Index</h2>

@* WebGridオブジェクトでレンダリング *@

@grid.GetHtml(
tableStyle: "table",
columns: grid.Columns(
grid.Column("Title", "Title")
, grid.Column("Price", "Price")
, grid.Column("ISBN", "ISBN")
    )
)

今後について

今回は「SQL Server 2014 Express」を使ったわけですが、仕事で主に使用しているのは「Oracle」です。次回はOracleを使って同じように表示できるようにしてみます。