Agregar un método Create y una vista Create

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 vamos a implementar el soporte necesario para habilitar a los usuarios a crear nuevas películas en nuestra base de datos. Para ello, implementaremos la acción de URL /Movies/Create.

La implementación de la URL /Movies/Create es un proceso de dos pasos. Cuando un usuario visita por primera vez la URL /Movies/Create queremos mostrarle un formulario HTML que pueda rellenar para introducir una nueva película. Después, cuando el usuario envía el formulario y vuelve a publicar los datos en el servidor, queremos recuperar el contenido publicado y guardarlo en nuestra base de datos.

Implementaremos estos dos pasos dentro de dos métodos Create() dentro de nuestra clase MoviesController. Un método mostrará el <formulario> que el usuario debe rellenar para crear una nueva película. El segundo método controlará el procesamiento de los datos publicados cuando el usuario vuelva a enviar el <formulario> al servidor, y guardará una nueva Película dentro de nuestra base de datos.

A continuación se muestra el código que agregaremos a nuestra clase MoviesController para implementar esto:

public ActionResult Create()
{
    return View();
}

[HttpPost]
public ActionResult Create(Movie newMovie)
{

    if (ModelState.IsValid)
    {
        db.AddToMovies(newMovie);
        db.SaveChanges();

        return RedirectToAction("Index");
    }
    else
    {
        return View(newMovie);
    }
}

El código anterior contiene todo el código que necesitaremos dentro de nuestro controlador.

Implementemos ahora la plantilla Crear vista que usaremos para mostrar un formulario al usuario. Haremos clic con el botón derecho en el primer método Create y seleccionaremos "Add View" para crear la plantilla de vista para nuestro formulario Movie.

Seleccionaremos que vamos a pasar a la plantilla de vista una "Película" como su clase de datos de vista, e indicaremos que queremos hacer "scaffolding" de una plantilla "Crear".

Tras hacer clic en el botón Agregar, se creará la plantilla de vista \Movies\Create.aspx. Como seleccionamos "Crear" en la lista desplegable "contenido de vista", el cuadro de diálogo Añadir vista nos "agregó" automáticamente algunos contenidos predeterminados. El scaffolding creó un <formulario> HTML, un lugar para que vayan los mensajes de error de validación, y como el scaffolding conoce las películas, creó etiquetas y campos para cada propiedad de nuestra clase.

<% using (Html.BeginForm()) {%>
    <%: Html.ValidationSummary(true) %>

    <fieldset>
        <legend>Fields</legend>
       
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Id) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Id) %>
            <%: Html.ValidationMessageFor(model => model.Id) %>
        </div>
       
        <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.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>

<% } %>

Dado que nuestra base de datos asigna automáticamente un id. a una película, eliminemos los campos que hacen referencia a model.Id de nuestra vista Create. Elimine las 7 líneas después de <legend>Fields</legend> ya que muestran el campo ID que no queremos.

Creemos ahora una nueva película y agreguémosla a la base de datos. Para ello, ejecutaremos de nuevo la aplicación y visitaremos la URL "/Movies" y haremos clic en el vínculo "Crear" para agregar una nueva Película.

Cuando hagamos clic en el botón Crear, estaremos volviendo a publicar (mediante HTTP POST) los datos de este formulario en el método /Movies/Create que acabamos de crear. Al igual que cuando el sistema tomó automáticamente los parámetros "numTimes" y "name " de la URL y los asignó a parámetros de un método anterior, el sistema tomará automáticamente los campos de formulario de un POST y los asignará a un objeto. En este caso, los valores de campos en HTML como "ReleaseDate" y "Title" se pondrán automáticamente en las propiedades correctas de una nueva instancia de una Película.

Veamos de nuevo el segundo método Create de nuestro MoviesController. Observe cómo toma un objeto "Movie" como argumento:

[HttpPost]
public ActionResult Create(Movie newMovie)
{
    if (ModelState.IsValid)
    {
        db.AddToMovies(newMovie);
        db.SaveChanges();

        return RedirectToAction("Index");
    }
    else
    {
        return View(newMovie);
    }
}

Este objeto Movie se pasó después a la versión [HttpPost] de nuestro método de acción Create, y lo guardamos en la base de datos para después redirigir al usuario de vuelta al método de acción Index(), que mostrará el resultado guardado en la lista de películas:

Sin embargo, no estamos comprobando si nuestras películas son correctas y la base de datos no nos permite guardar una película sin Título. Estaría bien poder decírselo al usuario antes de que la base de datos arroje un error. Para ello, agregaremos compatibilidad de validación a nuestra aplicación.

AnteriorSiguiente