HTML helpers: métodos Editor y EditorFor

En el concepto anterior vimos una serie de métodos que permiten generar controles de formulario HTML.

Dentro de esa lista hay dos muy especiales:

Editor
EditorFor

Estos métodos generan controles de formulario HTML dependiendo del tipo de dato del modelo:

string	 <input type="text">
int      <input type="number">
float	 <input type="text">
bool	 <input type="checkbox">
DateTime <input type="datetime">

Podemos repasar el Concepto 8 donde utilizamos las plantillas de vistas que genera automáticamente el Visual Studio .net y comprobar que emplea el método EditorFor para generar los formulario HTML.

Problema (Proyecto12)

Declarar un modelo que represente una persona:

Persona.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Proyecto12.Models
{
    public class Persona
    {
        public int Codigo { get; set; }
        public string Nombre { get; set; }
        public float Peso { get; set; }
        public bool Trabaja { get; set; }
        public DateTime FechaNacimiento { get; set; }
    }
}

Para hacer corto el problema y poder concentrarnos en la "Vista" evitaremos trabajar con una base de datos, almacenaremos los datos en memoria en una lista:

MantenimientoPersona.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Proyecto12.Models
{
    public class MantenimientoPersona
    {
        List<Persona> ListaPersonas = new List<Persona>()
        {
            new Persona() { Codigo = 1,
                            Nombre = "Juan",
                            Peso = 67.3f,
                            Trabaja = false,
                            FechaNacimiento = new DateTime(1970,12,25) },
            new Persona() { Codigo = 2,
                            Nombre = "Ana",
                            Peso = 55.7f,
                            Trabaja = true,
                            FechaNacimiento = new DateTime(1983,2,18) },
            new Persona() { Codigo = 3,
                            Nombre = "Pedro",
                            Peso = 92.5f,
                            Trabaja = true,
                            FechaNacimiento = new DateTime(1993,5,1) }
        };

        public Persona Retornar(int cod)
        {
            foreach (var per in ListaPersonas)
                if (per.Codigo == cod)
                    return per;
            return null;
        }

    }
}

Es decir la variable ListaPersonas almacena tres objetos de la clase Persona. Se inician sus datos y el método Retornar nos devuelve la persona que coincide con el parámetro cod, en caso de no existir retorna un null.

En el "Controlador" creamos el archivo "HomeController" y definimos dos acciones:

HomeController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Proyecto12.Models;

namespace Proyecto12.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(FormCollection coleccion)
        {
            MantenimientoPersona m = new MantenimientoPersona();
            Persona per = m.Retornar(int.Parse(coleccion["Codigo"].ToString()));
            if (per != null)
                return View("EditarPersona", per);
            else
                return RedirectToAction("Index");
        }

    }
}

La vista para la acción Index() es:

Index.cshtml


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        @using (Html.BeginForm())
        {
            <p>
                Ingrese el código de la persona a buscar:
                @Html.TextBox("Codigo")
            </p>
            <p>
                <input type="submit" value="Buscar" />
            </p>
        }
    </div>
</body>
</html>

Cuando se presiona el botón buscar se ejecuta la acción Index(FormCollection coleccion) del controlador:

        [HttpPost]
        public ActionResult Index(FormCollection coleccion)
        {
            MantenimientoPersona m = new MantenimientoPersona();
            Persona per = m.Retornar(int.Parse(coleccion["Codigo"].ToString()));
            if (per != null)
                return View("EditarPersona", per);
            else
                return RedirectToAction("Index");
        }

En el caso que exista el código de persona se carga la vista "EditarPersona" y se le pasa la variable per.

La vista "EditarPersona" es donde utilizamos el método "EditorFor".

EditarPersona.cshtml

@model  Proyecto12.Models.Persona

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>EditarPersona</title>
</head>
<body>
    <div> 
        @using (Html.BeginForm())
        {
            <p>
                Código:
                @Html.EditorFor(model => model.Codigo)
            </p>
            <p>
                Nombre:
                @Html.EditorFor(model => model.Nombre)
            </p>
            <p>
                Peso:
                @Html.EditorFor(model => model.Peso)
            </p>
            <p>
                Trabaja?:
                @Html.EditorFor(model => model.Trabaja)
            </p>
            <p>
                Fecha de nacimiento:
                @Html.EditorFor(model => model.FechaNacimiento)
            </p>
            <p>
                <input type="submit" value="Confirmar" />
            </p>
        }
    </div>
</body>
</html>

Como podemos ver llamamos al método EditrFor varias veces y se generan controles HTML diferentes según el tipo de datos del modelo:

Este proyecto lo puede descargar en un zip desde este enlace: proyecto12.zip

Retornar

12 - HTML helpers: métodos Editor y EditorFor

Problema (Proyecto12)