繰り返し #1 – アプリケーションを作成する (C#)

[アーティクル]
06/09/2024

作成者: Microsoft

コードのダウンロード

最初のイテレーションでは、可能な限り簡単な方法で連絡先マネージャーを作成します。基本的なデータベース操作 (生成、読み取り、更新、削除 (CRUD)) のサポートを追加します。

連絡先管理の ASP.NET MVC アプリケーションをビルドする (VB)

この一連のチュートリアルでは、連絡先管理アプリケーション全体を最初から最後までビルドします。連絡先マネージャーアプリケーションを使用すると、人物の一覧に連絡先情報 (名前、電話番号、電子メールアドレス) を保存できます。

複数のイテレーションを通してアプリケーションをビルドします。イテレーションのたびに、アプリケーションを徐々に改善します。複数のイテレーションからなるこのアプローチの目的は、お客様が各変更の理由を理解できるようにすることです。

イテレーション #1 - アプリケーションを作成します。最初のイテレーションでは、可能な限り簡単な方法で連絡先マネージャーを作成します。基本的なデータベース操作 (生成、読み取り、更新、削除 (CRUD)) のサポートを追加します。
イテレーション #2 - アプリケーションの外観を良くします。このイテレーションでは、既定の ASP.NET MVC ビューマスターページとカスケードスタイルシートを変更することで、アプリケーションの外観を向上させます。
イテレーション #3 - フォームの検証を追加します。 3 番目のイテレーションでは、基本的なフォームの検証を追加します。必須のフォームフィールドを入力しないとユーザーがフォームを送信できないようにします。また、メールアドレスと電話番号も検証します。
イテレーション #4 - アプリケーションを疎結合します。この 4 番目のイテレーションでは、いくつかのソフトウェアデザインパターンを利用して、連絡先マネージャーアプリケーションを簡単に維持し、変更できるようにします。たとえば、Repository パターンと Dependency Injection パターンを使用するようにアプリケーションをリファクターします。
イテレーション #5 - 単体テストを作成します。 5 番目のイテレーションでは、単体テストを追加することで、アプリケーションを簡単に維持し、変更できるようにします。データモデルクラスをモックし、コントローラーと検証ロジックの単体テストをビルドします。
イテレーション #6 - テスト駆動開発を使用します。この 6 番目のイテレーションでは、最初に単体テストを記述し、この単体テストに対してコードを記述することにより、新しい機能をアプリケーションに追加します。このイテレーションでは、連絡先グループを追加します。
イテレーション #7 - Ajax 機能を追加します。 7 番目のイテレーションでは、Ajax のサポートを追加することで、アプリケーションの応答性とパフォーマンスを向上させます。

このイテレーション

この最初のイテレーションでは、基本的なアプリケーションをビルドします。目標は、最速かつ可能な限り簡単な方法で連絡先マネージャーをビルドすることです。後のイテレーションでは、アプリケーションのデザインを改善します。

連絡先マネージャーアプリケーションは、基本的なデータベース駆動型アプリケーションです。このアプリケーションを使用して、新しい連絡先の作成、既存の連絡先の編集、連絡先の削除を行うことができます。

このイテレーションでは、次の手順を完了します。

ASP.NET MVC アプリケーション
連絡先を保存するデータベースを作成する
Microsoft Entity Framework を使用してデータベースのモデルクラスを生成する
データベース内のすべての連絡先を一覧表示するためのコントローラーアクションとビューを作成する
データベースに新しい連絡先を作成するためのコントローラーアクションとビューを作成する
データベース内の既存の連絡先を編集するためのコントローラーアクションとビューを作成する
データベース内の既存の連絡先を削除するためのコントローラーアクションとビューを作成する

ソフトウェアの必要なコンポーネント

ASP.NET MVC アプリケーションには、コンピューターに Visual Studio 2008 または Visual Web Developer 2008 がインストールされている必要があります (Visual Web Developer は、Visual Studio のすべての高度な機能が含まれない無料版の Visual Studio です)。次のアドレスから、Visual Studio 2008 の試用版または Visual Web Developer をダウンロードできます。

https://www.asp.net/downloads/essential/

Note

ASP.NET MVC アプリケーションに Visual Web Developer を使用する場合、Visual Web Developer Service Pack 1 がインストールされている必要があります。 Service Pack 1 がないと、Web アプリケーションプロジェクトを作成できません。

ASP.NET MVC フレームワーク。 ASP.NET MVC フレームワークは、次のアドレスからダウンロードできます。

