ASP.NET MVC Helpers

Un poco de intro…
Un Helper es basicamente un metodo que auxilia no solo en la construccion de contenido para una vista, si no tambien permite un mejor manejo y organizacion de codigo, y al mismo tiempo extiende al maximo la reutilizacion del mismo y la funcionalidad de la vista misma.

En ASP.NET MVC 3 existen tres tipos de Helpers:

HTML (HtmlHelper): Generan contenido (x)HTML valido para la vista.
AJAX (AjaxHelper): Construyen scripts y contenido (x)HTML valido para realizar solicitudes asincronas.
URL (UrlHelper): Ensamblan valores de atributos, contenido o referncias a recursos prevalidadas con respecto al contexto de la vista.

Los Helpers pretenecientes a cada tipo tienen fines en comun, pero todos y cada uno de los tipos puede ser extendido al implementar nuestros propios Helpers personalizados (escribire en otro articulo como hacer esto).

Un ejemplo…

A continuacion les mostrare un ejemplo rapido de helpers. Usando un helper de cada tipo, armare una vista simple que mostrara informacion dinamica con ajax (usando Razor como el ViewEngine).

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>

<body>
    <div>
        Esto es una prueba de ParaBurros.Com !!!
        <br />
        <br />
        <br />
        <p>
            Hora en que fue cargada la vista: @DateTime.Now.ToLongTimeString()
        </p>
        <span id="actualiza">[ Aqui actualizamos el texto ]</span>
        <br />
        <br />
        @Ajax.ActionLink("Actualizar Texto Superior", "ActualizarTexto", "Home", new AjaxOptions { UpdateTargetId = "actualiza" })
        <br />
        <br />
        <br />
        <br />
        @using (Ajax.BeginForm("ReemplazaTexto", new AjaxOptions { UpdateTargetId = "reeemplaza" }))
        {
            <p>Aqui reemplazaremos el texto debajo del TextBox por el ingresado en el mismo</p>
            @Html.TextBox("textBoxDePrueba","Ingresar Texto Para Reemplazar")
            <input type="submit" value="Submit"/>
            <br />
            <br />
            <span id="reeemplaza">[ Aqui Reemplazamos Texto ]</span>
        }
    </div>
</body>
</html>

Del tipo HtmlHelper implmente el siguiente:

@Html.TextBox("textBoxDePrueba","Ingresar Texto Para Reemplazar")

Y este me renderiza en la vista lo siguiente:

<input id="textBoxDePrueba" name="textBoxDePrueba" type="text" value="Ingresar Texto Para Reemplazar" />

Del tipo UrlHelper implemente el siguiente:

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

Y este valida y construye la ruta indicada de acuerdo al contexto donde se ubica la vista. En este caso es la ruta de los scripts necesarios para la implementacion correcta de los Helpers de Ajax:

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

Y por ultimo, del tipo AjaxHelper implemente los siguientes:

@Ajax.ActionLink("Actualizar Texto Superior", "ActualizarTexto", "Home", new AjaxOptions { UpdateTargetId = "actualiza" })
@using (Ajax.BeginForm("ReemplazaTexto", new AjaxOptions { UpdateTargetId = "reeemplaza" }))
{
   ...
}

Este construye atributos especiales requeridos por las funciones de ajax contenidas en los scripts proporcionados por el mismo framework (scripts de jquery). Estos atributos permiten la integracion de ajax de una forma mas transparente en las vistas.

<a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#actualiza" href="/Home/ActualizarTexto">Actualizar Texto Superior</a>
<form action="/Home/ReemplazaTexto" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#reeemplaza" id="form0" method="post"></form>

Ahora, para complementar las implementaciones de ajax, es necesario definir las acciones que se haran cargo de esas solicitudes asincronas:

public ActionResult ActualizarTexto()
{
   StringBuilder respuesta = new StringBuilder();
   respuesta.Append("[ Texto Actualizado: ").Append(DateTime.Now.ToLongTimeString()).Append(" ]");
   return Content(respuesta.ToString());
}

public ActionResult ReemplazaTexto(string textBoxDePrueba)
{
   StringBuilder respuesta = new StringBuilder();
   if (!string.IsNullOrEmpty(textBoxDePrueba) && textBoxDePrueba != "Ingresar Texto Para Reemplazar")
   {
      respuesta.Append("[ Texto Reemplazado { ")
         .Append(textBoxDePrueba)
         .Append(" }:")
         .Append(DateTime.Now.ToLongTimeString()).Append(" ]");
   }
   else
   {
      respuesta.Append("[ Aqui Reemplazamos Texto ]");
   }

   return Content(respuesta.ToString());
}

Si todo queda correctamente ligado y validado, obtenemos una vista como la siguiente, en la que al dar click en “Actualizar Texto Superior” y al presionar el boton “Submit” se realizan las rutinas necesarias para actualizar los textos que definimos en los helpers

Y aqui la imagen despues de actualizar los textos:

Actualizado: Viernes 9 de Diciembre del 2011 – J.R.

Archives

Meta