ASP.NETでMVCによるコードファーストでサンプル画面を作ります。
前回、動くプロジェクトを作ったので、そのプロジェクトにビューを追加します。
自分で作るのに意義があるので、見た目にはこだわってません。
こだわりたくなってからでいいでしょう。ビューだけをブラッシュアップすれば良くなるものですし。おそらく。

参考

MVCでコードファーストを作ったプロジェクトの記事
Visual Studio 2017 ASP.NET MVC コードファースト　初めてのプロジェクトの作成

今回作るもの

ＭＶＣなのでモデルとビューとコントローラが必要なのです。
コントローラはあるので新規には作りません。改修による画面追加イメージで。
ビューはゼロから作ります。
モデルもゼロから作ります。参照系の画面イメージでＤＢとは無関係にします。コードファーストのプロジェクトでも全画面が永続化依存オブジェクトを必要とはしてないでしょう。たぶん。
作ったビューがショボすぎるので、その代わりにスキャフォールディングで自動生成したビューを少しいじってます。

作成手順

モデルを追加する。

モデルを作りたいのでクラスを新規で作ります。

今はBookSモデルしかありません。

Modelsの右クリックでクラスを選択します。

モデル名はToteBagにしてみました。

   public class ToteBag
    {
        public string DispData { get; set; }
    }

項目１つの２つ目のモデルができました。

DbContextクラスのBookModelには、現在Bookのみが登録されています。
ToteBagはＳＱＬＳｅｒｖｅｒに保存してもらわなくてもいいので、BookModelには追加しません。

それよりもDbContextとかかわりのないToteBagが、きちんと動くのかどうかが気になるところだったりします。

コントローラにアクションを追加する。

スキャフォールディングで自動生成されたDetailsのアクションを参考にさせてもらいます。


Booksの検索結果がローカル変数のbookに入れられて、ActionResultの戻り値としてセットされています。
ToteBagもローカル変数でＯＫということですね。

これでBooksのDispアクションが完成です。

        public ActionResult Disp()
        {
            ToteBag bag = new ToteBag();

            var aa = from dd in db.Books
                     orderby dd.Id descending
                     select dd;

            bag.DispData = "ToteBag:";
            bag.DispData += "<br />";
            foreach (var dd in aa)
            {
                bag.DispData += dd.Id;
                bag.DispData += "<br />";
                bag.DispData += dd.Name;
                bag.DispData += "<br />";
                bag.DispData += dd.Memo;
                bag.DispData += "<br />";
                bag.DispData += dd.Memo2;
            }

            return View(bag);
        }

はじめてＬＩＮＱを使ってしまいました。
いくら凝ったロジックで編集しても、ビューに表示されるかが問題です。

ビューを追加する。

BooksのDispアクション用のビューなので、Booksの右クリックでMVC 5 View Page with Layout(Rasor)を選ぶ。

アクションと同じ名称にする。

レイアウト付きでお願いしたのでＯＫ。

えぇ！！というぐらい簡素なソースを作ってもらいました。

ToteBagが活躍するかどうか大事なところなので、ロジックを工夫しておきます。
見た目にはこだわってません。

完成です。
ビデオでないので、どれぐらい悩んで調べて作ったかは伝わりません。

@model WebApplication1.Models.ToteBag

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

<br />
<hr />
@Model.DispData
<br />
<hr />
@Html.DisplayFor(model => Model.DispData)
<br />
<hr />
@Html.Raw(Model.DispData)
<hr />
<br />

１行目の@modelでToteBagを指定してます。
ラムダ式が見えます。矢印付きの呪文と思って、考えないことにします。
後はＲａｚｏｒのＨＴＭＬヘルパーです。

動かしてみる。

開始ページを指定していないので、Disp.cshtmlを開いて実行してください。
動きました？
一度にモデルとビューを追加して、コントローラを改造したので。
動いても動かなくても、次のデバッグしてみるがお勧めです。

デバッグしてみる。

動いたのであまり必要ありませんが、ステップ実行してみます。ステップ実行は変数の内容を動いている途中で確認できるので便利です。

コントローラにブレイクポイントを貼ります。

ビューにもブレイクポイントを貼ります。

開始ページを指定していないので、Disp.cshtmlを開いて実行してください。

まず、コントローラのブレイクポイントで止まりました。
コントローラから動いてますね。
もう動いているので、続行で動かします。

コントローラの後で、ビューのブレイクポイントで止まりました。
やはりビューは最後なのですね。
もう動いているので、続行で動かします。
ビューの画面が表示されました？

Ｗｉｎｄｏｗｓフォームアプリと同様に、好きなところにブレイクさせられますね。

画面遷移を試してみる。

スキャフォールディングで自動生成したコントローラやビューでも画面遷移があるので、それを眺めたらいいだろうと思いますが。
やることに意味があるので、Disp.cshtmlでも、少しだけ試しておきましょう。
手動で。

開始ページを指定していないので、Index.cshtmlを開いて実行してください。

ブラウザのＵＲＬを手動で修正してください。
Index画面が表示しているということは、このプロジェクトが実行中ということ。

Disp.cshtmlが表示されればＯＫ。
ＵＲＬを変更して、Disp画面が表示できたということは画面遷移と同じかな。

素直にスキャフォールディングで自動生成した画面にリンクを追加したほうがいいか。

スキャフォールディングを改造

スキャフォールディングで自動生成した画面に自由度はないので、テスト用としても使いずらい。
そこで、長い文字列も入力できるぐらいにはしたいと思うはずです。

修正前です。

修正後です。

修正箇所です。

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;

    max-width: 100%;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /*max-width: 280px;*/
    max-width: 100%;
}

２箇所を”max-width: 100%”にすれば画面いっぱいに広がってくれるようです。
ちなみに、ＩＥだと.body-contentの変更は不要でした。
ＣＳＳと正規表現は呪文なので、考えずにそのまま使います。

長いテストデータならテキストエリアにできたほうが便利です。

@Html.EditorFor(model => model.Memo2, new { htmlAttributes = new { @class = "form-control" } })

@Html.TextAreaFor(model => model.Memo2,8,800, new { htmlAttributes = new { @class = "form-control" } })

８行８００文字で作ってみました。
はみ出さないので画面幅いっぱいのテキストエリアにできました。

画面を作ってみて

ＨＴＭＬヘルパーのＲＡＷだけでしたねＨＴＭＬとして表示できたのは。
でも、攻撃されないためには＊＊＊＊Ｆｏｒとかを使うべきかもしれません。
ＨＴＭＬヘルパーを駆使する必要がありますね。

コントロールブレイクを気楽に使える環境はやはり、すごいですね。
ステップ実行依存症です。軟弱化してます。
ビューってＨＴＭＬのテキストではなかったの？と素朴な疑問がわく前に
ステップ実行のしあわせだけかみしめて、サンプルを試しましょう。
いろいろ。