https://www.asp.net/mvc

このチュートリアルでは、Microsoft Entity Framework を使用してデータベースにアクセスします。 Entity Framework は、.NET Framework 3.5 Service Pack 1 に含まれています。この Service Pack は、次の場所からダウンロードできます。

https://www.microsoft.com/download/details.aspx?id=22&desc=dotnet35

これらのダウンロードを 1 つずつ実行する代わりに、Web Platform Installer (Web PI) を利用できます。 Web PI は、次のアドレスからダウンロードできます。

https://www.asp.net/downloads/essential/

ASP.NET MVC プロジェクト

ASP.NET MVC Web アプリケーションプロジェクト。 Visual Studio を起動し、メニューオプション [ファイル]、[新しいプロジェクト] の順に選びます。 [新しいプロジェクト] ダイアログが表示されます (図 1 を参照)。プロジェクトタイプで [Web]、テンプレートで [ASP.NET MVC Web アプリケーション] を選びます。新しいプロジェクトに "ContactManager" という名前を付け、[OK] ボタンをクリックします。

[新しいプロジェクト] ダイアログの右上にあるドロップダウンリストから .NET Framework 3.5 を選択していることを確認します。これを選択しないと、ASP.NET MVC Web アプリケーションテンプレートが表示されません。

図 01: [新しいプロジェクト] ダイアログ (クリックするとフルサイズの画像が表示されます)

ASP.NET MVC アプリケーションの [単体テストプロジェクトの作成] ダイアログが表示されます。このダイアログを使用して、ASP.NET MVC アプリケーションを作成するときに、ソリューションに単体テストプロジェクトを作成および追加したいことを示すことができます。このイテレーションでは単体テストのビルドを行いませんが、後のイテレーションで単体テストを追加する予定です。そのため、[単体テストプロジェクトを作成する] オプションを選ぶ必要があります。最初に新しい ASP.NET MVC プロジェクトを作成するときにテストプロジェクトを追加しておく方が、ASP.NET MVC プロジェクトを作成した後にテストプロジェクトを追加するよりも、はるかに簡単です。

Note

Visual Web Developer ではテストプロジェクトがサポートされていません。そのため、Visual Web Developer を使用する場合は [単体テストプロジェクトの作成] ダイアログは表示されません。

図 02: [単体テストプロジェクトの作成] ダイアログ (クリックするとフルサイズの画像が表示されます)

ASP.NET MVC アプリケーションが Visual Studio の [ソリューションエクスプローラー] ウィンドウに表示されます (図 3 を参照)。 [ソリューションエクスプローラー] ウィンドウが表示されない場合は、メニューオプション [表示]、[ソリューションエクスプローラー] を選択すると開くことができます。ソリューションに、ASP.NET MVC プロジェクトとテストプロジェクトの 2 つのプロジェクトが含まれていることにご注目ください。 ASP.NET MVC プロジェクトは "ContactManager"、テストプロジェクトは "ContactManager.Tests" という名前です。

図 03: [ソリューションエクスプローラー] ウィンドウ (クリックするとフルサイズの画像が表示されます)

プロジェクトのサンプルファイルを削除する

ASP.NET MVC プロジェクトテンプレートには、コントローラーとビューのサンプルファイルが含まれています。新しい ASP.NET MVC アプリケーションを作成する前に、これらのファイルを削除する必要があります。ファイルやフォルダーを削除するには、[ソリューションエクスプローラー] ウィンドウでファイルまたはフォルダーを右クリックし、メニューオプション [削除] を選びます。

ASP.NET MVC プロジェクトから次のファイルを削除する必要があります。

\Controllers\HomeController.cs
\Views\Home\About.aspx
\Views\Home\Index.aspx

また、テストプロジェクトから次のファイルを削除する必要があります。

\Controllers\HomeControllerTest.cs

データベースを作成する

連絡先マネージャーアプリケーションは、データベース駆動型の Web アプリケーションです。データベースを使用して連絡先情報を保存します。

ASP.NET MVC フレームワークは、Microsoft SQL Server、Oracle、MySQL、IBM DB2 データベースなどの最新のデータベースと使用できます。このチュートリアルでは、Microsoft SQL Server データベースを使用します。 Visual Studio をインストールすると、Microsoft SQL Server Express (Microsoft SQL Server データベースの無料バージョン) をインストールするオプションが提供されます。

