Forms

and and HTML Helpers

MCP, MCTS, SCD, Ing. Samuel Mestanza A.

Usando Formularios

form
El elemento HTML form ( <form> ) representa una sección de un documento que contiene controles interactivos que
permiten a un usuario enviar información a un servidor web.

Atributos

action

La URI de un programa que procesa la información enviada por medio del formulario.

method

El método HTTP que el navegador usa para enviar el formulario. Valores posibles son:

post: Corresponde al método HTTP POST ; los datos del formulario son incluidos en el cuerpo del formulario y son
enviados al servidor.
get: Corresponde al método HTTP GET ; los datos del formulario son adjuntados a la URI del atributo action, con
un '?' como separador, y la URI resultante es enviada al servidor. Use este método cuando el formulario no tiene
efectos secundarios y contiene solo caracteres ASCII.

enctype

Cuando el valor del atributo method es post , este atributo es el tipo MIME del contenido que es usado para enviar el
formulario al servidor.

Los posibles valores son:

application/x-www-form-urlencoded : El valor por defecto si un atributo no está especificado.

multipart/form-data : Usar este valor si se está usando el elemento <input> con el atributo type ajustado
a " file ".
text/plain (HTML5)

Ejemplos:

<!-- Formulario simple que enviará una petición GET -->

<form action="">
<label for="GET-name">Nombre:</label>
<input id="GET-name" type="text" name="name">
<input type="submit" value="Save">
</form>

<!-- Formulario simple que enviará una petición POST -->

<form action="" method="post">
<label for="POST-name">Nombre:</label>
<input id="POST-name" type="text" name="name">
<input type="submit" value="Save">

Page 1/11 © Copyright Wednesday, Aug 10, 2016, 1:15 PM by Samuel Mestanza A.
 </form>

<!-- Formulario con conjunto de campos, leyenda y etiqueta -->

<form action="" method="post">
<fieldset>
<legend>Título</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Clic aquí</label>
</fieldset>
</form>

Html Helpers

Los Html Helpers son métodos que pueden ser invocados en la propiedad HTML en una vista . También tenemos
URL Helpers (a través de la propiedad Url ) y Ajax Helpers (a través de la propiedad Ajax )

Todos estos Helpers tienen el mismo objetivo: hacer que el desarrollo de vistas sea mas fácil. El Helper URL también
está disponible desde los Controladores.

La mayoría Helpers, en particular HTML Helper generan codigo Html .

Html.BeginForm
El Helper Html.BeginForm renderiza un formulario, Ejemplo:

@using (Html.BeginForm()) {
<fieldset>
<legend>Edit Album</legend>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}

La versión de BeginForm del código anterior sin ningún parámetro envía un HTTP POST a la URL
actual.

El resultado es:

<form action="/Album/Edit/1" method="post">

<fieldset>
<legend>Edit Album</legend>
<p>
<input value="Save" type="submit">
</p>
</fieldset>
</form>

Tambien podemos personalizar el Html.BeginForm para que apunte a un Accion y Controller específico, incluso
cambiar el method , Ejemplo:

@using (Html.BeginForm("Search", "Home", FormMethod.Get))

{
<input type="text" name="q" />
<input type="submit" value="Search" />
}

Page 2/11 © Copyright Wednesday, Aug 10, 2016, 1:15 PM by Samuel Mestanza A.
El resultado es:

<form action="/Home/Search" method="get">

<input name="q" type="text">
<input value="Search" type="submit">
</form>

Si quisieramos personalizar aun más el form sólo agregamos un cuarto parametro de tipo htmlAttributes ,
Ejemplo:

@using (Html.BeginForm("Upload", "Home", FormMethod.Post,new { @class="uploadForm",

enctype="multipart/form-data" }))
{
<input type="file" name="file" />
<input type="submit" value="upload" />
}

El resultado es:

<form action="/Home/Upload" class="uploadForm" enctype="multipart/form-data" method="post">

<input name="file" type="file">
<input value="upload" type="submit">
</form>

