Dodawanie kolumny do modelu

Autor: Scott Hanselman

Jest to samouczek dla początkujących, który przedstawia podstawy ASP.NET MVC. Utworzysz prostą aplikację internetową, która odczytuje i zapisuje z bazy danych. Odwiedź centrum szkoleniowe ASP.NET MVC , aby znaleźć inne samouczki i przykłady ASP.NET MVC.

W tej sekcji omówimy sposób wprowadzania zmian w schemacie bazy danych i obsługi zmian w naszej aplikacji.

Dodajmy kolumnę "Ocena" do tabeli Movie. Wstecz do środowiska IDE i kliknij Eksploratora baz danych. Kliknij prawym przyciskiem myszy tabelę Film i wybierz polecenie Otwórz definicję tabeli.

Dodaj kolumnę "Ocena", jak pokazano poniżej. Ponieważ nie mamy teraz żadnych ocen, kolumna może zezwalać na wartości null. Kliknij pozycję Zapisz.

Następnie wróć do Eksplorator rozwiązań i otwórz plik Movies.edmx (który znajduje się w folderze \Models). Kliknij prawym przyciskiem myszy powierzchnię projektową (biały obszar) i wybierz pozycję Aktualizuj model z bazy danych.

Spowoduje to uruchomienie "Kreatora aktualizacji". Kliknij kartę Odśwież w nim i kliknij przycisk Zakończ. Następnie nasza klasa modelu Movie zostanie zaktualizowana o nową kolumnę.

Po kliknięciu przycisku Zakończ możesz zobaczyć, że nowa kolumna klasyfikacji została dodana do jednostki filmowej w naszym modelu.

Dodaliśmy kolumnę w modelu bazy danych, ale widoki o tym nie wiedzą.

Aktualizowanie widoków za pomocą zmian modelu

Istnieje kilka sposobów aktualizowania szablonów widoków w celu odzwierciedlenia nowej kolumny Ocena. Ponieważ utworzyliśmy te widoki, generując je za pomocą okna dialogowego Dodawanie widoku, możemy je usunąć i ponownie utworzyć. Jednak zazwyczaj osoby będą już wprowadzać modyfikacje szablonów widoków z początkowej generacji szkieletu i będą chciały ręcznie dodawać lub usuwać pola, tak jak w przypadku pola Identyfikator dla polecenia Utwórz.

Otwórz szablon \Views\Movies\Index.aspx i dodaj <th>Rating</th> do głowy tabeli Movie. Dodałem kopalnię po gatunku. Następnie w tej samej pozycji kolumny, ale w dolnej części dodaj wiersz, aby wyświetlić nową ocenę.

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

Nasz ostateczny szablon Index.aspx będzie wyglądać następująco:

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

Następnie otwórzmy szablon \Views\Movies\Create.aspx i dodajmy etykietę i pole tekstowe dla nowej właściwości Ocena:

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

Nasz ostatni szablon Create.aspx będzie wyglądać następująco, a teraz zmienimy tytuł przeglądarki i dodatkowy <tytuł h2> na podobny do "Utwórz film", gdy jesteśmy tutaj!

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

Uruchom aplikację, a teraz masz nowe pole w bazie danych, które zostało dodane do strony Tworzenie. Dodaj nowy film — tym razem z pozycją Ocena — i kliknij przycisk Utwórz.

Po kliknięciu przycisku Utwórz zostanie wysłana do strony Indeks, na której znajduje się nowy film z nową kolumną klasyfikacji w bazie danych

W tym podstawowym samouczku rozpoczęto tworzenie kontrolerów, kojarzenie ich z widokami i przekazywaniem danych zakodowanych w kodzie. Następnie utworzyliśmy i zaprojektowaliśmy bazę danych i umieściliśmy w niej pewne dane. Pobraliśmy dane z bazy danych i wyświetliliśmy je w tabeli HTML. Następnie dodaliśmy formularz Utwórz, który umożliwia użytkownikowi dodawanie danych do bazy danych z poziomu aplikacji internetowej. Dodaliśmy walidację, a następnie wykonaliśmy walidację przy użyciu języka JavaScript po stronie klienta. Na koniec zmieniliśmy bazę danych tak, aby zawierała nową kolumnę danych, a następnie zaktualizowaliśmy dwie strony, aby utworzyć i wyświetlić te nowe dane.

Zachęcam teraz do przejścia do naszego samouczka pośredniego "MVC Music Store", a także wielu filmów i zasobów na stronie https://asp.net/mvc , aby dowiedzieć się jeszcze więcej o ASP.NET MVC!

Owocnej pracy.

• Scott Hanselman - http://hanselman.com i @shanselman na Twitterze.

Poprzednie