[ソリューションエクスプローラー] ウィンドウで App_Data フォルダーを右クリックし、メニューオプション [追加]、[新しい項目] の順に選び、新しいデータベースを作成します。 [新しい項目の追加] ダイアログで、[データ] カテゴリと [SQL Server データベース] テンプレートを選びます (図 4 を参照)。新しいデータベースに "ContactManagerDB.mdf" という名前を付け、[OK] ボタンをクリックします。

図 04: 新しい Microsoft SQL Server Express データベースの作成 (クリックするとフルサイズの画像が表示されます)

新しいデータベースを作成すると、[ソリューションエクスプローラー] ウィンドウの App_Data フォルダーにデータベースが表示されます。 ContactManager.mdf ファイルをダブルクリックして [サーバーエクスプローラー] ウィンドウを開き、データベースに接続します。

Note

Microsoft Visual Web Developer の場合、[サーバーエクスプローラー] ウィンドウは [データベースエクスプローラー] ウィンドウと呼ばれます。

[サーバーエクスプローラー] ウィンドウを使用して、データベーステーブル、ビュー、トリガー、ストアドプロシージャなどの新しいデータベースオブジェクトを作成できます。テーブルフォルダーを右クリックし、[新しいテーブルの追加] メニューオプションを選択します。データベーステーブルデザイナーが表示されます (図 5 を参照)。

図 05: データベーステーブルデザイナー (クリックするとフルサイズの画像が表示されます)

次の列を含むテーブルを作成する必要があります。

列名	[データ型]	[NULL を許容]
Id	int	false
FirstName	Nvarchar (50)	false
姓	Nvarchar (50)	false
電話番号	Nvarchar (50)	false
電子メールの送信	nvarchar (255)	false

最初の列の Id 列は特殊です。 Id 列を、IDENTITY 列と主キー列としてマークする必要があります。列が IDENTITY 列であることを示すには、列のプロパティを展開し (図 6 の下部を参照)、[IDENTITY の指定] プロパティまで下にスクロールします。 [(ID である)] プロパティを [はい] に変更します。

列を主キー列としてマークするには、列を選び、キーのアイコン付きのボタンをクリックします。列が主キー列としてマークされると、その列の横にキーのアイコンが表示されます (図 6 を参照)。

テーブルの作成が完了したら、[保存] ボタン (フロッピーのアイコンが付いたボタン) をクリックして、新しいテーブルを保存します。新しいテーブルに "連絡先" という名前を付けます。

"連絡先" データベーステーブルの作成が完了したら、テーブルに行をいくつか追加する必要があります。 [サーバーエクスプローラー] ウィンドウで "連絡先" テーブルを右クリックし、メニューオプション [テーブルデータの表示] を選びます。表示されるグリッドに連絡先を 1 つ以上入力します。

データモデルを作成する

ASP.NET MVC アプリケーションは、Model、View、Controller で構成されます。まず、前のセクションで作成した連絡先テーブルを表す Model クラスを作成します。

このチュートリアルでは、Microsoft Entity Framework を使用して、データベースから Model クラスを自動的に生成します。

Note

ASP.NET MVC フレームワークは、Microsoft Entity Framework に関連付けされていません。 ASP.NET MVC に、NHibernate、LINQ to SQL、ADO.NET などの代替データベースアクセステクノロジを使用できます。

データモデルクラスを作成するには、次の手順に従います。

[ソリューションエクスプローラー] ウィンドウで Models フォルダーを右クリックし、[追加]、[新しい項目] の順に選びます。 [新しい項目の追加] ダイアログが表示されます (図 6 を参照)。
[データ] カテゴリと [ADO.NET Entity Data Model] テンプレートを選びます。データモデルに ContactManagerModel.edmx という名前を付け、[追加] ボタンをクリックします。 Entity Data Model ウィザードが表示されます (図 7 を参照)。
[モデルのコンテンツの選択] 手順で、[データベースから生成] を選びます (図 7 を参照)。
[データ接続の選択] 手順で、ContactManagerDB.mdf データベースを選び、エンティティ接続設定の名前として「ContactManagerDBEntities」と入力します (図 8 を参照)。
[データベースオブジェクトの選択] 手順で、[テーブル] というラベルの付いたチェックボックスを選びます (図 9 を参照)。データモデルには、データベースに含まれるすべてのテーブルが含まれます (連絡先テーブル 1 つだけです)。名前空間に「Models」と入力します。 [完了] ボタンをクリックしてウィザードを完了します。

図 06: [新しい項目の追加] ダイアログ (クリックするとフルサイズの画像が表示されます)

