MVC IV: Formulario de alta

Ahora que ya hemos visto los helpers y como recibir datos, vamos a hacer un formulario de Alta de Libros. Enviaremos los datos con un helper de Razor. Para ello vamos a hacer un ViewModel de Libro, junto con el Controller y la View de AltaEnvio.

Antes de empezar, comentar que todos los artículos del tutorial aparecerán aquí

ViewModel

El ViewModel estará en el directorio de Models y yo lo llamare Libro(recordad que es una clase normal). Tendrá los campos de Id, NumeroSaga, Nombre, Descripcion y Fecha.

public class Libro
{
    public int Id { get; set; }
    public int NumeroSaga { get; set; } // Esto es por si pertenece a una saga de libros.
    public string Nombre { get; set; }
    public string Descripcion { get; set; }
    public DateTime Fecha { get; set; }
}

Controller

Crearemos un controller de libros (si no lo tenemos) con una función de AltaLibro -sin parámetros- y otra de AltaLibro -con un parámetro, el ViewModel de Libro-. Nos quedará así:

public ActionResult AltaLibros()
{
    return View(new Libro());
}

[HttpPost]
public ActionResult AltaLibros(Libro lib)
{
    lib.Nombre += " test"; // esto es para que veais que se modifica, si no parece que no haga nada...
    return View(lib); // aquí pondremos un BreakPoint para ver lo que obtiene.
}

He puesto que las 2 devuelvan la vista para ver en el formulario que se modifica. Por defecto, las funciones del controller son para peticiones de tipo Get y si tenemos 2 funciones con el mismo nombre, no sabe a por cual ir (no funciona la sobrecarga …). Lo que podemos hacer es enviar la petición por POST, por eso la segunda función tiene la cabecera de [HttpPost].

View

En la View es donde tendremos el formulario. Podremos todos los parámetros del ViewModel con los Helpers de Razor (La View estará en Views/Libros/AltaLibros.cshtml):

@model Libreria.Models.Libro //le decimos el ViewModel

<h2>AltaLibros< /h2>

@using (Html.BeginForm("AltaLibros", "Libros", FormMethod.Post)) //etiqueta form que va al controller de libros, la función de AltaLibro y con el metodo POST
{
    <label>Numero Saga< /label>@Html.TextBoxFor(m => m.NumeroSaga) <br />
    <label>Nombre< /label>@Html.TextBoxFor(m => m.Nombre)<br />
    <label>Descripcion< /label>@Html.TextBoxFor(m => m.Descripcion)<br />
    <label>Fecha< /label>@Html.TextBoxFor(m => m.Fecha)<br />
    <button type="submit" >Alta</button>

}

Si ejecutamos, parecerá que no hay cambios, pero esta funcionando bien. Si os habéis fijado en el BreakPoint, el objeto lib tiene los parámetros que le hemos puesto, pero para verlo mejor, vamos a modificar la vista para que cargue los datos.

@using (Html.BeginForm("AltaLibros", "Libros", FormMethod.Post)) //etiqueta form que va al controller de libros, la función de AltaLibro y con el método POST
{
    <label>Numero Saga</label>@Html.TextBoxFor(m => m.NumeroSaga) <br />
    <label>Nombre</label>@Html.TextBoxFor(m => m.Nombre, new {Value = Model.Nombre })<br />
    <label>Descripcion</label>@Html.TextBoxFor(m => m.Descripcion)<br />
    <label>Fecha</label>@Html.TextBoxFor(m => m.Fecha)<br />
    <button type="submit" >Alta</button>
 
}

Solo he puesto el nombre, hay que ponérselo como atributo y decirle que el atributo Value equivale a este campo. Ahora si ejecutamos y añadimos el libro, veremos como nos muestra el nombre más «test» ( se lo hemos puesto en la función).

Aquí hay un problema y es que refresca la página, no es asíncrono. Podemos utilizar @Ajax.BeginFom que tiene un funcionamiento parecido pero con una petición de Ajax, o redireccionarlo a alguna gestión o alguna otra parte… Para el @Ajax lo pondremos así:

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
    <label>Numero Saga</label>@Html.TextBoxFor(m => m.NumeroSaga) <br />
    <label>Nombre</label>@Html.TextBoxFor(m => m.Nombre, new { Value = Model.Nombre })<br />
    <label>Descripcion</label>@Html.TextBoxFor(m => m.Descripcion)<br />
    <label>Fecha</label>@Html.TextBoxFor(m => m.Fecha)<br />
    <button type="submit" >Alta</button>
}

Podemos editar la llamada de Ajax que hace para que vaya a una dirección en concreto (con js).

Con esto tendríamos un funcionamiento sencillo de un formulario con razor y MVC. EN el siguiente veremos Entity Framework y Code first.