[ASP.NET MVC] (Part II) Views

Definición

En el anterior post hablabamos sobre los controladores y en este toca hablar de las vistas, que no son ni más ni menos que nuestra carta de presentación frente al usuario y es lo primero que entra por los ojos y por eso debemos prestarlas mucha atención.

Cuando salieron los primeros bytes de ASP.MVC y actualmente, mucha gente al ver las etiquetas <% %> en las vistas:

<%
=Html.TextBox("username") 
%>

cree que ha vuelto el Spaghetti Code, os recomiendo leer este artículo:

http://blog.wekeroad.com/blog/asp-net-mvc-avoiding-tag-soup/

En el que precisamente se habla de como ASP.NET MVC se puede evitar todo esto, aunque por supuesto que con ASP.NET MVC, Ruby… se puede escribir Spaghetti Code, pero eso no es por la tecnología, sino por la calidad del programador.

Una de las cosas que tenemos que tener en bastante en cuenta es que la vista no de debe contener nada de lógica de negocio y que sólo debe ocuparse de la presentación de los datos del modelo.

A simple vista cuando creamos un proyecto de ASP.NET MVC podemos observar que existe una carpeta llamada Views:

views

y a parte, por cada controlador existe una carpeta que contiene vistas, que a su vez corresponden con los Action Methods del controlador:

public ActionResult LogOn(string userName, string password, bool rememberMe, string returnUrl)
 
public ActionResult Register()
 
public ActionResult ChangePassword()

Aunque no todas las vistas tienen porque corresponder a un Action Method, por ejemplo ChangePasswordSuccess.aspx será una vista a la que se redirigirá desde el método Register cuando se cambie la password correctamente.

if (MembershipService.ChangePassword(User.Identity.Name, currentPassword, newPassword))
{
    return RedirectToAction("ChangePasswordSuccess");
}

 

 

 

 

Para crear una vista basta con pulsar botón derecho sobre el Action Method que queremos crear su vista:

views2

views3

Por defecto el nombre de la vista se corresponde con el del Action Method.

Tipos de Vistas

Podemos crear 3 tipos de vistas:

  1. Vista por defecto (aspx)
  2. Vista parcial (ascx)
  3. Vista fuertemente tipada, que nos permite seleccionar una entidad de nuestra solución sobre la se generará la vista y el template que queremos utilizar (Vacia (por defecto), Creación, Edición, Detalle y Listado)

La diferencia fundamental entre una vista fuertemente tipada y no está en la manera en la que accedemos al modelo de nuestra aplicación, que con una vista tipada es más claro y no tenemos que estar haciendo un cast del ViewData que retorna un object:

NO TIPADA

Directiva de página

Inherits="System.Web.Mvc.ViewPage"

Código

