Aggiunta di una colonna al modello

di Scott Hanselman

Questa è un'esercitazione principiante che introduce le nozioni di base di ASP.NET MVC. Si creerà un'applicazione Web semplice che legge e scrive da un database. Visitare il centro di apprendimento MVC ASP.NET per trovare altre esercitazioni e esempi di MVC ASP.NET.

In questa sezione verrà illustrato come apportare modifiche allo schema del database e gestire le modifiche all'interno dell'applicazione.

Aggiungiamo una colonna "Rating" alla tabella Movie. Indietro all'IDE e fare clic su Esplora database. Fare clic con il pulsante destro del mouse sulla tabella Film e scegliere Apri definizione tabella.

Aggiungere una colonna "Rating" come illustrato di seguito. Poiché non sono disponibili valutazioni, la colonna può consentire valori Null. Fare clic su Salva.

Tornare quindi al Esplora soluzioni e aprire il file Movies.edmx (che si trova nella cartella \Models). Fare clic con il pulsante destro del mouse sull'area di progettazione (area bianca) e scegliere Aggiorna modello dal database.

Verrà avviata la "Procedura guidata aggiornamento". Fare clic sulla scheda Aggiorna all'interno e fare clic su Fine. La classe del modello Movie verrà quindi aggiornata con la nuova colonna.

Dopo aver fatto clic su Fine, è possibile visualizzare la nuova colonna Classificazione aggiunta all'entità movie nel modello.

È stata aggiunta una colonna nel modello di database, ma le visualizzazioni non lo sanno.

Aggiornare le visualizzazioni con le modifiche del modello

Esistono alcuni modi in cui è possibile aggiornare i modelli di visualizzazione per riflettere la nuova colonna Classificazione. Poiché sono state create queste visualizzazioni generandole tramite la finestra di dialogo Aggiungi visualizzazione, è possibile eliminarle e ricrearle di nuovo. Tuttavia, in genere le persone avranno già apportato modifiche ai modelli di visualizzazione dalla generazione iniziale di scaffolded e vogliono aggiungere o eliminare i campi manualmente, proprio come abbiamo fatto con il campo ID per Crea.

Aprire il modello \Views\Movies\Index.aspx e aggiungere un <th>Rating</th> alla testa della tabella Movie. Ho aggiunto la mia dopo Genere. Quindi, nella stessa posizione di colonna, ma in basso, aggiungere una riga per restituire il nuovo rating.

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

Il modello index.aspx finale sarà simile al seguente:

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

Apriamo quindi il modello \Views\Movies\Create.aspx e aggiungiamo un'etichetta e una casella di testo per la nuova proprietà 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>

Il modello create.aspx finale avrà un aspetto simile al seguente e verrà modificato il titolo del browser e il titolo secondario <h2> in un modo simile a "Crea un film" mentre siamo qui!

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

Eseguire l'app e ora si dispone di un nuovo campo nel database aggiunto alla pagina Crea. Aggiungere un nuovo filmato: questa volta con una classificazione e fare clic su Crea.

Dopo aver fatto clic su Crea, si viene inviati alla pagina Indice in cui è elencato il nuovo filmato con la nuova colonna Classificazione nel database

Questa esercitazione di base ha iniziato a creare controller, associandoli a Visualizzazioni e passando i dati hardcoded. Quindi è stato creato e progettato un database e è stato inserito alcuni dati. Sono stati recuperati i dati dal database e visualizzati in una tabella HTML. È stato quindi aggiunto un modulo Create che consente all'utente di aggiungere dati al database stesso dall'interno dell'applicazione Web. È stata aggiunta la convalida, quindi è stata eseguita l'uso di JavaScript sul lato client. Infine, è stato modificato il database in modo da includere una nuova colonna di dati, quindi aggiornare le due pagine per creare e visualizzare questi nuovi dati.

Ora ti consigliamo di passare alla nostra esercitazione di livello intermedio "MVC Music Store" e le numerose risorse e video in https://asp.net/mvc per altre informazioni su ASP.NET MVC!

Buon lavoro.

• Scott Hanselman - http://hanselman.com e @shanselman su Twitter.

Indietro