図 07: モデルのコンテンツの選択 (クリックするとフルサイズの画像が表示されます)

図 08: データ接続の選択 (クリックするとフルサイズの画像が表示されます)

図 09: データベースオブジェクトの選択 (クリックするとフルサイズの画像が表示されます)

Entity Data Model ウィザードを完了すると、Entity Data Model デザイナーが表示されます。デザイナーには、モデル化されている各テーブルに対応するクラスが表示されます。 "Contacts" という名前のクラスが 1 つ表示されます。

Entity Data Model ウィザードでは、データベーステーブル名に基づいてクラス名が生成されます。ほとんどの場合、ウィザードによって生成されるクラスの名前を変更する必要があります。デザイナーで Contacts クラスを右クリックし、メニューオプション [名前の変更] を選びます。クラスの名前を Contacts (複数形) から Contact (単数形) に変更します。クラス名を変更すると、クラスが図 10 のように表示されます。

図 10: Contact クラス (クリックするとフルサイズの画像が表示されます)

ここまでで、データベースモデルを作成しました。 Contact クラスを使用して、データベース内の特定の連絡先レコードを表すことができます。

home コントローラーの作成

次の手順では、Home コントローラーを作成します。 Home コントローラーは、ASP.NET MVC アプリケーションで呼び出される既定のコントローラーです。

Home コントローラークラスを作成するには、[ソリューションエクスプローラー] ウィンドウで Controllers フォルダーを右クリックし、メニューオプション[追加]、[コントローラー] の順に選びます (図 11 を参照)。 [Create、Update、および Details の各シナリオのアクションメソッドを追加する] というチェックボックスにご注目ください。必ずこのチェックボックスがチェックされていることを確認してから、[追加] ボタンをクリックします。

図 11: Home コントローラーの追加 (クリックするとフルサイズの画像が表示されます)

Home コントローラーを作成すると、リスト 1 でクラスが取得されます。

リスト 1 - Controllers\HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace ContactManager.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        //
        // GET: /Home/Details/5

        public ActionResult Details(int id)
        {
            return View();
        }

        //
        // GET: /Home/Create

        public ActionResult Create()
        {
            return View();
        } 

        //
        // POST: /Home/Create

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

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

        //
        // POST: /Home/Edit/5

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Edit(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here
 
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

連絡先の一覧表示

連絡先データベーステーブルにレコードを表示するには、Index() アクションと Index ビューを作成する必要があります。

Home コントローラーには既に Index() アクションが含まれています。このメソッドをリスト 2 のように変更する必要があります。

リスト 2 – Controllers\HomeController.cs

public class HomeController : Controller
{

    private ContactManagerDBEntities _entities = new ContactManagerDBEntities();

    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View(_entities.ContactSet.ToList());
    }
…

リスト 2 の Home コントローラークラスに、"_entities" というプライベートフィールドが含まれていることにご注目ください。 "_entities" フィールドは、データモデルのエンティティを表します。 "_entities" フィールドを使用してデータベースと通信します。

Index() メソッドは、連絡先データベーステーブルのすべての連絡先を表すビューを返します。式 _entities.ContactSet.ToList() は、連絡先のリストを汎用リストとして返します。

Index コントローラーを作成したので、次に Index ビューを作成する必要があります。 Index ビューを作成する前に、メニューオプション [ビルド]、[ソリューションのビルド] の順に選び、アプリケーションをコンパイルします。ビューを追加する前に、必ずプロジェクトをコンパイルする必要があります。これにより、[ビューの追加] ダイアログにモデルクラスの一覧が表示されます。

Index ビューを作成するには、Index() メソッドを右クリックし、メニューオプション [ビューの追加] を選びます (図 12 を参照)。このメニューオプションを選択すると、[ビューの追加] ダイアログが開きます (図 13 を参照)。

図 12: Index ビューの追加 (クリックするとフルサイズの画像が表示されます)

[ビューの追加] ダイアログで、[厳密に型指定されたビューを作成する] というラベルが付いたチェックボックスをオンにします。 View データクラスに [ContactManager.Models.Contact]、View コンテンツに [List] を選びます。これらのオプションを選択すると、Contact レコードの一覧を表示するビューが生成されます。

図 13: [ビューの追加] ダイアログ (クリックするとフルサイズの画像が表示されます)

[追加] ボタンをクリックすると、リスト 3 の Index ビューが生成されます。ファイルの先頭に <%@ Page %> ディレクティブが表示されることにご注目ください。 Index ビューは、ViewPage<IEnumerable<ContactManager.Models.Contact>> クラスから継承されます。言い換えると、ビューの Model クラスは Contact エンティティの一覧を表します。

Index ビューの本文には、Model クラスによって表される各連絡先を反復処理する foreach ループが含まれています。 Contact クラスの各プロパティの値は、HTML テーブル内に表示されます。

リスト 3 - Views\Home\Index.aspx (unmodified)

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<ContactManager.Models.Contact>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Index</h2>

    <table>
        <tr>
            <th></th>
            <th>
                Id
            </th>
            <th>
                FirstName
            </th>
            <th>
                LastName
            </th>
            <th>
                Phone
            </th>
            <th>
                Email
            </th>
        </tr>

    <% foreach (var item in Model) { %>
    
        <tr>
            <td>
                <%= Html.ActionLink("Edit", "Edit", new { id=item.Id  }) %> |
                <%= Html.ActionLink("Details", "Details", new { id=item.Id  })%>
            </td>
            <td>
                <%= Html.Encode(item.Id) %>
            </td>
            <td>
                <%= Html.Encode(item.FirstName) %>
            </td>
            <td>
                <%= Html.Encode(item.LastName) %>
            </td>
            <td>
                <%= Html.Encode(item.Phone) %>
            </td>
            <td>
                <%= Html.Encode(item.Email) %>
            </td>
        </tr>
    
    <% } %>

    </table>

    <p>
        <%= Html.ActionLink("Create New", "Create") %>
    </p>

</asp:Content>

Index ビューに変更を 1 つ行う必要があります。 Details ビューは作成しないため、Details リンクを削除できます。 Index ビューから次のコードを見つけて削除します。

{ id=item.Id })%>