<% foreach (var item in (ViewData["Employee"] as IEnumerable<Employee>)) { %>

TIPADA

Directiva de página

Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcDemoApplication.Models.Employee>>

Código

 

 

<% foreach (var item in Model) { %>
Donde Model es del tipo TModel, es decir, en nuestro caso del tipo Employee
 
public class ViewPage<TModel> : ViewPage where TModel : class
{
    public ViewPage();
 
    public AjaxHelper<TModel> Ajax { get; set; }
    public HtmlHelper<TModel> Html { get; set; }
    public TModel Model { get; }
    public ViewDataDictionary<TModel> ViewData { get; set; }
 
    public override void InitHelpers();
    protected override void SetViewData(ViewDataDictionary viewData);
}

Dentro de la vista tenemos acceso a la clase Html, que es un helper que nos facilita un montón de métodos extensores para crear todo tipo de controles y atributos HTML. Además todos los métodos hacen uso de Encode para los datos que van a mostrar:

Html.ActionLink: Crear un hyperlink a otro Action Method

Html.TextBox: Crea un tag input con el atributo type establecido como text

Para ver todos los métodos de la clase Html: http://msdn.microsoft.com/en-us/library/system.web.mvc.html.aspx

ViewEngine

Otra cosa que podemos hacer en ASP.NET MVC es poder utilizar otro motor de vistas que no sea el propio de ASP.NET MVC, es decir podemos usar HHaml, NVelocity, Brail, Spark

En el siguiente ejemplo vamos a ver como podemos añadir el motor de vistas de HNaml a un proyecto ASP.NET MVC:

Lo primero es descargar NHaml –> http://code.google.com/p/nhaml/

A continuación creamos un nuevo proyecto:

views4

Una vez creado el proyecto, añadimos las siguientes referencias:

  • NHaml.dll
  • NHaml.Web.Mvc.dll
  • Microsoft.Web.Mvc.dll

A continuación, añadimos la siguiente línea de código a nuestro Global.asax:

protected void Application_Start()
{
    RegisterRoutes(RouteTable.Routes);
 
    ViewEngines.Engines.Add(new NHaml.Web.Mvc.NHamlMvcViewEngine());
}

 

para enchufar el motor de vistas de NHaml. Hecho esto, vamos a añadir al Web.Config la siguiente configuración:

  1. Dentro del tag ConfigSections, añadimos una nueva sección para NHaml:
<section name="nhaml" type="NHaml.Configuration.NHamlConfigurationSection, NHaml"/>
  1. Fuera del tag Configuration, ya podemos definir nuestro tag nhaml:
<nhaml autoRecompile="true" templateCompiler="CSharp3" encodeHtml="false" useTabs="false" indentSize="2">
    <assemblies>
        <add assembly="NHamlMvcApplication"/>
    </assemblies>
    <namespaces>
        <add namespace="NHamlMvcApplication"/>
        <add namespace="NHamlMvcApplication.Controllers"/>
    </namespaces>
</nhaml>

El assembly es el nombre de nuestro proyecto y en el namespace también y añadimos también el de los controladores.

A continuación vamos a añadir nuestra MasterPage de NHaml, para ello:

  • Botón derecho sobre la carpeta Views/Shared y añadir un nuevo item:

views5

 

 

Ahora, vamos añadir marcado NHaml a nuestra página:

%html
%head
  %title = "Demo NHaml"
  %link{ href="../../Content/Site.css" rel="stylesheet" type="text/css" }
%body
  %div.page

 

Pudes ver la referencia de marcado en NHaml aquí –> http://andrewpeters.net/2007/12/19/introducing-nhaml-an-aspnet-mvc-view-engine/

A continuación, vamos a crear nuestro de modelo de datos, que en esta caso será algo sencillo y nos basaremos en el patrón Repositorio:

Entidad

public class User
{
    public int Id
    {
        get;
 
        set;
    }
 
    public string Name
    {
        get;
 
        set;
    }
 
    public int Age
    {
        get;
 
        set;
    }
}

Interfaz

interface IUsersRepository
{
    List<User> GetUsers();
}
 
Implementación

 

public class TestUserRepository : IUsersRepository
{
    #region IUsersRepository Members
 
    public List<User> GetUsers()
    {
        List<User> users = new List<User>{
            new User(){ Id = 1, Name = "Tom", Age = 20},
            new User(){ Id = 2, Name = "Tom 2", Age = 21},
            new User(){ Id = 3, Name = "Tom 3", Age = 22}
        };
 
        return users;
    }
 
    #endregion
}

 

Añadimos un nuevo controlador al que denominaremos UserController:

public class UserController : Controller
{
    public ActionResult Index()
    {
        TestUserRepository repository = new TestUserRepository();
 
        var users = repository.GetUsers();
 
        return View("List", users);
    }
 
}

 

Y por último vamos a crear nuestra vista a la que llamaremos List.haml dentro de la carpeta Views/User:

views6

Y la añadimos el siguiente código para mostrar un listado de los nombres de los usuarios:

%h2= "List of Users"
%ul
  - foreach (var user in Model)
      %li
        = user.Name

 

Y ya solo queda probarlo:

views7

Bueno, pues hasta aquí las vistas, espero que os haya resultado interesante y en la siguiente veremos como que son los Filters

Salu2

Published 18/6/2009 14:19 por Luis Ruiz Pavón
Archivado en: ,
Comparte este post:
http://geeks.ms/blogs/lruiz/archive/2009/06/18/asp-net-mvc-part-ii-views.aspx