Las Vistas de ASP.NET MVC

Cuando creamos un controlador y asignamos una vista, automáticamente se genera una carpeta en el apartado Views, con el nombre del controlador, sin Controller, y cada una de las vistas generadas con el nombre de la acción (por convención) que hemos elegido al crearla.

Si añadimos la vista de forma automática con el cuadro de diálogo «Add View», el código se generará en función de lo que hayamos señalado en la ventana de creación. Existen varias opciones:

Aún así, debemos conocer la forma de generar el contenido de nuestras propias vistas, ya que en más de una ocasión será necesario cambiar totalmente el look que nos ofrecen en la plantilla. En este post solamente vamos a hablar de la versión ASP.NET MVC 1.0 que es la que se encuentra en release actualmente. Posteriormente, me gustaría centrarme en las mejoras que se están presentando en las previews de ASP.NET MVC 2.

Puntos a tener en cuenta:

No existen los controles como tal de WebForms (Los controles no son de servidor, se acabó el runat = «server»).
Tenemos la posibilidad de utilizar helpers para generar una serie de elementos estándar (textbox, radiobuttons, formularios, etc.)
No existe el ViewState.
Disponemos de dos mecanismos para recuperar datos del servidor (Model y ViewData).
Recuperamos el uso de las etiquetas <% %> (antiguo ASP)

CONTROLES EN MVC

Si en una vista cualquiera ponemos la sentencia <%=Html. + Control + J , podemos ver una serie de helpers que nos ayudarán a simplificar el código. Los controles estándar podrían ser los siguientes:

ActionLink: Renderiza una referencia a la cual debemos pasarle, al menos, el texto que figurará en el link y la acción que necesitamos invocar. Se entiende que la acción que le estamos imponiendo es una del mismo controlador (Dentro de su contexto).
```
<%= Html.ActionLink("Create New", "Create") %>
```
Otro caso muy común sería pasarle además el Id de un registro que queremos modificar, ver el detalle, etc.
```
<%= Html.ActionLink("Details", "Details", new {  id=item.Id })%>
```
RouteLink: Es similar al helper anterior salvo que se utiliza como parámetro el nombre de la ruta en vez del nombre de la acción que queremos invocar. Se puede utilizar para redirigirnos a un controlador distinto desde una referencia.
```
<%=Html.RouteLink("Cambio de controlador","NombreDeLaRuta") %>
```
BeginForm: Renderiza un formulario al cual podemos indicarle qué acción lo va a procesar de nuestro controlador, el controlador donde se encuentra, el verbo que va a utilizar en la llamada al servidor (sólo admite GET y POST), etc.
```
<%=Html.BeginForm( "Accion","Controlador",FormMethod.Post){ %>
```
BeginRouteForm: Funciona de la misma manera que BeginForm pero en este caso podemos especificar el nombre de la ruta.
```
<%=Html.BeginRouteForm("NombreDeLaRuta") %>
```
RenderPartial: Se le pasa como parámetro el nombre de una vista parcial para poder visualizarla (renderizarla) dentro de la vista actual.
```
<% Html.RenderPartial("LogOnUserControl"); %>
```

Además, dentro de Html, también disponemos de controles básicos como Textbox, DropDownList, TextArea, etcétera, los cuales no tienen mayor complicación.

Ok, tenemos los controles más básicos y en muchas ocasiones son suficientes, pero… ¿Qué pasa si necesitamos algún control que no esté por defecto? Sería tan fácil como utilizar Extension Methods e implementar un nuevo control utilizando por ejemplo TagBuilder.

using System.Web.Mvc;
using System.Web.Routing;

namespace HelpersMVC.Helpers
{
    public static class CustomHelpers
    {
        public static string ImageLink(this HtmlHelper htmlHelper, string id, string controller,string action, string image, object attributes)
        {
            var tagBuilder = new TagBuilder("a");
            var tagBuilderImg = new TagBuilder("img");
            tagBuilderImg.MergeAttribute("src",image);
            tagBuilder.GenerateId(id);
            tagBuilder.MergeAttribute("href", controller + "/" + action);
            tagBuilder.InnerHtml = tagBuilderImg.ToString();
            tagBuilder.MergeAttributes(new RouteValueDictionary(attributes));
            return tagBuilder.ToString();
        }
    }
}

En este caso, en pocos minutos, puedo crearme un nuevo control que está compuesto por una referencia y una imagen… Nada nuevo la verdad 🙂

Por último, existen dos propiedades que nos serán de utilidad a la hora de pasar información entre el controlador y la vista:

Model: Cuando creamos una vista fuertemente tipada, la propiedad Model es casteada al tipo seleccionado. De tal manera que, si yo especifico que mi vista va a ser fuertemente tipada con la clase Movie, y retornamos un objeto de este tipo en la acción del controlador, la propiedad Model será rellenada con los datos del objeto en cuestión. En el caso de que queramos listar un conjunto de objetos de la misma clase, Model será un IEnumerable del objeto. Para ser conscientes en todo momento del tipo que está devolviendo model, podemos fijarnos en el Inherits de la vista en cuestión.
ViewData: Hay ocasiones en las que, además de pasar un objeto en concreto utilizando Model, es posible que necesitemos retornar a la vista otro tipo de información. Para ello podemos utilizar ViewData. En realidad, esta propiedad es un diccionario donde podemos meter cualquier tipo de información.

Aún quedan muchas cosas por ver… espero poder ampliar más dentro de poco 🙂

¡Saludos!

Deja un comentario Cancelar respuesta