Index ビューを変更したら、連絡先マネージャーアプリケーションを実行できます。メニューオプション [デバッグ]、[デバッグの開始] の順に選ぶか、F5 キーを押します。アプリケーションを初めて実行すると、図 14 のダイアログが表示されます。 [デバッグを有効にするために Web.config ファイルを変更する] オプションを選び、[OK] ボタンをクリックします。

図 14: デバッグを有効にする (クリックするとフルサイズの画像が表示されます)

Index ビューが既定で返されます。このビューには、連絡先データベーステーブルのすべてのデータが一覧表示されます (図 15 を参照)。

図 15: Index ビュー (クリックするとフルサイズの画像が表示されます)

Index ビューで、ビューの下部に [新規作成] というラベルの付いたリンクが含まれていることにご注目ください。次のセクションでは、新しい連絡先を作成する方法について説明します。

新しい連絡先を作成する

ユーザーが新しい連絡先を作成できるようにするには、Home コントローラーに 2 つの Create() アクションを追加する必要があります。新しい連絡先を作成するための HTML フォームを返す Create() アクションを 1 つ作成する必要があります。新しい連絡先の実際のデータベース挿入を実行する 2 つ目の Create() アクションも作成する必要があります。

Home コントローラーに追加する必要がある新しい Create() メソッドが、リスト 4 に含まれています。

リスト 4 - Controllers\HomeController.cs (Create メソッドを使用)

//
// GET: /Home/Create

public ActionResult Create()
{
    return View();
} 

