Escrito por: TiraCodigo
Etiquetas: asp.net, MVC, Tutorial, Helpers
En esta parte del tutorial veremos que son los helpers de html en Asp.net MVC y como se usan, para definirlos de forma rápida y sencilla son funciones las cuales nos regresan una cadena, es decir un string con las cuales nos podemos ayudar para crear controles en nuestra vista de forma sencilla, por ejemplo, hay helpers que nos ayudan a crear los inputs, combos, radio botones, etc, a continuación una lista con los helpers de html mas usados que ya vienen incluidos con el framework:
Html.Beginform
Html.EndForm
Html.ActionLink
Html.Hidden
Html.Label
Html.Password
Html.CheckBox
Html.RadioButton
Html.ListBox
Html.DropDownLis
t Html.TextArea
Html.TextBox
Aquí la forma de usarlos en la vista:
@Html.Label("Nombre")
@Html.TextBox("txtNombre")
Se renderiza en el navegador:
y el código html:
<label for="Nombre">Nombre</label>
<input id="txtNombre" name="txtNombre" type="text" value="">
La lista anterior solo te ayuda a crear el elemento como tal, es decir, no se enlaza con una propiedad del modelo, y por lo tanto no se realiza una validación del mismo, si lo que queremos es que esto se realice, utilizaremos los siguientes (los reconoceremos fácilmente por que generalmente terminan con un For)
Html.HiddenFor
Html.LabelFor
Html.PasswordFor
Html.CheckBoxFor
Html.RadioButtonFor
Html.DropDownListFor
Html.ListBoxFor
Html.TextBoxFor
Html.TextAreaFor
A continuación vemos la forma de utilizarlos en la vista
@Html.LabelFor(m=>m.Nombre) @Html.TextBoxFor(m => m.Nombre)
Se renderiza en el navegador:
y en el código html:
<label for="Nombre">Nombre</label>
<input id="Nombre" name="Nombre" type="text" value="">
Para ejemplificarlo y comprenderlo de una mejor manera como funcionan los helpers, realicemos un proyecto de ejemplo donde probemos este segundo grupo de helpers, donde crearemos un formulario el cual utilizara un modelo, y nos ayudaremos con los helpers de html para realizar mas fácilmente esta tarea
Primeramente necesitamos crear un modelo, al cual le pondremos “Persona”, y que tendrá las siguientes propiedades:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace HelpersMVC.Models
{
public class Persona
{
public string Nombre { get; set; }
public string Apellidos { get; set; }
public string Sexo { get; set; }
public string Edad { get; set; }
public bool Vive { get; set; }
}
}
Ahora creamos el controller en el cual tendremos 2 acciones, las cuales llamaremos index, una es la que realizara la primera petición para mostrar por primera vez la vista, y la segunda que es donde recibiremos el objeto con los datos que fueron llenados por el usuario, nos quedaría una clase similar a la siguiente:
using System.Web;
using System.Web.Mvc;
using HelpersMVC.Models;
namespace HelpersMVC.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(Persona p)
{
return View(p);
}
}
}
Una vez teniendo el modelo anterior, en la vista crearemos, tanto el formulario como los controles mediante helpers, mismos que estarán ligados al modelo, lo cual realizaremos de la siguiente forma:
@model HelpersMVC.Models.Persona // <- Modelo que utiliza la vista
@{
ViewBag.Title = "Home Page";
var lstValores = new List<SelectListItem>();
for (int i=0;i<100;i++)
{
lstValores.Add(new SelectListItem() { Value = i.ToString(), Text = i.ToString() });
}
}
<div class="jumbotron">
<h1>Datos de ejemplo</h1>
<br />
<br />
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
@Html.LabelFor(m => m.Nombre)
@Html.TextBoxFor(m => m.Nombre)
<br />
@Html.LabelFor(m => m.Apellidos)
@Html.TextBoxFor(m => m.Apellidos)
<br />
@Html.Label("Hombre")
@Html.RadioButtonFor(m => m.Sexo, "Hombre", new { value = "Hombre" })
@Html.Label("Mujer")
@Html.RadioButtonFor(m => m.Sexo, "Mujer", new { value = "Mujer" })
<br />
@Html.LabelFor(m => m.Edad)
@Html.DropDownListFor(m => m.Edad, lstValores)
<br />
@Html.LabelFor(m => m.Vive)
@Html.CheckBoxFor(m => m.Vive)
<br />
<input type="submit" value="Submit" />
}
</div>
Lo cual se renderiza en el navegador se la siguiente forma:
Al utilizar los helpers de esta forma, los datos que ingresemos en estos controles, automáticamente se vaciaran a nuestro modelo, y al dar click en el submit, estos se enviaran a la acción correspondiente, en nuestro ejemplo se mandara al método post de la acción index en el controlador home, si inspeccionamos el contenido de la variable p que recibe el index por parámetros veremos que vienen los valores que el usuario ingreso en el formulario
A continuación te dejo los links tanto del proyecto como de la versión en línea de este proyecto:
Descargar el código fuente del ejemplo
Ya que hemos entendido el uso y manejo de los helpers, podemos pasar al siguiente punto donde veremos la validación del modelo en Asp.net MVC (Data Annotations)