新しくModel-View-Controllerを作る

Modelを作る

  • Modelsフォルダを右クリック→追加→新しい項目
  • コード→クラス
  • 名前は「ItemModel」とする
  • ItemModelクラスはこのようにする
  • public class ItemModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
    

     

Controllerを作る

    • Controllersフォルダを右クリック→追加→コントローラ
    • MVC5コントローラ – 空→OK
    • SampleControllerと名前をつける→追加
    • 作成できたらSampleController.csはこのようになってると思うのでShowアクションメソッドを生やす
    • 先ほど作ったItemModelをShowメソッド内で初期化し、Viewメソッドの引数に入れてreturnする
    • public class SampleController : Controller
      {
          Models.ItemModel _itemItemModel;
          // GET: Sample
          public ActionResult Index()
          {
              return View();
          }
      
          public ActionResult Show()
          {
              //ItemModelモデルを初期化
              this._itemItemModel = new Models.ItemModel();
              this._itemItemModel.Id = 3;
              this._itemItemModel.Name = "りんご";
      
              //ItemModelを引数に入れてViewに渡す
              return View(this._itemItemModel);
      
          }
      }

Viewを作る

  • Viewsフォルダ内に「Sample」フォルダができているので右クリック→追加→ビューを選択
  • View名はアクションメソッドと同じ「Show」とする
  • レイアウトページの使用をチェックを外して追加ボタンを押す
  • Show.cshtmlの内容を以下の用にする
  • return View(model)によってコントローラから渡されたモデルは「@model モデルクラス名」と指定することで使えるようになる
  • @model にクラス名を指定しておけば@Model.プロパティ名 でモデルクラスにアクセスすることができる
  • <!--追加-->
    @model SampleWebApp.Models.ItemModel
    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Show</title>
    </head>
    <body>
        <div> 
            <!--追加-->
            <h2>Id = @Model.Id</h2>
            <h2>Name = @Model.Name</h2>
        </div>
    </body>
    </html>
    

     

  • F5もしくはデバッグ開始ボタンを押す
  • /Sample/Showにアクセスすると以下のような画面になればOK

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.