Hinzufügen der Spalte zum Modell

von Scott Hanselman

Dies ist ein Anfängertutorial, in dem die Grundlagen der ASP.NET MVC vorgestellt werden. Sie erstellen eine einfache Webanwendung, die Lese- und Schreibvorgänge aus einer Datenbank ermöglicht. Besuchen Sie das ASP.NET MVC Learning Center , um weitere ASP.NET MVC-Tutorials und -Beispiele zu finden.

In diesem Abschnitt erfahren Sie, wie wir Änderungen am Schema unserer Datenbank vornehmen und die Änderungen in unserer Anwendung behandeln können.

Fügen Wir der Movie-Tabelle eine Spalte "Bewertung" hinzu. Zurück zur IDE, und klicken Sie auf die Explorer Datenbank. Klicken Sie mit der rechten Maustaste auf die Tabelle Movie, und wählen Sie Tabellendefinition öffnen aus.

Fügen Sie wie unten dargestellt eine Spalte "Rating" hinzu. Da wir jetzt keine Bewertungen haben, kann die Spalte NULL-Werte zulassen. Klicken Sie auf Speichern.

Kehren Sie als Nächstes zum Projektmappen-Explorer zurück, und öffnen Sie die Datei Movies.edmx (die sich im Ordner \Models befindet). Klicken Sie mit der rechten Maustaste auf die Entwurfsoberfläche (den weißen Bereich), und wählen Sie Modell aus Datenbank aktualisieren aus.

Dadurch wird der "Update-Assistent" gestartet. Klicken Sie darin auf die Registerkarte Aktualisieren, und klicken Sie auf Fertig stellen. Unsere Movie-Modellklasse wird dann mit der neuen Spalte aktualisiert.

Nachdem Sie auf Fertig stellen geklickt haben, sehen Sie, dass die neue Bewertungsspalte der Movie-Entität in unserem Modell hinzugefügt wurde.

Wir haben eine Spalte im Datenbankmodell hinzugefügt, aber die Ansichten wissen nichts davon.

Aktualisieren von Ansichten mit Modelländerungen

Es gibt einige Möglichkeiten, wie wir unsere Ansichtsvorlagen aktualisieren können, um die neue Spalte Bewertung widerzuspiegeln. Da wir diese Ansichten erstellt haben, indem wir sie über das Dialogfeld Ansicht hinzufügen generieren, konnten wir sie löschen und erneut erstellen. In der Regel haben die Benutzer jedoch bereits Änderungen an ihren Ansichtsvorlagen von der ersten Gerüstgeneration vorgenommen und möchten Felder manuell hinzufügen oder löschen, genau wie wir es mit dem ID-Feld für Erstellen getan haben.

Öffnen Sie die Vorlage \Views\Movies\Index.aspx, und fügen Sie dem Kopf der Movie-Tabelle eine <>Bewertung</th> hinzu. Ich habe meine nach Genre hinzugefügt. Fügen Sie dann an derselben Spaltenposition, aber unten unten eine Zeile hinzu, um unsere neue Bewertung auszugeben.

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

Unsere endgültige Index.aspx-Vorlage sieht wie folgt aus:

<%@ 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>

Öffnen Sie dann die Vorlage \Views\Movies\Create.aspx, und fügen Sie eine Bezeichnung und ein Textfeld für unsere neue Rating-Eigenschaft hinzu:

<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>

Unsere endgültige Create.aspx-Vorlage sieht wie folgt aus, und ändern wir den Titel und den sekundären <h2-Titel> unseres Browsers in etwa in "Film erstellen", während wir hier sind!

<%@ 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>

Führen Sie Ihre App aus, und jetzt haben Sie ein neues Feld in der Datenbank, das der Seite Erstellen hinzugefügt wurde. Fügen Sie einen neuen Film hinzu , diesmal mit einer Bewertung, und klicken Sie auf Erstellen.

Nachdem Sie auf Erstellen geklickt haben, werden Sie zur Seite Index weitergeleitet, auf der Ihr neuer Film mit der neuen Bewertungsspalte in der Datenbank aufgeführt wird.

In diesem grundlegenden Tutorial haben Sie begonnen, Controller zu erstellen, sie Ansichten zuzuordnen und hartcodierte Daten zu übergeben. Anschließend haben wir eine Datenbank erstellt und entworfen und einige Daten eingefügt. Wir haben die Daten aus der Datenbank abgerufen und in einer HTML-Tabelle angezeigt. Anschließend haben wir ein Formular Erstellen hinzugefügt, mit dem der Benutzer daten aus der Webanwendung zur Datenbank selbst hinzufügen kann. Wir haben die Validierung hinzugefügt und dann auf clientseitiger Seite JavaScript verwendet. Schließlich haben wir die Datenbank so geändert, dass sie eine neue Datenspalte enthält, und dann unsere beiden Seiten aktualisiert, um diese neuen Daten zu erstellen und anzuzeigen.

Ich ermutige Sie jetzt, mit unserem Tutorial "MVC Music Store" auf mittlerer Ebene sowie den vielen Videos und Ressourcen unter https://asp.net/mvc fortzufahren, um noch mehr über ASP.NET MVC zu erfahren!

Viel Erfolg!

• Scott Hanselman - http://hanselman.com und @shanselman auf Twitter.

Zurück