01 Noviembre 2011 ~ 17 Comments

Razor

webmatrix modeEl lenguaje de Razor es un lenguaje de programación sencillo para incrustar código que se ejecutará en el servidor de una página web. En una página web que utiliza Razor, hay dos tipos de contenidos: El código del cliente y el código del servidor. El contenido del cliente son las cosas de las que estamos acostumbrados en las páginas web: HTML, información de estilo CSS, y script de cliente, como JavaScript y texto.

Razor nos permite agregar el código del servidor dentro del contenido del cliente. Si no hay servidor de código en la página, el servidor se ejecuta el código en primer lugar, antes de enviar la página al navegador. Razor puede realizar tareas que pueden ser mucho más complejas de lo que podría hacerse solo con código Html, por ejemplo acceder a consultar sobre la base de datos. Lo más importante es entender que el código dinámico finalmente genera código Html sobre la marcha y luego lo envia al navegador, junto con todo el código HTML estático que la página ya contenía. Desde la perspectiva del cliente, el código del Razor no es diferente a cualquier otro código Html.

En ASP.NET las páginas web que incluyen Razor tiene una extensión de archivo especial (. CShtml o VBhtml.). El servidor reconoce estas extensiones, se ejecuta el código que está marcado con Razor, y luego envía la página al navegador.

El lenguaje Razor se basa en una tecnología de Microsoft llamada ASP.NET, que a su vez se basa en la plataforma Microsoft .Net Framework. .Net es un framework grande, amplía la programación de Microsoft para el desarrollo de prácticamente cualquier tipo de aplicación informática. ASP.NET es la parte del .Net Framework, que está específicamente diseñado para la creación de aplicaciones web. Los desarrolladores han utilizado ASP.NET para crear muchos de los sitios web más grandes y de mayor tráfico del mundo. (Cada vez que veas la extensión .Aspx como parte de la URL de un sitio, sabrás que el sitio fue creado con ASP.NET.)

Razor le da todo el poder de ASP.NET, pero con una sintaxis simplificada que hace las cosas más fáciles si eres principiante y te hace más productivo si eres es un experto. A pesar de que esta sintaxis es muy simple de usar, al estar ligado con ASP.NET significa que a medida que tus sitios o aplicaciones web se vuelvan más sofisticados, tendrás todo el poder del framework .Net disponible.

Razor - asp.net  framework

ASP.NET utiliza el paradigma de programación orientada a objetos. Empecemos hablando de las clases. La clase es la definición o plantilla para un objeto. Por ejemplo, una aplicación podría contener una clase -cliente- que define las propiedades y los métodos de cualquier objeto del cliente.

Cuando la aplicación necesita para trabajar con información real de los clientes, se crea una instancia de la clase cliente, en este punto pasa a ser llamada como un objeto cliente. Cada cliente es una instancia independiente de la clase Cliente. Cada instancia soporta las mismas propiedades y métodos, pero los valores de propiedad para cada instancia son generalmente diferentes, porque cada cliente es un único objeto. En un objeto cliente, la propiedad Nombre podría ser “Alan Moore”, en otro objeto cliente, la propiedad Nombre podría ser “Isaac Newton”. Cualquier página web individuale en el sitio es un objeto Page que es una instancia de la clase Page. Un botón en la página es un objeto de botón que es una instancia de la clase Button, y así sucesivamente. Cada instancia tiene sus propias características, pero todos se basan en lo que se especifica en la definición de la clase del objeto.

Anteriormente detallamos un ejemplo básico de cómo crear una página Web y cómo se puede agregar el código Razor dentro del código Html. Ahora aprenderemos los conceptos básicos de la escritura de código de Razor, es decir, las reglas de este lenguaje de programación.

