モデルに列を追加する

2024-04-27

これは、ASP.NET MVC の基本について紹介する、初心者向けチュートリアルです。データベースから読み取りと書き込みを行う単純な Web アプリを作成します。 ASP.NET MVC の他のチュートリアルとサンプルについては、ASP.NET MVC ラーニングセンターにアクセスしてください。

このセクションでは、データベースのスキーマに変更を加え、アプリケーション内の変更を処理する方法について説明します。

Movie テーブルに [評価] 列を追加しましょう。 IDE に戻り、データベースエクスプローラーをクリックします。 Movie テーブルを右クリックし、[テーブル定義を開く] を選択します。

以下に示すように、[評価] 列を追加します。現在、評価がないため、列で null を許可できます。 [保存] をクリックします。

次に、ソリューションエクスプローラーに戻り、(\Models フォルダー内にある) Movies.edmx ファイルを開きます。デザインサーフェイス (白い領域) を右クリックし、[データベースからモデルの更新] を選択します。

これにより、"更新ウィザード" が起動します。更新ウィザードの [更新] タブをクリックし、[完了] をクリックします。その後、Movie モデルクラスが新しい列で更新されます。

Update Wizard (2)

[完了] をクリックすると、モデルの Movie エンティティに新しい評価列が追加されていることが確認できます。

データベースモデルに列が追加されましたが、ビューはその情報を認識していません。

モデルの変更によるビューの更新

新しい [評価] 列を反映するようにビューテンプレートを更新する方法はいくつかあります。これらのビューは [ビューの追加] ダイアログで生成して作成したので、それらを削除して再作成できます。ただし、通常、ユーザーは、最初のスキャフォールディングされた生成から既にビューテンプレートに変更を加えていて、Create の ID フィールドと同様に、手動でフィールドを追加または削除したいと考えるかと思います。

\Views\Movies\Index.aspx テンプレートを開き、Movie テーブルの先頭に <th>Rating</th> を追加します。ジャンルの後に mine を追加しました。次に、同じ列の位置で下の方に、新しい評価を出力する行を追加します。

<td>
  <%: item.Rating %>
</td>

最終的な Index.aspx テンプレートは次のようになります。

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

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Movie List
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>My Movie List</h2>
    <table>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>ReleaseDate</th>
            <th>Genre</th>
            <th>Rating</th>
            <th>Price</th>
        </tr>
        <% foreach (var item in Model)
           { %>
        <tr>
            <td><%: item.Id %></td>
            <td><%: item.Title %></td>
            <td><%: String.Format("{0:g}", item.ReleaseDate) %></td>
            <td><%: item.Genre %></td>
            <td><%: item.Rating %></td>
            <td><%: String.Format("{0:F}", item.Price) %></td>
        </tr>
        <% } %>
    </table>
    <p>
        <%: Html.ActionLink("Create New", "Create") %>
    </p>
</asp:Content>

次に、\Views\Movies\Create.aspx テンプレートを開き、新しい Rating プロパティのラベルとテキストボックスを追加しましょう。

<div class="editor-label">
    <%: Html.LabelFor(model => model.Rating) %>
</div>
<div class="editor-field">
    <%: Html.TextBoxFor(model => model.Rating)%>
    <%: Html.ValidationMessageFor(model => model.Rating)%>
</div>

最終的な Create.aspx テンプレートは次のようになります。ここでは、ブラウザーのタイトルとセカンダリ <h2> タイトルを「ムービーの作成」のように変更しましょう。

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

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Create a Movie
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
    <h2>Create a Movie</h2>
    <% Html.EnableClientValidation(); %>
    <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary(true) %>

        <fieldset>
            <legend>Fields</legend>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Title) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Title) %>
                <%: Html.ValidationMessageFor(model => model.Title) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.ReleaseDate) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.ReleaseDate) %>
                <%: Html.ValidationMessageFor(model => model.ReleaseDate) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Genre) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Genre) %>
                <%: Html.ValidationMessageFor(model => model.Genre) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Rating) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Rating)%>
                <%: Html.ValidationMessageFor(model => model.Rating)%>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Price) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Price) %>
                <%: Html.ValidationMessageFor(model => model.Price) %>
            </div>
           
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

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

</asp:Content>

アプリを実行すると、[作成] ページに追加された新しいフィールドがデータベースに追加されます。新しいムービー (今回は評価付き) を追加し、[作成] をクリックします。

[作成] をクリックすると、[インデックス] ページに移動し、新しいムービーが新しい評価列と共にデータベースに一覧表示されます

この基本的なチュートリアルでは、コントローラーを作成し、それらをビューに関連付け、ハードコーディングされたデータの受け渡しを開始しました。次に、データベースを作成して設計し、データを格納しました。データベースからデータを取得し、HTML テーブルに表示しました。次に、ユーザーが Web アプリケーション内からデータベース自体にデータを追加できるように、作成フォームを追加しました。検証を追加し、クライアント側で JavaScript を使用して検証を行いました。最後に、新しい列のデータを含むようにデータベースを変更し、この新しいデータを作成して表示するように 2 つのページを更新しました。

中級レベルのチュートリアル「MVC ミュージックストア」に進むだけでなく、多くのビデオやリソースがある https://asp.net/mvc に進んで、MVC ASP.NET の詳細について理解を深めることをお勧めします。

お楽しみに!

Scott Hanselman - http://hanselman.com、twitter では @shanselman。

次の方法で共有

モデルに列を追加する

モデルの変更によるビューの更新

フィードバック

その他のリソース