Html.ValidationSummary
El helper ValidationSummary muestra una lista desordenada de todos los errores de validación en el diccionario
ModelState .

@Html.ValidationSummary(excludePropertyErrors: true)

El parámetro booleano que está utilizando (con un valor true ) está diciendo al helper que excluya los errores a nivel
de propiedades. En otras palabras, le está diciendo que sólo muestre los errores en ModelState asociados con el
modelo en sí, y no los errores asociados a las propiedades de modelo. Ejemplo:

Suponga que tiene el siguiente código en un Action :

ModelState.AddModelError("", "This is all wrong!");

ModelState.AddModelError("Title", "What a terrible name!");

El primer error es un error de nivel de modelo, ya que no se proporcionó una clave (o se ha proporcionado una clave
de vacía) para asociar el error con una propiedad específica.

El segundo error que está relacionado con la propiedad Titulo , por lo que no se mostrará en el área de validación
(a menos que quite el parámetro en el helper, o cambia el valor a false ). En este escenario , el helper genera el
siguiente codigo HTML :

<div class="validation-summary-errors">
<ul>
<li>This is all wrong!</li>
</ul>
</div>

Html.TextBox

Page 3/11 © Copyright Wednesday, Aug 10, 2016, 1:15 PM by Samuel Mestanza A.
El helper Html.TextBox genera un textbox. Ejemplo:

@Html.TextBox("Title","Titulo de la Canción")

El resultado es:

<input id="Title" name="Title" type="text" value="Título de la Canción" />

Si estubiera fuertemente tipado se usa el helper Html.TextBoxFor , asumiendo que el modelo tuviera una propiedad
Precio , el codigo seria el siguiente:

@Html.TextBoxFor(m => m.Precio)

Html.TextArea
El helper Html.TexArea genera un textarea. Ejemplo:

@Html.TextArea("text", "hello <br/> world")

El resultado es:

<textarea cols="20" id="text" name="text" rows="2">

hello &lt;br /&gt; world
</textarea>

Si quisieramos personalizar un poco mas el TextArea e indicar el numero de filas y columnas, podemos agregar
mas parametos. Ejemplo:

@Html.TextArea("text", "hello <br /> world", 10, 80)

El resultado es:

<textarea cols="80" id="text" name="text" rows="10">hello &lt;br /&gt; world </textarea>

Si estubiera fuertemente tipado se usa el helper Html.TextAreaFor , asumiendo que el modelo tuviera una propiedad
Comentario , el codigo seria el siguiente:

@Html.TextAreaFor(m=>m.Comentario, new { rows = 200, cols = 100 })

Html.Label
El helper Html.Label genera un label. Ejemplo:

@Html.Label("ForControl","Display Text")

El resultado es:

<label for="ForControl">Display Text</label>

Si estubiera fuertemente tipado se usa el helper Html.LabelFor , asumiendo que el modelo tuviera una propiedad
User , el codigo seria el siguiente:

@Html.LabelFor(m=>m.User, "Usuario:")

Page 4/11 © Copyright Wednesday, Aug 10, 2016, 1:15 PM by Samuel Mestanza A.
Html.DropDownList and Html.ListBox
Ambos helpers DropDownList y ListBox generan un elemento <select /> . DropDownList permite seleccionar un
único item, mientras ListBox permite seleccionar varios items.

Por lo general, un elemento de selección tiene dos propósitos:

Para mostrar una lista de posibles opciones.

para mostrar el valor actual de un campo.

Para trabajar los helpers DropDownList y ListBox necesitamos asociar una colecion del tipo SelectListItem ,
SelectListItem representa un elemento <option /> .

Dependiendo que tipo de lista vamos a utilizar pasamos un MultiSelectList para el ListBox o un SelectList
para un DropDownList . Ejemplo:

SelectController

