Post 9. Motor de vistas Razor (I)

En esta ocasión hablaremos acerca de Razor, motor que es utilizado en MVC (disponible a partir de MVC3) para poder renderizar nuestras vistas, este motor es como un lenguaje que nos permite "crear" código HTML, con la ayuda de este motor podremos llenar grillas, combos, menús, así mismo podemos crear controles HTML (formluarios, inputs, labels, etc.).

Cuando digo que "es como un lenguaje" me refiero a que Razor no es un lenguaje de programación nuevo que debas aprender, mas bien que es un conjunto de reglas o sintaxis con las que podremos usar los lenguajes de programación que brinda Visual Studio (C# o VB).

Si ya has programado antes en asp o php, pues Razor maneja una forma de trabajo muy parecida en la que combinas el lenguaje de programación con el lenguaje HTML (incluso JS o CSS si es necesario) con el cual podremos generar código de manera mas rápida y reduciendo la cantidad de caracteres.

A diferencia de aspx, en la que podemos "jalar" controles desde nuestra caja de herramientas y automáticamente se nos genera todo el código necesario, lo cual es ventaja y desventaja al mismo tiempo: ventaja porque creamos un control en segundos y desventaja porque el no todo el código generado es necesario o para poder cambiar algún simple atributo se debe hacer desde el código en servidor, en Razor, en cambio, debemos digitar todo el código (y sin opción a vista previa :/ ), y claro que intellisense nos ayudara a que esto no sea un calvario, pero podremos manipular más a fondo el código generado. Esta es su mayor ventaja pero como no todo puede ser perfecto, razor nos "obliga" a conocer mas a fondo el lenguaje HTML, JS y CSS, lo cual en el fondo tampoco es tan malo, pero nos hará "sufrir" un poquito más al inicio.

La sintaxis que utilizamos para poder mostrar los ViewBag/ViewData y los modelos dentro de nuestras vistas fueron nuestros primero pasos en Razor. En este post veremos el uso de las principales propiedades de una pagina Razor:

@ViewData / @ViewBag

Ya sabemos como utilizar estas propiedades:

@ViewBag.Message
@ViewData.["Message"]

@Model

Utilizamos esta propiedad para especificar el modelo a utilizar en nuestra vista, no es obligatorio colocarlo, pero usarlo o no usarlo nos puede ayudar de diversas maneras. Una de las ventajas de especificar la clase que se utilizará en la vista es que intellisense nos ayuda a generar la vista con su autocompletar. Por otra parte si no se coloca @model la vista puede ser reutilizada por distintos controladores, siempre y cuando posean el nombre de  sus atributos iguales, esto en la práctica no es muy usual, por lo cual se recomienda siempre especificar la clase modelo para cada vista.

Su sintaxis es de la siguiente manera:

@model Razor.Models.AutorModel

@using

Su funcionalidad es la misma que using en cualquier clase, usaremos @using cuando deseemos utilizar alguna clase o función de alguna dll, librería de clases o que se encuentre en un distinto namespace.

Su sintaxis es de la siguiente manera:

@using Razor.Helpers

@Html - Helpers

Este control mas conocido como Helpers Html, es el más usado en razor (y se podría decir el más importante), con él podremos crear cualquier objeto html, label, inputs, forms, textarea, etc.

A continuación les dejare ejemplos de los casos mas usados, en un siguiente post mostraremos un ejemplo de cada uno de los tipos, por ahora tendremos solo un avance:

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

@* Comentarios *@

Pues como se ve arriba para agregar comentarios en razor solo se debe colocar el texto entre "@*" y "*@". Nótese que estos comentarios son solo comentarios en la página razor y no generar ningún código Html.

@*Esto es un comentario en razor*@

A continuación mostraremos los ejemplos usados en un nuevo proyecto, el cual se creó con una plantilla "Internet Application" (por cuestiones de que ya tiene estilos CSS y se ve más "bonito")

/Controllers/HomeController.cs

using System.Web.Mvc;
using Razor.Models;

namespace Razor.Controllers
{
   public class HomeController : Controller
   {
      public ActionResult Index()
      {
         AutorModel model = new AutorModel("Diego","Arango","Garcia");
         ViewBag.Message = "Aprender Razor en ASP.NET MVC!";
         return View(model);
      }

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

/Models/AutorModel.cs

using System;
using System.Collections.Generic;

namespace Razor.Models
{
   public class AutorModel
   {
      public string Nombre { get; set; }
      public string ApellidoP { get; set; }
      public string ApellidoM { get; set; }
      public DateTime FechaActual { get; set; }

      public AutorModel() { }
      public AutorModel(string Nombre, string ApellidoP, string ApellidoM) {
         this.Nombre = Nombre;
         this.ApellidoP = ApellidoP;
         this.ApellidoM = ApellidoM;
         this.FechaActual = DateTime.Now;
      }
   }
}

/Views/Home/Index.cshtml

@model Razor.Models.AutorModel
@using Razor.Helpers

<h2>@ViewBag.Message</h2>
<p>
   @*Esto es un comentario en razor*@
   Este post fue creado por @Model.Nombre @Model.ApellidoP<br />
   el @Formateador.FormatoFecha(Model.FechaActual)
   <br /><br />
   Actualizar datos del Autor:<br />
   @Html.TextBoxFor(m => m.Nombre)<br />
   @Html.TextBoxFor(m => m.ApellidoP)<br />
   @Html.TextBoxFor(m => m.ApellidoM)<br />
</p>

Al ejecutar veremos el siguiente resultado:

Con estos ejemplos iniciales de como usar razor nos despedimos hasta el siguiente post, donde veremos la forma de conbinar nuestro codigo html con razor y C# para poder generar codigo HTML dinámicamente, hasta la próxima.

Las fuentes para este ejemplo puden descargarlas aqui.

Nota:
Se eliminaron del proyecto (ya que no eran necesarios para el ejemplo) los siguientes archivos: /Controllers/AccountController.cs.
/Models/AccountModels.cs.
/Views/Shared/_LogOnPartial.cshtml
/Views/Account/ (carpeta).
Ademas se modificó el archivo "/Views/Shared/_Layout.cshtml" cambiando "<div id="logindisplay"> @Html.Partial("_LogOnPartial") </div>" por "<div id="logindisplay"> &nbsp; </div>".

Seguir leyendo →

Post 8. Intercambio de Datos en MVC - Valores desde controlador hacia la vista (II)

En el post anterior vimos como enviar datos desde el controlador hacia la vista utilizando ViewData y ViewBag, en esta ocación mostraremos otra forma de hacerlo:

Enviar datos a la vista a través de @Model

Esta nueva forma es la forma mas práctica y eficiente de enviar datos hacia el controlador y ofrece muchas más ventajas que ViewData y ViewBag. Pera esto debemos definir una Clase la cual servirá como modelo para nuestra vista.

Definimos una clase llamada Smartphone (para cuestiones practicas lo crearemos dentro del mismo controlador, mas adelante veremos el mejor lugar para ubicarlo):

public class SmartPhone{
   public string Marca {get; set;}
   public string Modelo {get; set;}
   public int Stock {get; set;}
   public decimal Precio {get; set;}
}

Dentro de nuestro controlador crearemos una nueva instancia de la clase SmartPhone y le agregaremos los datos traídos desde la url, luego lo enviaremos hacia nuestra vista con el comando View():

public class CatalogoController : Controller
{
   public ActionResult Smartphones(String marca, String modelo)
   {
      SmartPhone phone = new SmartPhone();
      phone.Marca = marca;
      phone.Modelo = modelo;
      return View(phone);
   }
}

Ahora para poder mostrar los datos desde nuestra vista debemos el
Dentro de la vista agregamos lo siguiente:

@model IntercambioDatos.Controllers.SmartPhone
<!DOCTYPE html>
<html>
<head>
    <title>Smartphones</title>
</head>
<body>
Prueba usando un Model<br />
Marca: @Model.Marca<br />
Modelo: @Model.Modelo<br />
Precio: @Model.Precio<br />
Stock: @Model.Stock
</body>
</html>

Ahora ejecutamos y mostramos.

Podemos ver que los datos de nuestro modelo se pintaron en nuestra vista y aparentemente de la misma manera que un ViewBag. Las (grandes) ventajas las veremos cuando enviemos datos de la vista hacia el controlador.

Nota: a pesar qde que no colocamos el valor para los atributos Precio y Stock, se mostraron 0, porque ese es el valor por defecto para esos  tipos de datos (int y decimal).

Recuerden que las fuentes de este post podrán ser descargadas aqui.
Nos vemos en el siguiente post

Seguir leyendo →

Post 7. Intercambio de Datos en MVC - Valores desde controlador hacia la vista (I)

En el post anterior mostramos como obtener datos desde la url hacia el controlador, en esta ocasión mostraremos como enviar datos desde el controlador hacia la vista.

Esto nos sirve por ejemplo, cuando desde el controlador accedemos a base de datos y obtenemos una listado de clientes y obviamente deseamos mostrar estos datos en una grilla de nuestra vista.

Pues para enviar datos desde el controlador hacia nuestra vista existe dos maneras:

Enviar datos a la vista a través de ViewData y ViewBag

A pesar de que son dos formas de enviar datos en realidad son lo mismo y lo mostraremos mas adelante.

Utilizando el ejemplo del post anterior mostraremos los valores de las variables marca y modelo dentro de nuestra vista, en primer lugar utilizaremos ViewData y lo hacemos de la siguiente manera:

public class CatalogoController : Controller {
     public ActionResult Smartphones(String marca, String modelo)
    {
       ViewData["Marca"] = marca;
       ViewData["Modelo"] = modelo;
        return View();
    }
 }

Una vez colocados los valores a nuestros ViewData podemos acceder a su valor desde la vista de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
    <title>Smartphones</title>
</head>
<body>
Marca: @ViewData["Marca"]<br />
Modelo: @ViewData["Modelo"]
</body>
</html>

Ahora mostraremos los mismos datos pero utilizando ViewBag:

public class CatalogoController : Controller {
     public ActionResult Smartphones(String marca, String modelo)
    {
       ViewBag.Marca = marca;
       ViewBag.Modelo = modelo;
        return View();
    }
 }

<!DOCTYPE html>
<html>
<head>
    <title>Smartphones</title>
</head>
<body>
Prueba usando ViewBag:<br />
Marca: @ViewBag.Marca<br />
Modelo: @ViewBag.Modelo
</body>
</html>

Vemos que el resultado es el mismo que si usáramos un ViewData. Ahora modificaremos la vista para mostrar los datos utilizando ViewData pero no modificaremos el ViewBag del controlador, ejecutemos y veamos que es lo que pasa:

public class CatalogoController : Controller {
    public ActionResult Smartphones(String marca, String modelo)
    {
       ViewData["Marca"] = marca;
       ViewData["Modelo"] = modelo;
        return View();
    }
 }

<!DOCTYPE html>
<html>
<head>
    <title>Smartphones</title>
</head>
<body>
Prueba usando ViewData en el controlador y ViewBag en la vista:<br />
Marca: @ViewBag.Marca<br />
Modelo: @ViewBag.Modelo
</body>
</html>

Podemos ver que aunque utilicemos ViewBag en el controlador y ViewData en la vista, nuestra variables se muestran sin problema (usarlo en viceversa también funciona), por ello podemos decir que ambas opciones son una sola (no son realmente lo mismo pero podemos usar cualquiera de las dos y funcionarán igual).

En el siguiente post veremos otra forma de enviar los datos del controlador hacia la vista usando modelos.

Recuerden que pueden descargar las fuentes de este post aquí

Seguir leyendo →

Post 6. Intercambio de Datos en MVC - Valores en URL

En este post revisaremos los distintos modos en que podemos intercambiar datos en MVC, ya sea valores de la url, valores del controlador y valores de la vista.

Intercambio de Valores de URL
Como vimos en el post anterior, podemos definir distintas reglas para manejar nuestras url, ya habíamos dicho que la regla debería contener al menos el valor para el controlador y la vista (ya sea en la misma ruta o con valores por defecto), pero adicionalmente nuestra ruta contenía algunas variables que seguramente necesitaríamos para poder mostrar determinada información.

Recordemos uno de los ejemplos dados:
   http://webcelulares.com/Catalogo/Smartphones/LG/DG952
En esta url corresponde a la regla "{controller}/{action}/{marca}/{modelo}", en la cual nuestro controlador es Catalogo y nuestra vista es Smartphones pero las variables marca y modelo seguramente son datos necesarios para que la web muestre los detalles de ese smartphone.

Entonces ¿cómo puedo obtener los valores de esas variables?, pues lo hacemos desde nuestro controlador. para ello definimos las variables como parámetros en la acción del controlador:
(Crearemos un proyecto MVC3 vacío)

Agregamos la ruta a nuestro global.asax, el controlador Catalogo y la acción Smartphones:

Dentro del controlador Catalogo debemos tener lo siguiente:

Aquí debemos tener en cuenta lo siguiente:

public class CatalagoController : Controller {
    public ActionResult Smartphones(String marca, String modelo)
    {
        return View();
    }
}

Ahora agregamos un punto de interrupción (F9) en la linea return View(); y ejecutamos.
Al ejecutar mostrará un error pues la url que se muestra no cumple con nuestra regla, debemos ingresar a la ruta: localhost:xxx/Catalogo/Smartphones/LG/D625:

• Los nombres de los parámetros deben ser iguales a los nombres definidos en nuestra regla. MVC no diferencia entre mayúsculas y minúsculas. Cambiamos en nombre del parámetro marca a marcaTelefono y ya no es reconocido, también cambiamos el nombre del parametro modelo a Modelo, pero éste aun es reconocido.

• MVC hará un parseo del valor en la url al tipo de dato definido en la acción, si el tipo de dato no corresponde ocurrirá un error.

• Podemos definir más variables como parámetro a en la url sin necesidad de registrarlos en el global.asax, estos deberán ser enviado como un querystring en la url.

Ingresamos la url: http://localhost:8010/Catalogo/Smartphones/LG/D625?color=black&version=4.2.2

• Podemos definir valores por defecto para cada una de las variables, en caso sea necesario.

Ingresamos la url: http://localhost:8010/Catalogo/Smartphones/LG/D625, podemos observar que al no enviarle valores a los parámetros, estos no tienen valor null, sino el valor por defecto.

De esta manera es que podemos capturar los datos de la url para ser utilizados en nuestra aplicación.
Pueden descargar este proyecto haciendo clic aqui
Hasta el siguiente post!!.

Seguir leyendo →

Post5. Reglas de ruteo

Una de las ventajas que nos da MVC con respecto a WebForms (aspx) es que podemos generar url semánticas o mejor conocidas como url amigables, para ver que es lo que significa veamos el siguiente ejemplo:

Url normal (Aspx):
http://webcelulares.com/catalogo.aspx?producto=smartphones&marca=lg&modelo=DG952

Url amigable (MVC):
http://webcelulares.com/Catalogo/Smartphones/LG/DG952

Ambas urls mostrarían la misma página, pero se puede decir que la segunda se ve mas simple o mas fácil de recordar, esto es una ventaja no solo para los usuarios sino que los buscadores que podrán indexar mejor este tipo de urls.

La ruta por defecto en MVC es dela siguiente forma:
http://servidor/Controlador/Vista

Y podemos ver y modificar esta estructura en el archivo global.asax en la función RegisterRoutes:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default", // Route name
        "{controller}/{action}/{id}", // URL with parameters
   new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
    );
}

Analizaremos las dos lineas de código que posee esta función.

routes.IgnoreRoute( "{resource}.axd/{*pathInfo}" );

Esta linea indica que debemos ignorar las urls con extensión axd, los cuales son archivos generados por el mismo punto net para el manejo de urls.

routes.MapRoute(
        "Default", // Route name
        "{controller}/{action}/{id}", //URL with parameters
    new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
    );
}