Si ya tienes experiencia con programación (especialmente si has utilizado C, C++, C#, Visual Basic o JavaScript), esto te resultará familiar.

Combinando HTML y Razor

Con frecuencia será necesario combinar Razor, con el texto y las etiquetas Html dentro de los bloques de código. Cuando esto suceda, ASP.net es capaz de decidir la diferencia entre ellos. Estas son las formas más comunes de combinar el contenido.

Podemos introducir líneas que contienen Html o Razor. Este método funciona si se tiene Razor o Html (o ambos), pero no de texto si este no está contenido en las etiquetas Html.

image

Podemos introducir líneas individuales que contienen texto sin formato mediante la @: (carácter @ seguido de dos puntos). Estas líneas pueden contener texto sin formato y una mezcla de Html y Razor.

image

También es posible escribir varias líneas que contienen mezclas de texto sin formato y Razor usando el elemento <text>. Esto puede ser usado como el ejemplo anterior @:

image

Comentarios en Razor

Los comentarios nos permiten dejar notas, es especialmente útil cuando luego de un tiempo tienes que revisar tú código o debes compartirlo con otra persona. ¡Leer código por más sencillo que sea nunca es tarea fácil! Los comentarios en Razor se hacen de la siguiente forma:

image

Agregando código haciendo uso de @

Para agregar código Razor a nuestra vista lo debemos hacer anteponiendo un carácter @ el cual el interprete del servidor usará como el carácter de escape para determinar cuando tiene código que debe ejecutar.

image

Variables

Una variable es un objeto con nombre que se utiliza para almacenar datos. Podemos nombrar a las variables de cualquier forma, pero el nombre debe comenzar por un carácter alfabético y no puede contener espacios en blanco o reservados. En los ejemplos anteriores muchas veces has visto la palabra –var- y luego un nombre. ¡Declarar una variables es así de sencillo!

Variables y tipos de datos

Una variable puede tener un tipo de datos, lo que indica qué datos se almacenarán en la variable. Podemos tener variables de cadena que almacenan valores de cadena (como “Hola Mundo”), variables de tipo entero que almacenan un número entero de valores (por ejemplo, 31 o 79), y las variables de fecha en las que almacenamos los valores de fecha en una variedad de formatos (como 4/12/2010 o marzo de 2009). Hay muchos otros tipos de datos que se pueden utilizar. Sin embargo, por lo general no es necesario especificar el tipo de una variable. La mayoría de las veces, ASP.net puede determinar el tipo en función de cómo los datos de la variable están siendo utilizados.

image

 

Convertir tipos de datos

A pesar de que ASP.net usualmente permite determinar el tipo de datos de forma automática, en ocasiones no se puede lograr. Por lo tanto, puede ser necesario ayudar un poco mediante la realización de una conversión explícita.

También en ocasiones puede ser necesario convertir una variable a un tipo diferente. El caso más común es el de convertir una cadena a otro tipo, como a un número entero o fecha. El siguiente ejemplo muestra un caso típico en el que se debe convertir una cadena en un número.

image

Como regla general, la entrada del usuario viene en forma de cadenas. Incluso si solicita al usuario que introduzca un número, los datos están en formato de cadena. Por lo tanto, se debe convertir la cadena en un número. En el ejemplo anterior, si se intenta realizar operaciones aritméticas con los valores sin convertirlos, se obtendrá un mensaje de error al intentar sumar dos cadenas que se almacenaran en un total tipo entero.

Operadores

Un operador es una palabra clave o un carácter que le dice a ASP.net los comandos para llevar a cabo en una expresión. Como en la mayoría de los lenguajes de programación Razor es compatible con muchos operadores, pero sólo es necesario reconocer algunos de los más comunes.

image

Rutas y archivos

Uno de los enredos que tenemos comúnmente cuando trabajamos en web es la diferencia que existe entre las rutas de los archivos localmente y la que deben tener cuando publicamos el proyecto en web. No debemos enlazar nuestra ruta física en los links o las fuentes de los recursos de imagen, css o javascript. En la imagen siguiente por ejemplo notamos que todos los archivos se encuentran en la ruta C:\Users\Judavi\Documents\MyWebSites\Bakery\ en un servidor web, nuestros sitios también tiene una estructura de carpetas virtuales que corresponde a las carpetas físicas en el sitio. De manera predeterminada, los nombres de carpetas virtuales son los mismos que los nombres de las carpetas físicas. La raíz virtual se representa como una barra (/), al igual que la carpeta raíz del disco C: del equipo está representado por una barra invertida (\).

image

En este caso basándonos en la imagen podríamos decir que el archivo Order.cshtml estaría ubicado así:

Ruta virtual: /Order.cshtml

Ruta física: C:\Users\Judavi\Documents\MyWebSites\Bakery\Order.cshtml

Ahora bien, a veces es necesario hacer referencia a la ruta física y, a veces un camino virtual, dependiendo de lo que los objetos que estés trabajando. ASP.net nos ofrece estas herramientas para trabajar con archivos y rutas de las carpetas en el código: el operador ~, el método Server.MapPath, y el método Href.

En Razor, para especificar la ruta raíz virtual de las carpetas o archivos, debemos utilizar el operador ~. Esto es útil porque podemos migrar el sitio a una carpeta o ubicación diferente sin romper los enlaces en el código.

image

El método Server.MapPath convierte una ruta virtual (como /default.cshtml) en una ruta absoluta física (por ejemplo, C:\MyWebSites\default.cshtml). Este método se utiliza para tareas que requieren una ruta física completa, como leer o escribir un archivo de texto en el servidor web.

image

El método del objeto Href convierte los caminos que se crea en el Razor a las rutas que el navegador entiende. (El navegador no puede entender el operador ~, porque eso es estrictamente un operador de ASP.net) Debemos utilizar el método Href para crear rutas a los recursos como archivos de imagen, otras páginas web, y los archivos CSS. Por ejemplo, para los atributos de las etiquetas <img>, <link> y <a>.

image

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • Add to favorites
  • Live

17 Responses to “Razor”

  1. Ovidio Rafael 4 Diciembre 2011 at 12:39 am Permalink

    Muy buena explicación. gracias

  2. Kevin Andres 5 Diciembre 2011 at 10:30 pm Permalink

    Excelente explicación cada dia estoy aprendiendo mas de Webmatrix y razor, me pareció excelente también la exposición en medellin del tema en el codecamp(Una duda que significa en sí la linea de código If(Ispost) Entiendo el condicional If pero no se ha que se refiere Ispost) Gracias!!!!

  3. Usuario Web 7 Diciembre 2011 at 9:23 pm Permalink

    Es una funcion que indica si la pagina esta haciendo un Postback hacia el servidor, es decir, si ya se habia descargado en el cliente y mediante la interaccion del usuario (presionar un boton, etc) requiere regresar de nuevo al servidor para descargar nueva informacion.

  4. Arturo 8 Diciembre 2011 at 2:19 pm Permalink

    Esta muy entendido, voy aprendiendo.

  5. adan 14 Diciembre 2011 at 8:11 am Permalink

    Como se hace para generar un número aleatorio…?

  6. judavi 14 Diciembre 2011 at 10:05 am Permalink

    Recuerda que puedes usar código C# por lo cual podrías hacer algo como :

    @{
    Random r = new Random();
    int aleatorio = r.Next();

    }

  7. Andres 26 Enero 2012 at 12:42 am Permalink

    que más hay que instalar para programar en razor ??

  8. Bryan 31 Enero 2012 at 9:53 am Permalink

    Soy novato en esto de la programación y estoy aprendiendo algo de Webmatrix y necesito hacer simplemente una consulta en una base de datos con Razor y mostrarla posteriormente, cómo lo puedo hacer?

    Muchas gracais

  9. Andres 5 Marzo 2012 at 12:34 pm Permalink

    Excelente Post Amigo!

  10. Jose de los Santos 15 Marzo 2012 at 9:12 pm Permalink

    Esta herramienta me parece monstruosa, soy usuario fiel de php y mysql, pero esto que nos presentan es del carajo…

    Ya hasta me da miedo seguir leyendo, de pronto traiciono a php y mysql.

    Por fin entendieron que era lo que se necesitaba.

    Excelente!!!!

  11. judavi 15 Marzo 2012 at 9:15 pm Permalink

    Jose con webmatrix no vas a traicionar a PHP o MySQL!! Dentro de Webmatrix puedes usarlos a ambos sin ningún problema!!

  12. judavi 15 Marzo 2012 at 9:15 pm Permalink

    Gracias por tu comentario!

  13. jsola 21 Abril 2012 at 11:51 pm Permalink

    esta buenísimo el tuto…

    solo un detalle,
    en la sección “Comentarios en Razor” sale un pantallaso en la cual abres comentario con “@//” pero si no agregas como “@{/” no funciona XD, y cierras con “}”

    sin comillas obviamente XD, esque nome avi dado cuenta :/
    bueno en el resto si salen todos buenos.

  14. SEO 4 Julio 2012 at 12:03 am Permalink

    Muy bueno, si !

  15. geovany 18 Marzo 2014 at 5:34 pm Permalink

    Gracias por compartir tu conocimiento y relagarnos parte de tu tiempo al crear estos Post. sinceramente mis respetos brother.


Vamos! Deja un comentario :)