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:
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.
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