//
// POST: /Home/Create

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([Bind(Exclude = "Id")] Contact contactToCreate)
{
    if (!ModelState.IsValid)
        return View();

    try
    {
        _entities.AddToContactSet(contactToCreate);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

最初の Create() メソッドは HTTP GET を使用して呼び出すことができますが、2 番目の Create() メソッドは HTTP POST によってのみ呼び出すことができます。つまり、2 番目の Create() メソッドは、HTML フォームを投稿する場合にのみ呼び出すことができます。最初の Create() メソッドは、新しい連絡先を作成するための HTML フォームを含むビューを返すだけです。 2 つ目の Create() メソッドはさらに興味深いもので、データベースに新しい連絡先を追加します。

2 番目の Create() メソッドが、Contact クラスのインスタンスを受け入れるように変更されていることにご注目ください。 HTML フォームから投稿されたフォーム値は、ASP.NET MVC フレームワークによってこの Contact クラスに自動的にバインドされます。 HTML Create フォームの各フォームフィールドは、Contact パラメーターのプロパティに割り当てられます。

Contact パラメーターが [Bind] 属性で修飾されていることにご注目ください。 [Bind] 属性は、Contact の Id プロパティをバインドから除外するために使用されます。 Id プロパティは IDENTITY プロパティを表しているため、Id プロパティは設定しません。

Create() メソッドの本体で、Entity Framework を使用して新しい Contact をデータベースに挿入します。新しい連絡先が既存の連絡先セットに追加され、SaveChanges() メソッドが呼び出されて、これらの変更が基になるデータベースにプッシュされます。

新しい連絡先を作成するための HTML フォームを生成するには、2 つの Create() メソッドのいずれかを右クリックし、メニューオプション [ビューの追加] を選びます (図 16 を参照)。

図 16: Create ビューの追加 (クリックするとフルサイズの画像が表示されます)

[ビューの追加] ダイアログで、ContactManager.Models.Contact クラスと、ビューコンテンツに [Create] オプションを選びます (図 17 を参照)。 [追加] ボタンをクリックすると、Create ビューが自動的に生成されます。

図 17: エラーページの表示 (クリックするとフルサイズの画像が表示されます)

Create ビューには、Contact クラスの各プロパティのフォームフィールドが含まれています。 Create ビューのコードは、リスト 5 に含まれています。

リスト 5 - Views\Home\Create.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Create</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Create</h2>

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm()) {%>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="FirstName">FirstName:</label>
                <%= Html.TextBox("FirstName") %>
                <%= Html.ValidationMessage("FirstName", "*") %>
            </p>
            <p>
                <label for="LastName">LastName:</label>
                <%= Html.TextBox("LastName") %>
                <%= Html.ValidationMessage("LastName", "*") %>
            </p>
            <p>
                <label for="Phone">Phone:</label>
                <%= Html.TextBox("Phone") %>
                <%= Html.ValidationMessage("Phone", "*") %>
            </p>
            <p>
                <label for="Email">Email:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email", "*") %>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

Create() メソッドを変更して作成ビューを追加した後、連絡先マネージャーアプリケーションを実行して新しい連絡先を作成できます。 Index ビューに表示される [新規作成] リンクをクリックして、Create ビューに移動します。図 18 のビューが表示されます。

図 18: Create ビュー (クリックするとフルサイズの画像が表示されます)

連絡先を編集する

連絡先レコードを編集するための機能の追加は、新しい連絡先レコードを作成するための機能を追加することとよく似ています。まず、2 つの新しい Edit メソッドを Home コントローラークラスに追加する必要があります。これらの新しい Edit() メソッドは、リスト 6 に含まれています。

リスト 6 - Controllers\HomeController.cs (Edit メソッドを使用)

//
// GET: /Home/Edit/5

public ActionResult Edit(int id)
{
    var contactToEdit = (from c in _entities.ContactSet
                           where c.Id == id
                           select c).FirstOrDefault();

    return View(contactToEdit);
}

//
// POST: /Home/Edit/5

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(Contact contactToEdit)
{
    if (!ModelState.IsValid)
        return View();

    try
    {
        var originalContact = (from c in _entities.ContactSet
                             where c.Id == contactToEdit.Id
                             select c).FirstOrDefault();
        _entities.ApplyPropertyChanges(originalContact.EntityKey.EntitySetName, contactToEdit);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}
}

最初の Edit() メソッドは、HTTP GET 操作によって呼び出されます。 Id パラメーターがこのメソッドに渡されます。これは、編集中の連絡先レコードの Id を表します。 Id に一致する連絡先を取得するために Entity Framework が使用されます。レコードを編集するための HTML フォームを含むビューが返されます。

2 番目の Edit() メソッドは、データベースの実際の更新を実行します。このメソッドは、Contact クラスのインスタンスをパラメーターとして受け入れます。 ASP.NET MVC フレームワークは、フォームフィールドを Edit フォームからこのクラスに自動的にバインドします。連絡先を編集するときに [Bind] 属性を含めないことにご注目ください (Id プロパティの値が必要です)。

Entity Framework は、変更された連絡先をデータベースに保存するために使用されます。最初に、元の連絡先をデータベースから取得する必要があります。次に、Entity Framework ApplyPropertyChanges() メソッドを呼び出して、連絡先への変更を記録します。最後に、Entity Framework SaveChanges() メソッドを呼び出して、基になるデータベースへの変更を保持します。

Edit() メソッドを右クリックし、メニューオプションの [ビューの追加] を選択すると、Edit フォームを含むビューを生成できます。 [ビューの追加] ダイアログで、ContactManager.Models.Contact クラスと、ビューコンテンツに [Edit] オプションを選びます (図 19 を参照)。

図 19: Edit ビューの追加 (クリックするとフルサイズの画像が表示されます)

[追加] ボタンをクリックすると、新しい Edit ビューが自動的に生成されます。生成される HTML フォームには、Contact クラスの各プロパティに対応するフィールドが含まれています (リスト 7 を参照)。

リスト 7 - Views\Home\Edit.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Edit</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Edit</h2>

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm()) {%>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="FirstName">FirstName:</label>
                <%= Html.TextBox("FirstName") %>
                <%= Html.ValidationMessage("FirstName", "*") %>
            </p>
            <p>
                <label for="LastName">LastName:</label>
                <%= Html.TextBox("LastName") %>
                <%= Html.ValidationMessage("LastName", "*") %>
            </p>
            <p>
                <label for="Phone">Phone:</label>
                <%= Html.TextBox("Phone") %>
                <%= Html.ValidationMessage("Phone", "*") %>
            </p>
            <p>
                <label for="Email">Email:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email", "*") %>
            </p>
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

連絡先を削除する

連絡先を削除するには、2 つの Delete() アクションを Home コントローラークラスに追加する必要があります。最初の Delete() アクションでは、削除確認フォームが表示されます。 2 番目の Delete() アクションは、実際の削除を実行します。

Note

今後、イテレーション #7 で、ワンステップの Ajax の削除をサポートするように連絡先マネージャーを変更します。

これらの 2 つの新しい Delete() メソッドは、リスト 8 に含まれています。

リスト 8 - Controllers\HomeController.cs (Delete メソッド)

//
// GET: /Home/Delete/5

public ActionResult Delete(int id)
{
    var contactToDelete = (from c in _entities.ContactSet
                         where c.Id == id
                         select c).FirstOrDefault();

    return View(contactToDelete);
}

//
// POST: /Home/Delete/5

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete(Contact contactToDelete)
{
    try
    {
        var originalContact = (from c in _entities.ContactSet
                               where c.Id == contactToDelete.Id
                               select c).FirstOrDefault();

        _entities.DeleteObject(originalContact);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

最初の Delete() メソッドは、データベースから連絡先レコードを削除するための確認フォームを返します (図 20 を参照)。 2 番目の Delete() メソッドは、データベースに対して実際の削除操作を実行します。元の連絡先がデータベースから取得されると、Entity Framework DeleteObject() メソッドと SaveChanges() メソッドが呼び出され、データベースの削除が実行されます。

図 20: 削除の確認ビュー (クリックするとフルサイズの画像が表示されます)

連絡先レコードを削除するためのリンクが含まれるように Index ビューを変更する必要があります (図 21 を参照)。 Edit リンクを含む同じテーブルセルに次のコードを追加する必要があります。

Html.ActionLink( { id=item.Id }) %>

図 21: Edit リンクを含む Index ビュー (クリックするとフルサイズの画像が表示されます)

次に、削除確認ビューを作成する必要があります。 Home コントローラークラスで Delete() メソッドを右クリックし、メニューオプション [ビューの追加] を選びます。 [ビューの追加] ダイアログが表示されます (図 22 を参照)。

List、Create、Edit ビューの場合とは異なり、[ビューの追加] ダイアログに Delete ビューを作成するオプションはありません。代わりに、ContactManager.Models.Contact データクラスと、ビューコンテンツに [Empty] を選びます。 [Empty] ビューコンテンツオプションを選択すると、自分でビューを作成する必要があります。

図 22: 削除の確認ビューの追加 (クリックするとフルサイズの画像が表示されます)

Delete ビューの内容は、リスト 9 に含まれています。このビューには、特定の連絡先を削除するかどうかを確認するフォームが含まれています (図 21 を参照)。

リスト 9 - Views\Home\Delete.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Delete</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Delete</h2>
    
    <p>
    Are you sure that you want to delete the entry for
    <%= Model.FirstName %> <%= Model.LastName %>?
    </p>

    <% using (Html.BeginForm(new { Id = Model.Id }))
       { %>
       <p> 
            <input type="submit" value="Delete" />
        </p>
    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

既定のコントローラーの名前を変更する

連絡先を操作するためのコントローラークラスの名前が HomeController クラスなのが気になるかもしれません。コントローラーの名前は "ContactController" のほうが良いのではないでしょうか?

この問題は簡単に修正できます。まず、Home コントローラーの名前をリファクターする必要があります。 Visual Studio Code エディターで HomeController クラスを開き、クラスの名前を右クリックし、メニューオプション [リファクター]、[名前の変更] を選びます。このメニューオプションを選択すると、[名前の変更] ダイアログが開きます。

図 23: コントローラー名のリファクター (クリックするとフルサイズの画像が表示されます)

図 24: [名前の変更] ダイアログを使用する (クリックするとフルサイズの画像が表示されます)

コントローラークラスの名前を変更すると、Visual Studio によって Views フォルダー内のフォルダーの名前も更新されます。 Visual Studio では、\Views\Home フォルダーの名前が \Views\Contact フォルダーに変更されます。

この変更を行った後、アプリケーションには Home コントローラーが存在しなくなります。アプリケーションを実行すると、図 25 のエラーページが表示されます。

図 25: 既定のコントローラーが存在しない (クリックするとフルサイズの画像が表示されます)

Home コントローラーではなく Contact コントローラーを使用するには、Global.asax ファイルの既定のルートを更新する必要があります。 Global.asax ファイルを開き、既定のルートで使用される既定のコントローラーを変更します (リスト 10 を参照)。

リスト 10 - Global.asax.cs

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

namespace ContactManager
{
    public class MvcApplication : System.Web.HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Default",                                              // Route name
                "{controller}/{action}/{id}",                           // URL with parameters
                new { controller = "Contact", action = "Index", id = "" }  // Parameter defaults
            );

        }

        protected void Application_Start()
        {
            RegisterRoutes(RouteTable.Routes);
        }
    }
}

これらの変更を行うと、連絡先マネージャーが正しく実行されます。これで、既定のコントローラーとして Contact コントローラークラスが使用されます。

まとめ

この最初のイテレーションでは、可能な限り最速の方法で基本的な連絡先マネージャーアプリケーションを作成しました。 Visual Studio を利用して、コントローラーとビューの初期コードを自動的に生成しました。また、Entity Framework を利用して、データベースモデルクラスを自動的に生成しました。

現在、連絡先マネージャーアプリケーションで連絡先レコードの一覧表示、生成、編集、削除を行うことができます。つまり、データベース駆動型 Web アプリケーションに必要なすべての基本的なデータベース操作を実行できます。

残念ながら、私たちのアプリケーションにはいくつかの問題があります。まず、言い難いことですが、連絡先マネージャーアプリケーションはさほど魅力的なアプリケーションではありません。デザインが必要です。次のイテレーションでは、既定のビューマスターページとカスケードスタイルシートを変更して、アプリケーションの外観を向上させる方法について説明します。

2 つ目に、フォームの検証を実装していません。たとえば、フォームフィールドの値を入力せずに連絡先の Create フォームを送信しようとした場合、それを防止する措置がありません。さらに、無効な電話番号と電子メールアドレスを入力できます。フォーム検証の問題に対処し始めるのは、イテレーション #3 です。

最後に、最も重要な点として、連絡先マネージャーアプリケーションの現在のイテレーションは簡単に変更や維持ができません。たとえば、データベースアクセスロジックはコントローラーアクションに直接組み込まれています。つまり、コントローラーを変更しないと、データアクセスコードを変更できません。後のイテレーションでは、連絡先マネージャーの変更に対する回復性を高めるために実装できるソフトウェア設計パターンについて説明します。

次の方法で共有

繰り返し #1 – アプリケーションを作成する (C#)

連絡先管理の ASP.NET MVC アプリケーションをビルドする (VB)

このイテレーション

ソフトウェアの必要なコンポーネント

ASP.NET MVC プロジェクト

プロジェクトのサンプルファイルを削除する

データベースを作成する

データモデルを作成する

home コントローラーの作成

連絡先の一覧表示

新しい連絡先を作成する

連絡先を編集する

連絡先を削除する

既定のコントローラーの名前を変更する

まとめ

フィードバック

その他のリソース

次の方法で共有

繰り返し #1 – アプリケーションを作成する (C#)

連絡先管理の ASP.NET MVC アプリケーションをビルドする (VB)

このイテレーション

ソフトウェアの必要なコンポーネント

ASP.NET MVC プロジェクト

プロジェクトのサンプル ファイルを削除する

データベースを作成する

データ モデルを作成する

home コントローラーの作成

連絡先の一覧表示

新しい連絡先を作成する

連絡先を編集する

連絡先を削除する

既定のコントローラーの名前を変更する

まとめ

フィードバック

その他のリソース

プロジェクトのサンプルファイルを削除する

データモデルを作成する