9 - HTML helpers: método ActionLink
Los Helpers ayudan a trabajar con el HTML.
Si bien podemos utilizar HTML puro para generar la vista el empleo de los métodos que provee la propiedad Html nos facilita generar las vistas.
Los métodos disponibles en la clase HtmlHelper nos facilitan entre otras cosas:
- La definición de los hipervínculos entre las diferentes acciones dentro de un controlador y entre otros controladores.
- Definición de nombres de los controles de formulario y datos a mostrar en relación con el modelo.
- Mostrar mensajes de error según reglas definidas en el modelo.
Un método muy utilizado de la propiedad Html es el ActionLink.
Este método tiene por objetivo generar la etiqueta:
<a href="#">Enlace</a>
Si bien podemos escribir directamente la etiqueta para el enlace en HTML, cuando tenemos un proyecto que tiene muchos controladores y hay enlaces entre acciones de los mismos, nos resultará más claro utilizar la sintaxis del Helpers.
Problema (Proyecto8)
Crear tres Controladores llamados: HomeController, ClientesController, ProveedoresController.
En el controlador HomeController definir una sola acción llamada Index.
En el controlador ClientesController definir dos acciones llamadas Listado y Alta.
En el controlador ProveedoresController definir dos acciones llamadas Listado y Alta.
Crear la vista de la acción Index del HomeController definiendo dos enlaces a las acciones Listado y Alta de los controladores ClientesController y ProveedoresController.
Crear las vistas de las acciones Listado y Alta del controlador ClientesController definiendo enlaces entre ellas y otro al Index del controlador HomeController. Lo mismo hacer con las vistas del controlador ProveedoresController.
Una vez que proceda a crear los tres controladores en la carpeta Controllers y las 5 vistas debe tener los siguientes archivos:
El código que debemos implementar para los tres controladores es el siguiente:
HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Proyecto8.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
ClientesController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Proyecto8.Controllers
{
public class ClientesController : Controller
{
public ActionResult Listado()
{
return View();
}
public ActionResult Alta()
{
return View();
}
}
}
ProveedoresController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Proyecto8.Controllers
{
public class ProveedoresController : Controller
{
public ActionResult Listado()
{
return View();
}
public ActionResult Alta()
{
return View();
}
}
}
Luego tenemos que codificar las 5 acciones de los 3 controladores:
Index.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h1>Pagina principal.</h1>
@Html.ActionLink("Listado de clientes","Listado","Clientes")
<br />
@Html.ActionLink("Alta de clientes", "Alta", "Clientes")
<hr />
@Html.ActionLink("Listado de proveedores", "Listado", "Proveedores")
<br />
@Html.ActionLink("Alta de proveedores", "Alta", "Proveedores")
</div>
</body>
</html>
El método ActionLink está sobrecargado en la clase HtmlHelper, hay 10 y difieren en sus parámetros. En este caso estamos llamando a ActionLink pasando 3 string. El primer parámetro es el texto que debe mostrar el enlace, el segundo es la acción que debe ejecutar y el tercer parámetro indica el controlador de dicha acción:
@Html.ActionLink("Listado de clientes","Listado","Clientes")
Listado.cshtml de la vista Clientes
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Listado</title>
</head>
<body>
<div>
<h1>Listado de Clientes</h1>
<p>xxxxxxxxxx</p>
@Html.ActionLink("Alta de clientes", "Alta")
<br />
@Html.ActionLink("Retornar a pagina principal", "Index", "Home")
</div>
</body>
</html>
En esta vista hemos utilizado el método ActionLink para enlazar a otra acción que se encuentra en el mismo controlador, como vemos no tenemos que indicar el nombre del controlador:
@Html.ActionLink("Alta de clientes", "Alta")
Cuando enlazamos con la página principal debemos indicar la ejecución de la acción Index y como se encuentra en otro controlador debemos especificarlo:
@Html.ActionLink("Retornar a pagina principal", "Index", "Home")
Alta.cshtml de la vista Clientes
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Alta</title>
</head>
<body>
<div>
<h1>Alta de Clientes</h1>
<p>xxxxxxxxxx</p>
@Html.ActionLink("Listado de clientes","Listado")
<br />
@Html.ActionLink("Retornar a pagina principal", "Index","Home")
</div>
</body>
</html>
Listado.cshtml de la vista Proveedores
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Listado</title>
</head>
<body>
<div>
<h1>Listado de Proveedores</h1>
<p>xxxxxxxxxx</p>
@Html.ActionLink("Alta de proveedores", "Alta")
<br />
@Html.ActionLink("Retornar a pagina principal", "Index", "Home")
</div>
</body>
</html>
Alta.cshtml de la vista Proveedores
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Alta</title>
</head>
<body>
<div>
<h1>Alta de Proveedores</h1>
<p>xxxxxxxxxx</p>
@Html.ActionLink("Listado de proveedores", "Listado")
<br />
@Html.ActionLink("Retornar a pagina principal", "Index", "Home")
</div>
</body>
</html>
Debe quedar bien claro que cuando ejecutamos la aplicación lo que llega al navegador de la ejecución:
@Html.ActionLink("Listado de clientes","Listado","Clientes")
es:
<a href="/Clientes/Listado">Listado de clientes</a>
Este proyecto lo puede descargar en un zip desde este enlace: proyecto8.zip
Problema (Proyecto9)
Confeccionar una aplicación que muestre en una vista 9 enlaces para mostrar las tablas de multiplicar del 2 al 10. Cuando se selecciona un enlace se le pasa a otra acción la tabla de multiplicar a mostrar.
Primero creemos el proyecto con un controlador llamado HomeController y con dos acciones.
HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Proyecto9.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult Tabla(int valor)
{
ViewBag.Tabla = valor;
return View();
}
}
}
Luego creamos las vistas para las acciones Index y Tabla.
Index.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h1>Tablas de multiplicar del 2 al 10</h1>
@for (var x = 2; x <= 10; x++)
{
@Html.ActionLink("Tabla del " + @x, "Tabla", new { valor = @x }) <br />
}
</div>
</body>
</html>
Tabla.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Tabla</title>
</head>
<body>
<div>
@for (var x = ViewBag.Tabla; x <= 10 * ViewBag.Tabla; x = x + ViewBag.Tabla)
{
@x <br />
}
</div>
</body>
</html>
Lo nuevo en este problema es la sintaxis que debemos utilizar si queremos pasar parámetros en la URL del enlace:
@Html.ActionLink("Tabla del " + @x, "Tabla", new { valor = @x }) <br />
Debemos crear un objeto anónimo con la palabra clave new y entre llaves indicar el parámetro y su valor.
Cuando ejecutamos la vista Index tenemos en el navegador:
Como vemos cada uno de los enlaces tiene un parámetro llamado valor con un entero distinto.
Este proyecto lo puede descargar en un zip desde este enlace: proyecto9.zip
Otras variantes del método ActionLink.
-
Si queremos definir propiedades para la etiqueta <a>:
@Html.ActionLink("Tabla del " + @x, "Tabla", new { valor = @x }, new {target = "_blank", style="font-size:30px" })Al navegador llega el siguiente código de HTML:
<a href="/Home/Tabla?valor=2" style="font-size:30px" target="_blank">Tabla del 2</a> -
Si tenemos que definir la propiedad class para la etiqueta debemos anteceder el caracter @ a la palabra class ya que dicha palabra es clave en el lenguaje C#:
@Html.ActionLink("Tabla del " + @x, "Tabla", new { valor = @x }, new {target="_blank", @class="btn btn-info", role="button"}) -
Si queremos pasar atributos pero no valores podemos pasar un null:
@Html.ActionLink("Tabla del 2", "Tabla2", null, new {target="_blank", @class="btn btn-info", role="button"}) -
Si debemos disponer un enlace hacia otro sitio no debemos utilizar el método ActionLink sino directamente la etiqueta <a>:
<a href="https://www.google.com">Ir a google</a>