Asp.net-mvc-data-model

提供:Dev Guides
移動先:案内検索

ASP.NET MVC-データモデル

この章では、ASP.NET MVCフレームワークアプリケーションでのモデルの構築について説明します。 model は、コントローラーからのコマンドに従って取得され、ビューに表示されるデータを保存します。

モデルは、データとビジネスロジックを操作するクラスのコレクションです。 したがって、基本的にモデルはビジネスドメイン固有のコンテナです。 データベースと対話するために使用されます。 また、データを操作してビジネスロジックを実装するためにも使用できます。

新しいASP.Net MVCプロジェクトを作成して、Viewの簡単な例を見てみましょう。

  • ステップ1 *-Visual Studioを開きます。 [ファイル]→[新規]→[プロジェクト]メニューオプションをクリックします。

新しいプロジェクトダイアログが開きます。

Visual Studioを開く

  • ステップ2 *-左ペインから、テンプレート→Visual C#→Webを選択します。
  • ステップ3 *-中央のペインで、ASP.NET Webアプリケーションを選択します。
  • ステップ4 *-プロジェクト名「MVCSimpleApp」を[名前]フィールドに入力し、[OK]をクリックして続行します。 ASP.NETプロジェクトの初期コンテンツを設定するよう求める次のダイアログが表示されます。

MVCSimpleApp

  • ステップ5 *-簡単にするために、[空にする]オプションを選択し、[フォルダーとコア参照を追加する]セクションの[MVC]チェックボックスをオンにして[OK]をクリックします。

最小限の定義済みコンテンツで基本的なMVCプロジェクトを作成します。

ここでコントローラーを追加する必要があります。

  • ステップ6 *-ソリューションエクスプローラーでコントローラーフォルダーを右クリックし、[追加]→[コントローラー]を選択します。

[足場の追加]ダイアログが表示されます。

コントローラフォルダを右クリック

  • ステップ7 *-MVC 5コントローラーを選択-読み取り/書き込みアクションオプション付き。 このテンプレートは、コントローラーのデフォルトのアクションでインデックスメソッドを作成します。 これにより、編集/削除/作成などの他のメソッドもリストされます。
  • ステップ8 *-[追加]ボタンをクリックすると、[コントローラーの追加]ダイアログが表示されます。

従業員コントローラーの追加

  • ステップ9 *-名前をEmployeeControllerに設定し、[追加]ボタンをクリックします。
  • ステップ10 *-Controllersフォルダーに新しいC#ファイル「EmployeeController.cs」が表示されます。これは、Visual Studioで編集するために開いており、いくつかのデフォルトアクションがあります。
using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCSimpleApp.Controllers {
   public class EmployeeController : Controller{
     //GET: Employee
      public ActionResult Index(){
         return View();
      }

     //GET: Employee/Details/5
      public ActionResult Details(int id){
         return View();
      }

     //GET: Employee/Create
      public ActionResult Create(){
         return View();
      }

     //POST: Employee/Create
      [HttpPost]
      public ActionResult Create(FormCollection collection){
         try{
           //TODO: Add insert logic here
            return RedirectToAction("Index");
         }catch{
            return View();
         }
      }

     //GET: Employee/Edit/5
      public ActionResult Edit(int id){
         return View();
      }

     //POST: Employee/Edit/5
      [HttpPost]
      public ActionResult Edit(int id, FormCollection collection){
         try{
           //TODO: Add update logic here
            return RedirectToAction("Index");
         }catch{
            return View();
         }
      }

     //GET: Employee/Delete/5
      public ActionResult Delete(int id){
         return View();
      }

     //POST: Employee/Delete/5
      [HttpPost]
      public ActionResult Delete(int id, FormCollection collection){
         try{
           //TODO: Add delete logic here
            return RedirectToAction("Index");
         }catch{
            return View();
         }
      }
   }
}

モデルを追加しましょう。

  • ステップ11 *-ソリューションエクスプローラーでモデルフォルダーを右クリックし、[追加]→[クラス]を選択します。

モデルフォルダを右クリック

[新しい項目の追加]ダイアログが表示されます。

新しいアイテムの追加ダイアログ

  • ステップ12 *-中央のパンで[クラス]を選択し、名前フィールドにEmployee.csと入力します。
  • ステップ13 *-次のコードを使用して、いくつかのプロパティをEmployeeクラスに追加します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCSimpleApp.Models {
   public class Employee{
      public int ID { get; set; }
      public string Name { get; set; }
      public DateTime JoiningDate { get; set; }
      public int Age { get; set; }
   }
}

従業員のリストを返すメソッドをもう1つ追加して、EmployeeController.csファイルを更新しましょう。

[NonAction]
public List<Employee> GetEmployeeList(){
   return new List<Employee>{
      new Employee{
         ID = 1,
         Name = "Allan",
         JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
         Age = 23
      },

      new Employee{
         ID = 2,
         Name = "Carson",
         JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
         Age = 45
      },

      new Employee{
         ID = 3,
         Name = "Carson",
         JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
         Age = 37
      },

      new Employee{
         ID = 4,
         Name = "Laura",
         JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
         Age = 26
      },
   };
}
  • ステップ14 *-次のコードに示すように、インデックスアクションメソッドを更新します。
public ActionResult Index(){
   var employees = from e in GetEmployeeList()
   orderby e.ID
   select e;
   return View(employees);
}
  • ステップ15 *-このアプリケーションを実行し、ブラウザのURLに/employeeを追加してEnterを押します。 次の出力が表示されます。

インデックスビューが見つかりません

上記のスクリーンショットに見られるように、エラーがあり、このエラーは実際には非常に記述的であり、インデックスビューが見つからないことを示しています。

  • ステップ16 *-したがって、ビューを追加するには、インデックスアクション内を右クリックし、[ビューの追加]を選択します。

右クリックインデックスアクション

[ビューの追加]ダイアログが表示され、デフォルト名が追加されます。

デフォルト名の追加

  • ステップ17 *-[テンプレート]ドロップダウンリストと[モデルクラスの従業員]ドロップダウンリストを選択し、[レイアウトページを使用]チェックボックスをオフにして、[追加]ボタンをクリックします。

このビューにいくつかのデフォルトコードが追加されます。

@model IEnumerable<MVCSimpleApp.Models.Employee>
@{
   Layout = null;
}

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width"/>
      <title>Index</title>
   </head>

   <body>
      <p>@Html.ActionLink("Create New", "Create")</p>
         <table class = "table">
         <tr>
            <th>
               @Html.DisplayNameFor(model => model.Name)
            </th>

            <th>
               @Html.DisplayNameFor(model => model.JoiningDate)
            </th>

            <th>
               @Html.DisplayNameFor(model => model.Age)
            </th>

            <th></th>
         </tr>

         @foreach (var item in Model) {
            <tr>
               <td>
                  @Html.DisplayFor(modelItem => item.Name)
               </td>

               <td>
                  @Html.DisplayFor(modelItem => item.JoiningDate)
               </td>

               <td>
                  @Html.DisplayFor(modelItem => item.Age)
               </td>

               <td>
                  @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                  @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                  @Html.ActionLink("Delete", "Delete", new { id = item.ID })
               </td>

            </tr>
         }

      </table>
   </body>
</html>
  • ステップ18 *-このアプリケーションを実行すると、次の出力が表示されます。

従業員のリスト

従業員のリストが表示されます。