Agregar una columna al modelo

por Scott Hanselman

En este tutorial para principiantes se presentan los conceptos básicos de ASP.NET MVC. Creará una aplicación web sencilla que lea y escriba en una base de datos. Visite el centro de aprendizaje de ASP.NET MVC para encontrar otros tutoriales y ejemplos de ASP.NET MVC.

En esta sección veremos cómo podemos realizar cambios en el esquema de nuestra base de datos y controlar los cambios dentro de nuestra aplicación.

Vamos a agregar una columna de "Rating" a la tabla Movie. Vuelva al IDE y haga clic en el Explorador de bases de datos. Haga clic con el botón derecho en la tabla Movie y seleccione Abrir definición de tabla.

Agregue una columna "Rating" como se ve a continuación. Puesto que no tenemos ninguna clasificación ahora, la columna puede permitir valores NULL. Haga clic en Save(Guardar).

A continuación, vuelva al Explorador de soluciones y abra el archivo Movies.edmx (que se encuentra en la carpeta \Models). Haga clic con el botón derecho en la superficie de diseño (el área blanca) y seleccione Actualizar modelo en base de datos.

Se iniciará el "Asistente para actualizaciones". Haga clic en la pestaña Actualizar dentro del mismo y haga clic en Finalizar. Nuestra clase de modelo Movie se actualizará con la nueva columna.

Después de hacer clic en Finalizar, puede ver que la nueva columna Rating se ha agregado a la entidad Movie en nuestro modelo.

Hemos agregado una columna en el modelo de base de datos, pero las vistas no lo saben.

Actualizar vistas con cambios de modelo

Hay varias formas de actualizar nuestras plantillas de vistas para que reflejen la nueva columna Rating. Puesto que creamos estas vistas mediante la generación mediante el cuadro de diálogo Agregar vista, podríamos eliminarlas y volver a crearlas. Sin embargo, normalmente la gente ya habrá hecho modificaciones en sus plantillas de vista desde la generación inicial de scaffolding y querrá agregar o eliminar campos manualmente, como hicimos con el campo ID para Create.

Abra la plantilla \Views\Movies\Index.aspx y agregue una <th>clasificación</th> al encabezado de la tabla Movie. Yo agregué la mía después de Genre. Después, en la misma posición de columna pero más abajo, agregue una línea para que aparezca nuestra nueva Clasificación.

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

Nuestra plantilla de Index.aspx final tendrá este aspecto:

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

Abramos después la plantilla \Views\Movies\Create.aspx y agreguemos una etiqueta y un cuadro de texto para nuestra nueva propiedad 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>

Nuestra plantilla Create.aspx final tendrá este aspecto. Vamos a cambiar el título del explorador y el título de <h2> secundario a algo como "Crear una película" mientras estamos aquí.

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

Ejecute la aplicación y ahora tiene un nuevo campo en la base de datos que se ha agregado a la página Crear. Agregue una nueva película (esta vez con una clasificación) y haga clic en Crear.

Después de hacer clic en Crear, se le enviará a la página Index, donde su nueva película aparece en una lista con la nueva columna Rating en la base de datos.

Este tutorial básico le permitirá empezar a crear controladores, asociarlos a vistas y pasar datos codificados de forma rígida. Después creamos y diseñamos una base de datos e introdujimos algunos datos en ella. Recuperamos los datos de la base de datos y los mostramos en una tabla HTML. A continuación, hemos agregado un formulario Create que permite al usuario agregar datos a la base de datos desde dentro de la aplicación web. Se ha agregado validación y, a continuación, se ha realizado el uso de JavaScript en el lado cliente. Por último, hemos cambiado la base de datos para incluir una nueva columna de datos y, a continuación, hemos actualizado nuestras dos páginas para crear y mostrar estos nuevos datos.

Ahora le animamos a pasar a nuestro tutorial de nivel intermedio "Tienda de música MVC" así como los muchos vídeos y recursos en https://asp.net/mvc para aprender aún más sobre ASP.NET MVC.

Disfrútelo.

• Scott Hanselman - http://hanselman.com y @shanselman en Twitter.

Anterior