ASP.NET MVCプログラミング入門 Scaffoldingを利用しよう

弊社技術顧問の増田智明の著書紹介をかねた.Net Core MVCのチップスです。

.NET Coreを利用するとLinux、Windowsを問わずに動作するアプリケーションが作成出来ます。2章 “スキャフォールディングの利用”の一部を実際に行ってみます。

スキャフォールディングは、CRUD(create,read,update,delete)処理を行う画面のコードをデータモデルを元にして自動生成する機能です。この自動生成機能はASP.NET Coreだけのものでなく、CakePHPなど他言語のフレームワークにも標準実装されています。つまり、データモデル毎によくある処理を実装する為のコードをまともに書かなくて済みます。

環境

• Visual Studio 2017
• SQL Server 2016

プロジェクトを作りましょう

【新規作成】>> 【プロジェクト】を選択します。

【テンプレート】>> 【WEB】>> 【ASP.NET Core Web アプリケーション(.NET Core)】を選択します。

【認証の変更】をクリックします。

【個別のユーザアカウント】にチェックを入れて、【OK】をクリックします。

この状態で動かしてみる

IIS Expressをクリックして動かしてみます。

起動しました。

SQL Server Management StudioでDBを作成しよう

サーバー名を任意の環境で選択して【接続】をクリックします。

【データベース】>> 【新しいデータベース】を選択します。

データベース名として【testdb】を入力して【OK】をクリックします。

【テーブル】で右クリックを行い、【テーブル】を選択します。

テーブルの作成

idに対して主キーを設定しています。スキャフォールディングを利用するテーブルは主キーがないといけません。

テーブルが出来ました。

PowerShellを起動させよう

“PowerShell”を起動して、プロジェクトのディレクトリまでカレントディレクトリを移動します。

PS C:\Users\root> cd c:\SampleMVC\SampleMVC\SampleMVC

スキャフォールディングでModelを作成します。Server=接続名となっており、この環境ではROOT-PC\SQLEXPRESSになっていますが、環境によって変更して下さい。

PS C:\SampleMVC\SampleMVC\SampleMVC> dotnet ef dbcontext scaffold "Server=ROOT-PC\SQLEXPRESS;Database=testdb;Trusted_Connection=True" Microsoft.EntityFrameworkCore.SqlServer -o Models

ModelsディレクトリにPerson.csと、testdbContext.csが作成されています。

Startup.csに

service.AddDbContext<testdbContext>();

を追加しデータベースに接続するように設定します。

次はControllerを追加します。【Controllers】>> 【追加】 >> 【コントローラ】を選択します。

【Entity Frameworkを使用したビューがあるMVCコントローラ】を選択して【追加】をクリックします。また左側に注目すると、ポップアップタイトルに”スキャフォールディングを追加”となっていますね。

• モデルクラス：Person
• データコンテキストクラス：testdbContext
• コントローラ名：PeopleController

上記にして【追加】をクリックします。Modelが『Person』である場合はコントローラは『People』と複数系になります。Personsではありません。

コントローラとビューが出来ています。

スキャフォールディングを利用すると、テーブル毎の作成-参照-更新-削除する為の一連の処理(CRUD)をプログラミングする作業から解放されます。便利すぎる。あくまで”足場”なので詰める必要はありますが、便利！

 動きをチェックしよう

http://ホスト名：ポート/people/create

にアクセスして、任意の値を入力して【Create】をクリックしましょう。

このように簡単に入力することが出来ました。

スキャフォールディング機能を利用すると、テーブルに合わせたMVCの雛形を簡単に追加作成することが出来ます。

Views/PeopleのIndex.cshtmlを拡張してみる

<table class="table">
    <thead>
        <tr>
                <th> ←追加
                    @Html.DisplayNameFor(model => model.Id) ←追加
                </th> ←追加
                <th>
                    @Html.DisplayNameFor(model => model.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Age)
                </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>

            <td> ←追加
                @Html.DisplayFor(modelItem => item.Id) ←追加
            </td> ←追加
            <td>
                <a asp-action="Details" asp-route-id="@item.Id"> ←追加
                    @Html.DisplayFor(modelItem => item.Name)
                </a> ←追加
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Age)
            </td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
            </td>
        </tr>
}
    </tbody>
</table>

スキャフォールドで作成されたビューの雛形に習ってアレンジしてみます。

• ID列を表示させる。
• 名前に詳細表示ページのリンクをつける。

ビューpeopleにアクセスするとID列が表示され、名前に詳細リンクが付きました。詳細をクリックしてみます。

大丈夫のようですね。

続きは書籍で

WEB API, WPF, Xamarinなどクライアントを選ばないアプリケーション作成のテクニックがぎゅぎゅっと紹介されています。必読！