En esta linea agregamos una nueva regla de ruteo para las url. En este caso le indicamos que la ruta se llama "Default" y que posee la forma estructura controlador/accion/id, pero no solo eso, tambien nos indica que la variable id es del tipo opcional, el valor por defecto para las variables action y controller, en caso no se coloquen, son "Index" y "Home" respectivamente.

Nuevamente mediante ejemplos veremos que url coinciden con esta regla:

URL	Compatible	Observación
www.midominio.com	si	Tomará los valores por defecto para controller y action
www.midominio.com/Catalogo	si	Tomará el valor por defecto para action
www.midominio.com/Catalogo /Smartphones	si
www.midominio.com/Catalogo /Smartphones/LG	no	Tomará LG como valor para la variable {id} declarada como tipo entero (en el controlador), lo cual mostrará un error de tipo de dato
www.midominio.com/Catalogo /Smartphones/23	si	Todas las variables poseen valor

Podemos definir en este archivo la estructura de nuestras url, en el caso que deseemos personalizarlos, una de las acciones más comunes es modificar la "pagina de inicio", si deseamos que se redireccione a la pagina de ultimas noticias por ejemplo:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default",
        "{controller}/{action}",
        new { controller = "Noticias", action = "Inicio"}
    );
}

Si deseamos que nuestra url sea de la estructura
http://webcelulares.com/Catalogo/Smartphones/LG/DG952

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default",
        "{controller}/{action}/{marca}/{modelo}",
        new { controller = "Noticias", action = "Inicio"}
    );
}

http://mibiblioteca.com/Comedia/lb-2466346

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default",
        "{genero}/lb-{idLibro}",
        new { controller = "Biblioteca", action = "Inicio"}
    );
}

Notas:

• Siempre debemos especificar el valor de nuestro controlador y vista, sino es directamente en la estructura de la url, debemos establecer sus valores por defecto.
• Podemos establecer más de una ruta en para nuestra web, cuando ingresemos MVC verificará una por una si la url ingresada corresponde a alguna de las rutas (en el orden en que fueron registrados), solo en caso no sea compatible con ninguna se mostrará un error 404.

Eso es todo por ahora, hasta la próxima.

Seguir leyendo →