public IActionResult SeleccionarPaises(Int32 id){

//creamos la lista de los paises a seleccionar
var items = new List<SelectListItem>(){
new SelectListItem(){ Text = "Peru", Value = "PE" },
new SelectListItem(){ Text = "Chile", Value = "CL" },
new SelectListItem(){ Text = "Ecuador", Value = "EQ" }
};

/// <summary>
/// Generamos lista de Paises que se motraran en una lista desplegable
/// </summary>
/// <param name="items">lista de opciones a mostrarse</param>
/// <param name=""Value"">Nombre de la propiedad se se tomará como valor al
seleccionarse</param>
/// <param name=""Text"">Nombre de la propiedad se mostrará</param>
ViewBag.Pais = new SelectList(items,"Value","Text");

ViewBag.Paises = new MultiSelectList(items,"Value","Text");

return View();
}

ViewBag es útil cuando se desea transferir datos temporales entre el controllador y la vista. ViewBag
es una propiedad de tipo dinámico.

SeleccionarPaises.cshtml

<div>
@Html.Label("Seleccione un Pais")
@Html.DropDownList("Pais",(SelectList)ViewBag.Pais,"[-– Seleccione un Pais --]", new {
@class = "form-control"})
<br/>
@Html.Label("Seleccione los Paises")
@Html.ListBox("Paises",(MultiSelectList)ViewBag.Paises,new { @class = "form-control"})
</div>

El resultado es:

Page 5/11 © Copyright Wednesday, Aug 10, 2016, 1:15 PM by Samuel Mestanza A.
 <div>
<label for="Seleccione_un_Pais">Seleccione un Pais</label>
<select class="form-control" id="Pais" name="Pais"><option value="">[-– Seleccione un
Pais --]</option>
<option value="PE">Peru</option>
<option value="CL">Chile</option>
<option value="EQ">Ecuador</option>
</select>
<br/>
<label for="Seleccione_los_Paises">Seleccione los Pais</label>
<select class="form-control" id="Paises" multiple="multiple" name="Paises">
<option value="PE">Peru</option>
<option value="CL">Chile</option>
<option value="EQ">Ecuador</option>
</select>
</div>

Hay otra forma mas sencilla de trabajar ambos helpers, estos se pueden generar a partir de colecciones de cualquier
tipo de objectos, es basante útil cuando se trae datos de un repositorio.

public IActionResult SeleccionarPaises(Int32 id){

//listado de paises que obtiene de la base de datos

var paises = PaisesService.GetPaises();

/// <summary>
/// Generamos lista de Paises que se motraran en una lista desplegable
/// </summary>
/// <param name="items">lista de opciones a mostrarse</param>
/// <param name=""Id"">Nombre de la propiedad se se tomará como valor</param>
/// <param name=""NombrePais"">Nombre de la propiedad se mostrará</param>
ViewBag.Pais = new SelectList(paises,"Id","NombrePais");

ViewBag.Paises = new MultiSelectList(items,"Id","NombrePais");

return View();
}

Si estubiera fuertemente tipado se usa el helper Html.DropDownListFor o Html.ListBoxFor , asumiendo que el

modelo tuviera una propiedad IdPais , el codigo seria el siguiente:

<div>
@Html.Label("Seleccione un Paises")
@Html.DropDownListFor(m=>m.IdPais,(SelectList)ViewBag.Pais,"[-– Seleccione un Pais --]",
new { @class = "form-control"})
<br/>
@Html.Label("Seleccione los Pais")
@Html.ListBoxFor(m=>m.IdPais,(MultiSelectList)ViewBag.Paises,new { @class = "form-
control"})
</div>

Html.ValidationMessage
Cuando existe un error en el diccionario ModelState para un campo determinado, puede utilizar el Helper
ValidationMessage para mostrar el mensaje . Por ejemplo, en la siguiente acción del controlador , introduciremos un
error para el campo Title :

AlbumController

Page 6/11 © Copyright Wednesday, Aug 10, 2016, 1:15 PM by Samuel Mestanza A.
 [HttpPost]
public ActionResult Edit(int id, FormCollection collection) {
var album = storeDB.Albums.Find(id);
ModelState.AddModelError("Title", "What a terrible name!");
return View(album);
}

Edit.cshtml

@Html.ValidationMessage("Title")

El resultado es:

<span class="field-validation-error" data-valmsg-for="Title" data-valmsg-replace="true">

What a terrible name!
</span>

Si estubiera fuertemente tipado se usa el helper Html.ValidationMessageFor , asumiendo que el modelo tuviera una
propiedad NombreUsuario , el codigo seria el siguiente:

@Html.ValidationMessageFor(m => m.NombreUsuario)

Otros Inputs Hepers

Html.Hidden
EL helper Html.Hidden renderiza un input hidden, Ejemplo:

@Html.Hidden("wizardStep", "1")

El resultado es:

<input id="wizardStep" name="wizardStep" type="hidden" value="1" />

Si estubiera fuertemente tipado se usa el helper Html.HiddenFor , asumiendo que el modelo tuviera una propiedad
WizardStep , el codigo seria el siguiente:

@Html.HiddenFor(m => m.WizardStep)

Html.RadioButton
El Helper Html.RadioButton renderiza un radio button, Ejemplo:

@Html.RadioButton("color", "red")
@Html.RadioButton("color", "blue", true)
@Html.RadioButton("color", "green")

El resultado es:

<input id="color" name="color" type="radio" value="red" />

<input checked="checked" id="color" name="color" type="radio" value="blue" />
<input id="color" name="color" type="radio" value="green" />

Page 7/11 © Copyright Wednesday, Aug 10, 2016, 1:15 PM by Samuel Mestanza A.
El Helper Html.RadioButton tiene una desventaja cueando se lo usa fuertemente tipado, se tiene que indicar el valor
y la etiqueta del radio button que el usuario visualiza.

@Html.RadioButtonFor(m => m.GenreId, "1") Rock

@Html.RadioButtonFor(m => m.GenreId, "2") Jazz
@Html.RadioButtonFor(m => m.GenreId, "3") Pop

Html.CheckBox
El helper Html.CheckBox es el único que renderiza 2 html , Ejemplo:

@Html.CheckBox("IsDiscounted")

El codigo HTML generado es el siguiente:

<input id="IsDiscounted" name="IsDiscounted" type="checkbox" value="true" />

<input name="IsDiscounted" type="hidden" value="false" />

El helper genera 2 entradas debido a que la especificación de HTML indica que un navegador presentará un valor
para una casilla de verificación ( checkbox ) sólo cuando la casilla de verificación está activada ( seleccionada ).

En este ejemplo , la segunda entrada garantiza que aparecerá un valor para IsDiscounted incluso cuando el usuario
no seleccione el checkbox .

Si estubiera fuertemente tipado se usa el helper Html.CheckBoxFor , asumiendo que el modelo tuviera una propiedad
IsActive , el codigo seria el siguiente:

@Html.CheckBoxFor(m => m.IsActive)

Rendering Helpers

Html.ActionLink
El método ActionLink genera un hipervínculo(anchor tag) a una acción del controlador

@Html.ActionLink("Link Text", "AnotherAction")

El codigo HTML generado es el siguiente, asumiendo las rutas por defecto(HomeController):

<a href="/Home/AnotherAction">Link Text</a>

Cuando se necesita un enlace que apunta a una acción de un controlador diferente, podemos especificar el nombre
del controlador como tercer argumento para ActionLink . Por ejemplo, para vincular a la acción Index de
ShoppingCartController , utilice el siguiente código :

@Html.ActionLink("Link Text", "Index", "ShoppingCart")

El codigo HTML generado es el siguiente:

<a href="/ShoppingCart/Index">Link Text</a>

En muchos casos, se tendrá más parámetros que enviar al controlador. Por ejemplo, es posible que tenga que pasar
un valor de ID, o algún otro parámetro mediante un ActionLink , afortunadamente, se permite sobrecargar el

Page 8/11 © Copyright Wednesday, Aug 10, 2016, 1:15 PM by Samuel Mestanza A.
ActionLink y pasar todo un objeto de tipo RouteValueDictionary de tipo anonimo. Por ejemplo, construir un enlace
para editar un registro cuyo Id e 10720, puede utilizar el siguiente código:

@Html.ActionLink("Edit link text", "Edit", "StoreManager", new {id=10720})

El codigo HTML generado es el siguiente:

<a href="/StoreManager/Edit/10720">Edit link text</a>

Html.RouteLink
El helper RouteLink sigue el mismo patrón que el helper ActionLink sino que acepta un nombre de ruta y no tiene
argumentos para el nombre de controlador y nombre de acción. Por ejemplo:

@Html.RouteLink("Link Text", new {action="AnotherAction"})

El codigo HTML generado es el siguiente, asumiendo las rutas por defecto(HomeController):

<a href="/Home/AnotherAction">Link Text</a>

URL Helpers
Los URL Helpers son similares a los HTML Helpers ActionLink y RouteLink , pero en lugar de generar codigo
HTML solamente construyen URLs y lo retornan como cadenas.

Url.Action

El helper Url.Action es exactamente igual a ActionLink , pero no devuelve una etiqueta de anclaje. Por ejemplo:

<span>
@Url.Action("Browse", "Store", new { genre = "Jazz" }, null)
</span>

El codigo HTML generado es el siguiente:

<span>
/Store/Browse?genre=Jazz
</span>

Url.Content

El helper Url.Content es particularmente útil , ya que puede convertir una ruta realiva a una ruta absoluta de la
aplicación. Ejemplo:

<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>

El codigo HTML generado es el siguiente:

<script src="~/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>

Html.Partial

Page 9/11 © Copyright Wednesday, Aug 10, 2016, 1:15 PM by Samuel Mestanza A.
El helper Html.Partial genera una vista parcial en una línea. Por lo general, una vista parcial es una fracción de
codigo reutilizable que se desea procesar diferentes vistas. El Helper Partial tiene cuatro sobrecargas :

public void Partial(string partialViewName);

public void Partial(string partialViewName, object model);
public void Partial(string partialViewName, ViewDataDictionary viewData);
public void Partial(string partialViewName, object model,ViewDataDictionary viewData);

Tengamos en cuenta que al llamar una vista parcial no es necesario especificar la extensión o ruta de acceso porque
la lógica del motor de ejecución utiliza la localiza cuando este en la carpeta Views > Shared

@Html.Partial("AlbumDisplay")

Html.Action
El Helper Html.Action es similar al helper Html.Partial , la diferencia es que Html.Action genera una vista
parcial a partir del Action de un Controller ,la ventaja de esto es que Action puede pasar directamente el
modelo a la vista parcial. Ejemplo:

Controller MyController

public class MyController : Controller

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

[ChildActionOnly]
public ActionResult Menu()
{
var menu = GetMenuFromSomewhere();
return PartialView(menu);
}
}

Observe que el Action Menu es marcado con un ChildActionOnlyAttribute , este atributo evita que
lo podamos invocar en tiempo de ejecución directamente por Url , en su lugar solo permite llamadas a
travez de @Html.Action . El ChildActionOnlyAttribute no es necesario, pero por lo general se
recomienda colocarlo para este tipo de actiones;

El Action Menu instancia un modelo de tipo menú y devuelve una vista parcial con sólo el menú:

//_MenuPartial.cshtml
@model Menu
<ul>
@foreach (var item in Model.MenuItem)
{
<li>@item.Text</li>
}
</ul>

En la vista Index.cshtml , ahora podemos llamar al Action y visualizar el menú :

<html>
<head>

Page 10/11 © Copyright Wednesday, Aug 10, 2016, 1:15 PM by Samuel Mestanza A.
 <title>Index with Menu</title>
</head>
<body>
@Html.Action("Menu")
<h1>Welcome to the Index View</h1>
</body>
</html>

Page 11/11 © Copyright Wednesday, Aug 10, 2016, 1:15 PM by Samuel Mestanza A.