Presentación de ASP.NET Web Pages: conceptos básicos de programación

  • Artículo

por Tom FitzMacken

En este tutorial se proporciona información general sobre cómo programar en ASP.NET Web Pages con sintaxis de Razor.

Temas que se abordarán:

  • La sintaxis básica de "Razor" que utiliza para programar en ASP.NET Web Pages.
  • Algo de C# básico, que es el lenguaje de programación que va a utilizar.
  • Algunos conceptos de programación fundamentales para Web Pages.
  • Cómo instalar paquetes (componentes que contienen código precompilado) para utilizarlos con el sitio.
  • Cómo usar asistentes para realizar tareas de programación comunes.

Características y tecnologías descritas:

  • NuGet y el administrador de paquetes.
  • Asistente Gravatar.

Este tutorial es principalmente un ejercicio de introducción a la sintaxis de programación que va a utilizar para ASP.NET Web Pages. Obtendrá información sobre la sintaxis y código de Razor escritos en el lenguaje de programación de C#. Ha echado un vistazo a esta sintaxis en el tutorial anterior; en este tutorial explicaremos más detalladamente la sintaxis.

Prometemos que este tutorial supondrá la mayor parte de la programación que verá en un solo tutorial y que es el único tutorial que trata solo de programación. En los tutoriales restantes de este conjunto, va a crear páginas que hacen cosas interesantes.

También tendrá información sobre los asistentes. Un asistente es un componente (un fragmento de código empaquetado) que puede agregar a una página. El asistente realiza un trabajo para usted que, de lo contrario, podría ser tedioso o complejo de hacer a mano.

Creación de una página para jugar con Razor

En esta sección, jugará un poco con Razor para que pueda obtener una idea de la sintaxis básica.

Inicie WebMatrix si aún no está en ejecución. Usará el sitio web creado en el tutorial anterior (Introducción a las páginas web). Para volver a abrirlo, haga clic en Mis sitios y elija WebPageMovies:

Screenshot of the Web Matrix start screen showing the Open Site options and My Sites highlighted with a red rectangle.

Seleccione el área de trabajo Archivos.

En la cinta de opciones, haga clic en Nuevo para crear una página. Seleccione CSHTML y asigne a la nueva página el nombre TestRazor.cshtml.

Haga clic en OK.

Copie lo siguiente en el archivo, reemplazando todo lo que ya existe.

Nota:

Al copiar código o marcado de los ejemplos en una página, es posible que la sangría y la alineación no sean las mismas que en el tutorial. Sin embargo, la sangría y la alineación no afectan al modo en que se ejecuta el código.

@{
   // Working with numbers
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings)
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects
   var rightNow = DateTime.Now;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

    <div>
      <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
      <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
      <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
    </div>

    <div>
      <p>The technology is @technology, and the product is @product.</p>
      <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
   </div>

   <div>
     <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
   </div>

  </form>
</body>
</html>

Examen de la página de ejemplo

La mayor parte de lo que ve es HTML normal. Sin embargo, en la parte superior aparece este bloque de código:

@{
   // Working with numbers.
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings).
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects.
   var rightNow = DateTime.Now;
}

Observe los siguientes aspectos sobre este bloque de código:

  • El carácter @ indica a ASP.NET que lo siguiente es código de Razor y no HTML. ASP.NET tratará todo lo que aparece después del carácter @ como código hasta se vuelva a encontrar con HTML. (En este caso, es el elemento <!DOCTYPE>.
  • Las llaves ( { y } ) encierran un bloque de código de Razor si el código tiene más de una línea. Las llaves indican a ASP.NET dónde comienza y termina el código de ese bloque.
  • Los caracteres // marcan un comentario, es decir, una parte del código que no se ejecutará.
  • Cada instrucción tiene que terminar con un punto y coma (;). (Pero no los comentarios.)
  • Puede almacenar valores en variables, que crea (declara) con la palabra clave var. Cuando crea una variable, le asigna un nombre, que puede incluir letras, números y subrayado (_). Los nombres de variable no pueden empezar por un número y no pueden utilizar el nombre de una palabra clave de programación (como var).
  • Incluya cadenas de caracteres (como "ASP.NET" y "Web Pages") entre comillas. (Deben ser comillas dobles.) Los números no se escriben entre comillas.
  • Los espacios en blanco fuera de las comillas no tienen importancia. Los saltos de línea no suelen tener importancia; la excepción es que no se puede dividir una cadena entre comillas entre líneas. La sangría y la alineación no tienen importancia.

Algo que no es obvio en este ejemplo es que todo el código distingue mayúsculas de minúsculas. Esto significa que la variable TheSum es una variable diferente a las variables que podrían llamarse theSum o thesum. Del mismo modo, var es una palabra clave, pero Var no lo es.

Objetos, propiedades y métodos

Está además la expresión DateTime.Now. En pocas palabras, DateTime es un objeto. Un objeto es algo con lo que se puede programar: una página, un cuadro de texto, un archivo, una imagen, una solicitud web, un mensaje de correo electrónico, un registro de cliente, etc. Los objetos tienen una o varias propiedades que describen sus características. Un objeto de cuadro de texto tiene una propiedad Text (entre otras), un objeto de solicitud tiene una propiedad Url (y otras), un mensaje de correo electrónico tiene una propiedad From y una propiedad To, etc. Los objetos también tienen métodos que son los "verbos" que pueden realizar. Va a trabajar mucho con objetos.

Como puede ver en el ejemplo, DateTime es un objeto que le permite programar fechas y horas. Tiene una propiedad denominada Now que devuelve la fecha y hora actuales.

Uso de código para representar el marcado en la página

En el cuerpo de la página, observe lo siguiente:

<div>
  <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
  <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
  <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>

<div>
  <p>The technology is @technology, and the product is @product.</p>
  <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>

<div>
  <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>

De nuevo, el carácter @ indica a ASP.NET que lo siguiente es código y no HTML. En el marcado puede agregar @ seguido de una expresión de código, y ASP.NET representará el valor de esa expresión justo entonces. En el ejemplo, @a representará el valor de la variable denominada a, @product representará lo que haya en la variable denominada product, etc.

Sin embargo, no se limita a las variables. En algunas instancias aquí, el carácter @ precede a una expresión:

  • @(a*b) representa el producto de lo que haya en las variables a y b. (El operador * significa multiplicación.)
  • @(technology + " " + product) representa los valores de la tecnología de variables y el producto después de concatenarlos y agregar un espacio entre ellos. El operador (+) para concatenar cadenas es el mismo que el operador para sumar números. ASP.NET normalmente puede indicar si está trabajando con números o con cadenas y hace lo que corresponda con el operador +.
  • @Request.Url representa la propiedad Url del objeto Request. El objeto Request contiene información sobre la solicitud actual del explorador y, por supuesto, la propiedad Url contiene la dirección URL de esa solicitud actual.

El ejemplo también está diseñado para mostrarle que puede trabajar de diferentes maneras. Puede realizar cálculos en el bloque de código de la parte superior, colocar los resultados en una variable y representar luego la variable en el marcado. O bien, puede realizar cálculos en una expresión justo en el marcado. El enfoque que utilice depende de lo que esté haciendo y, en cierta medida, de sus propias preferencias.

Visualización del código en acción

Haga clic con el botón derecho en el nombre del archivo y elija Iniciar en el explorador. Verá la página en el explorador con todos los valores y expresiones resueltos en la página.

Screenshot of the Test Razor page running in a browser window, showing three boxes with the values and expressions resolved.

Examine el origen en el explorador.

Screenshot of the Test Razor page source, comparing the page source to the rendered web browser output.

Como esperaba de su experiencia en el tutorial anterior, no hay código de Razor en la página. Todo lo que ve son los valores de visualización reales. Al ejecutar una página, realmente está realizando una solicitud al servidor web integrado en WebMatrix. Cuando se recibe la solicitud, ASP.NET resuelve todos los valores y expresiones y representa sus valores en la página. A continuación, envía la página al explorador.

Sugerencia

Razor y C#

Hasta ahora hemos dicho que está trabajando con la sintaxis de Razor. Esto es cierto, pero no es toda la historia. El lenguaje de programación real que usa se denomina C#. Microsoft creó C# hace más de una década y se ha convertido en uno de los principales lenguajes de programación para crear aplicaciones de Windows. Todas las reglas que ha visto sobre cómo asignar un nombre a una variable y cómo crear instrucciones, etc., son en realidad todas ellas reglas del lenguaje C#.

Razor hace referencia más específicamente al pequeño conjunto de convenciones para insertar este código en una página. Por ejemplo, la convención de usar @ para marcar código en la página y usar @{ } para insertar un bloque de código es el aspecto de Razor de una página. Los asistentes también se consideran parte de Razor. La sintaxis de Razor se usa en otras partes que solo en ASP.NET Web Pages. (Por ejemplo, también se utiliza en las vistas de ASP.NET MVC.)

Mencionamos esto porque si busca información sobre la programación de ASP.NET Web Pages, encontrará muchas referencias a Razor. Sin embargo, muchas de esas referencias no se aplican a lo que está haciendo y, por tanto, pueden resultar confusas. De hecho, muchas de las preguntas de programación van a tratar sobre cómo trabajar con C# o con ASP.NET. Por lo tanto, si busca información específica sobre Razor, es posible que no encuentre las respuestas que necesita.

Incorporación de cierta lógica condicional

Una de las excelentes características sobre el uso de código en una página es que puede cambiar lo que sucede en función de diferentes condiciones. En esta parte del tutorial, jugará con algunas maneras de cambiar lo que se muestra en la página.

El ejemplo será sencillo y algo artificiosa para que podamos concentrarnos en la lógica condicional. La página que va a crear hará lo siguiente:

  • Mostrar texto diferente en la página en función de si es la primera vez que se muestra la página o si ha hecho clic en un botón para enviar la página. Será la primera prueba condicional.
  • Mostrar el mensaje solo si se pasa un valor determinado en la cadena de consulta de la dirección URL (http://...?show=true). Esta será la segunda prueba condicional.

En WebMatrix, cree una página y asígnele el nombre TestRazorPart2.cshtml. (En la cinta de opciones, haga clic en Nuevo, elija CSHTML, asigne el nombre al archivo y haga clic en Aceptar.)

Reemplace el contenido de esta página por lo siguiente:

@{
   var message = "This is the first time you've requested the page.";
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax - Part 2</title>
    <meta charset="utf-8" />
    <style>
      body {font-family:Verdana; margin-left:50px; margin-top:50px;}
      div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    </style>
  </head>
  <body>
  <h1>Testing Razor Syntax - Part 2</h1>
  <form method="post">
    <div>
      <p>@message</p>
      <p><input type="submit" value="Submit" /></p>
  </div>
  </form>
</body>
</html>

El bloque de código de la parte superior inicializa una variable denominada message con texto. En el cuerpo de la página, el contenido de la variable message se muestra dentro de un elemento <p>. El marcado también contiene un elemento de <entrada> para crear un botón Enviar.

Ejecute la página para ver cómo funciona ahora. Por ahora, es básicamente una página estática, incluso si hace clic en el botón Enviar.

Vuelva a WebMatrix. Dentro del bloque de código, agregue el código resaltado siguiente después de la línea que inicializa el mensaje:

@{
    var message = "This is the first time you've requested the page.";

    if(IsPost) {
        message = "Now you've submitted the page.";
    }
}

Bloque if { }

Lo que acaba de agregar ha sido una condición if. En el código, la condición if tiene una estructura similar a la siguiente:

if(some condition){
    One or more statements here that run if the condition is true;
}

La condición que se va a comprobar está entre paréntesis. Debe ser un valor o una expresión que devuelva true o false. Si la condición es true, ASP.NET ejecuta la instrucción o instrucciones que están dentro de las llaves. (Estas son la parte then de la lógica if-then.) Si la condición es false, se omite el bloque de código.

Estos son algunos ejemplos de condiciones que puede probar en una instrucción if:

if(currentValue > 12) { ... }

if(dueDate <= DateTime.Today) { ... }

if(IsDone == true) { ... }

if(IsPost) { ... }

if(!IsPost) { ... }

if(a != 0) { ... }

if(fileProcessingIsDone != true && displayMessage == false) { ... }

Puede probar variables con valores o expresiones con expresiones mediante un operador lógico o un operador de comparación: igual a (==), mayor que (>), menor que (<) o igual que (>=) y menor o igual que (<=). El operador != significa no igual a; por ejemplo, if(a != 0) significa si a no es igual a 0.

Nota:

Tenga en cuenta que el operador de comparación para es igual a (==) no es lo mismo que =. El operador = solo se usa para asignar valores (var a=2). Si combina estos operadores, obtendrá un error o algunos resultados extraños.

Para probar si algo es true, la sintaxis completa es if(IsDone == true). Pero también puede usar el método abreviado if(IsDone). Si no hay ningún operador de comparación, ASP.NET supone que está realizando la prueba para obtener true.

El operador ! El operador por sí mismo significa un NOT lógico. Por ejemplo, la condición if(!IsPost) significa si IsPost no es true.

Puede combinar condiciones mediante un AND lógico (operador &&) u OR lógico (operador ||). Por ejemplo, la última de las condiciones if de los ejemplos anteriores significa si FileProcessingIsDone no está establecido en true AND displayMessage está establecido en false.

Bloque else

Una última cosa sobre los bloques if: un bloque if puede ir seguido de un bloque else. Un bloque else resulta útil si tiene que ejecutar código diferente cuando la condición sea false. A continuación, se muestra un ejemplo sencillo:

var message = "";
if(errorOccurred == true)
{
    message = "Sorry, an error occurred."; 
}
else
{
    message = "The process finished without errors!";
}

Verá algunos ejemplos en tutoriales posteriores de esta serie en los que el uso de un bloque else resulta útil.

Prueba de si la solicitud es un envío (publicación)

Aún hay más, pero vamos a volver al ejemplo, que tiene la condición if(IsPost){ ... }. IsPost es realmente una propiedad de la página actual. La primera vez que se solicita la página, IsPost devuelve false. Sin embargo, si hace clic en un botón o envía la página (es decir, la publica), IsPost devuelve true. Por lo tanto, IsPost le permite determinar si está tratando con un envío de formulario. (En términos de verbos HTTP, si la solicitud es una operación GET, IsPost devuelve false. Si la solicitud es una operación POST, IsPost devuelve true.) En un tutorial posterior, trabajará con formularios de entrada, donde esta prueba resulta especialmente útil.

Ejecute la página. Como esta es la primera vez que solicita la página, verá "Esta es la primera vez que ha solicitado la página". Esta cadena es el valor con el que inicializó la variable message. Hay una prueba if(IsPost), pero que devuelve false en este momento, por lo que el código dentro del bloque if no se ejecuta.

Haga clic en el botón Enviar. Se solicita de nuevo la página. Como antes, la variable message se establece en "Esta es la primera vez...". Pero esta vez, la prueba if(IsPost) devuelve true, por lo que se ejecuta el código dentro del bloque if. El código cambia el valor de la variable message por otro valor, que es lo que se representa en el marcado.

Ahora agregue una condición if en el marcado. Debajo del elemento <p> que contiene el botón Enviar, agregue el marcado siguiente:

@if(IsPost){
  <p>You submitted the page at @DateTime.Now</p>
}

Va a agregar código dentro del marcado, por lo que debe comenzar por @. A continuación, hay una prueba if similar a la agregada anteriormente en el bloque de código. Sin embargo, dentro de las llaves, va a agregar HTML normal, al menos es normal hasta que llega a @DateTime.Now. Esto es también código de Razor, por lo que de nuevo tiene que agregar @ delante de él.

Aquí la cuestión es que puede agregar condiciones en el bloque de código en la parte superior y en el marcado. Si usa una condición if en el cuerpo de la página, las líneas dentro del bloque pueden ser marcado o código. En ese caso, y como es true cada vez que mezcla el marcado y el código, debe usar @ para que le quede claro a ASP.NET dónde está el código.

Ejecute la página y haga clic en Enviar. Esta vez no solo verá un mensaje diferente cuando la envíe ("Ahora que ha enviado ..."), sino que verá un nuevo mensaje que muestra la fecha y hora.

Screenshot of the Test Razor 2 page running in the web browser with a timestamp message showing after page submission.

Prueba del valor de una cadena de consulta

Una prueba más. Esta vez, agregará un bloque if que prueba un valor denominado show que podría pasarse en la cadena de consulta. (Como este: http://localhost:43097/TestRazorPart2.cshtml?show=true) Cambiará la página para que el mensaje que ha visto ("Esta es la primera vez...", etc.) solo aparezca si el valor de show es true.

En la parte inferior (pero dentro) del bloque de código que se encuentra en la parte superior de la página, agregue lo siguiente:

var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
    showMessage = true;
}

El bloque de código completo tiene ahora un aspecto similar al ejemplo siguiente. (Recuerde que al copiar el código en la página, la sangría podría tener un aspecto diferente. Pero eso no afecta al modo en que se ejecuta el código.)

@{
   var message = "This is the first time you've requested the page.";

   if(IsPost) {
      message = "Now you've submitted the page.";
   }

   var showMessage = false;
   if(Request.QueryString["show"].AsBool() == true) {
     showMessage = true;
   }
}

El nuevo código de bloque inicializa una variable denominada showMessage en false. A continuación, realiza una prueba if para buscar un valor en la cadena de consulta. Cuando solicite por primera vez la página, tendrá una dirección URL como esta:

http://localhost:43097/TestRazorPart2.cshtml

El código determina si la dirección URL contiene una variable denominada show en la cadena de consulta, como esta versión de la dirección URL:

http://localhost:43097/TestRazorPart2.cshtml?show=true

La propia prueba examina la propiedad QueryString del objeto Request. Si la cadena de consulta contiene un elemento denominado show y si ese elemento está establecido en true, se ejecuta el bloque if y se establece la variable showMessage en true.

Como puede ver, aquí hay truco. Tal como lo indica el nombre, la cadena de consulta es una cadena. Sin embargo, solo puede realizar una prueba de true y false si el valor que está probando es un valor booleano (true/false). Para poder probar el valor de la variable show en la cadena de consulta, debe convertirla a un valor booleano. Eso es lo que hace el método AsBool: toma una cadena como entrada y la convierte en un valor booleano. Es evidente que si la cadena es "true", el método AsBool convierte ese valor en true. Si el valor de la cadena es cualquier otra cosa, AsBool devuelve false.

Sugerencia

Tipos de datos y métodos As()

Hasta ahora solo hemos dicho que cuando se crea una variable, se usa la palabra clave var. Sin embargo, esto no es todo. Para poder manipular valores (agregar números, concatenar cadenas, comparar fechas o realizar pruebas de true/false), C# tiene que trabajar con una representación interna adecuada del valor. C# puede, en general, averiguar cuál debe ser esa representación (es decir, qué tipo de datos son) en función de lo que se está haciendo con los valores. A veces, sin embargo, no lo puede hacer. Si no puede, debe ayudarle indicando explícitamente cómo debe C# representar los datos. El método AsBool hace eso precisamente: indica a C# que un valor de cadena de "true" o "false" se debe tratar como un valor booleano. Existen métodos similares para representar cadenas también como otros tipos, como AsInt (tratar como un entero), AsDateTime (tratar como una fecha y hora), AsFloat (tratar como un número de punto flotante), etc. Al usar estos métodos As( ), si C# no puede representar el valor de cadena tal como se ha solicitado, verá un error.

En el marcado de la página, quite o convierta en comentario este elemento (aquí se muestra como comentario):

<!-- <p>@message</p> -->

Justo donde haya quitado o convertido en comentario ese texto, agregue lo siguiente:

@if(showMessage) {
  <p>@message</p>
}

La prueba if indica que si la variable showMessage es true, representa un elemento <p> con el valor de la variable de mensaje.

Resumen de la lógica condicional

En caso de que no esté totalmente seguro de lo que acaba de hacer, a continuación aparece un resumen.

  • La variable de mensaje se inicializa en una cadena predeterminada ("Esta es la primera vez...").
  • Si la solicitud de página es el resultado de un envío (publicación), el valor del mensaje cambia a "Ahora que ha enviado..."
  • La variable showMessage se inicializa en false.
  • Si la cadena de consulta contiene ?show=true, la variable showMessage se establece en true.
  • En el marcado, si showMessage es true, se representa un elemento <p> que muestra el valor del mensaje. (Si showMessage es false, no se representa nada en ese momento en el marcado.)
  • En el marcado, si la solicitud es una publicación, se representa un elemento <p> que muestra la fecha y hora.

Ejecute la página. No hay ningún mensaje, porque showMessage es false, por lo que en el marcado la prueba if(showMessage) devuelve false.

Haga clic en Enviar. Verá la fecha y hora, pero no aparece aún ningún mensaje.

En el explorador, vaya al cuadro URL y agregue lo siguiente al final de la dirección URL: ?show=true y presione Entrar.

Screenshot of the Test Razor 2 page in a web browser showing a query string in the U R L box.

Se mostrará la página de nuevo. (Como ha cambiado la dirección URL, se trata de una nueva solicitud, no de un envío.) Haga clic en Enviar de nuevo. El mensaje se vuelve a mostrar, al igual que la fecha y la hora.

Screenshot of the Test Razor 2 page in a web browser after page submission with a query string in the U R L box.

En la dirección URL, cambie ?show=true por ?show=false y presione Entrar. Envíe de nuevo la página. La página vuelve a la forma en la que comenzó, sin mensaje.

Tal como se ha indicado anteriormente, la lógica de este ejemplo es un poco artificiosa. No obstante, if va a aparecer en muchas de sus páginas y tomará una o varias de las formas que ha visto aquí.

Instalación de un asistente (visualización de una imagen de Gravatar)

Algunas tareas que a menudo se quieren realizar en las páginas web necesitan mucho código o conocimientos adicionales. Ejemplos: mostrar un gráfico para los datos, colocar un botón "Like" de Facebook en una página, enviar mensajes de correo electrónico desde su sitio web, recortar o cambiar el tamaño de las imágenes o utilizar PayPal para su sitio web. Para que sea fácil hacer este tipo de cosas, ASP.NET Web Pages le permite utilizar asistentes. Los asistentes son componentes que se instalan para un sitio y que le permiten realizar tareas típicas mediante solo unas pocas líneas de código de Razor.

ASP.NET Web Pages tiene algunos asistentes integrados. Sin embargo, muchos asistentes están disponibles en paquetes (complementos) que se proporcionan con el administrador de paquetes de NuGet. NuGet le permite seleccionar un paquete para instalarlo y luego se encarga de todos los detalles de la instalación.

En esta parte del tutorial, instalará un asistente que le permite mostrar una imagen de Gravatar ("avatar reconocido globalmente"). Aprenderá dos cosas. Una es cómo buscar e instalar un asistente. También aprenderá cómo facilita un asistente la tarea de hacer algo que, de lo contrario, tendría que hacer con mucho código que tendría que escribir usted mismo.

Puede registrar su propio Gravatar en el sitio web de Gravatar en http://www.gravatar.com/, pero no es obligatorio crear una cuenta de Gravatar para realizar esta parte del tutorial.

En WebMatrix, haga clic en el botón NuGet.

Screenshot of the Web Matrix user interface showing the Nu Get button highlighted with a red rectangle.

Esto inicia el administrador de paquetes de NuGet y muestra los paquetes disponibles. (No todos los paquetes son asistentes; algunos agregan funcionalidad a WebMatrix, otros son plantillas adicionales, etc.) Puede recibir un mensaje de error sobre la incompatibilidad de la versión. Para omitir este mensaje de error, haga clic en Aceptar y continúe con este tutorial.

Screenshot of the Nu Get Gallery dialog box in Web Matrix showing a list of available packages to install.

En el cuadro de búsqueda, escriba "asp.net helpers". NuGet muestra los paquetes que coinciden con los términos de búsqueda.

Screenshot of the Nu Get Gallery dialog box in Web Matrix showing the A S P dot N E T Web Helpers Library item highlighted with a red rectangle.

La Biblioteca de asistentes web de ASP.NET contiene código para simplificar muchas tareas comunes, incluido el uso de imágenes Gravatar. Seleccione el paquete Biblioteca de asistentes web de ASP.NET y luego haga clic en Instalar para iniciar el instalador. Seleccione Sí cuando se le pregunte si desea instalar el paquete y acepte los términos para completar la instalación.

Eso es. NuGet descarga e instala todo, incluidos los componentes adicionales que podrían ser necesarios (dependencias).

Si por alguna razón tiene que desinstalar un asistente, el proceso es muy similar. Haga clic en el botón NuGet, haga clic en la pestaña Instalado y elija el paquete que desee desinstalar.

Uso de un asistente en una página

Ahora va a utilizar el asistente que acaba de instalar. El proceso para agregar un asistente a una página es parecido para la mayoría de los asistentes.

En WebMatrix, cree una página y asígnela el nombre GravatarTest.cshml. (Va a crear una página especial para probar el asistente, pero puede usar asistentes en cualquier página de su sitio web.)

Dentro del elemento <body>, agregue un elemento <div>. En el elemento <div>, escriba lo siguiente:

@Gravatar.

El carácter @ es el mismo carácter que ha estado utilizando para marcar el código de Razor. Gravatar es el objeto de asistente con el que está trabajando.

En cuanto escriba el punto (.), WebMatrix muestra una lista de métodos (funciones) que el asistente de Gravatar pone a disposición:

Screenshot of the source editor showing the Gravatar helper IntelliSense drop-down list with the Get H T M L item highlighted in yellow.

Esta característica se conoce como IntelliSense. Le ayuda a codificar proporcionando opciones adecuadas para el contexto. IntelliSense funciona con HTML, CSS, código ASP.NET, JavaScript y otros lenguajes que se admiten en WebMatrix. Es otra característica que facilita el desarrollo de páginas web en WebMatrix.

Presione G en el teclado y verá que IntelliSense encuentra el método GetHtml. Presione Tab. IntelliSense inserta automáticamente el método seleccionado (GetHtml). Escriba un paréntesis de apertura y observe que el paréntesis de cierre se agrega automáticamente. Escriba la dirección de correo electrónico entre comillas entre los dos paréntesis. Si tiene una cuenta de Gravatar, se devolverá la imagen de su perfil. Si no tiene una cuenta de Gravatar, se devuelve una imagen predeterminada. Cuando haya terminado, la línea debe tener este aspecto:

@Gravatar.GetHtml("john@contoso.com")

Vea ahora la página en un explorador. Aparece la imagen o la imagen predeterminada, en función de si tiene una cuenta de Gravatar o no.

Screenshot of the web browser window showing the user-selected Gravatar image of a man with glasses.Screenshot of the web browser window showing the default Gravatar image of a stylized and rotated letter G.

Para tener una idea de lo que el asistente hace para usted, vea el origen de la página en el explorador. Junto con el HTML que tenía en la página, verá un elemento de imagen que incluye un identificador. Este es el código que el asistente ha representado en la página en el lugar donde tenía @Gravatar.GetHtml. El asistente ha tomado la información proporcionada y ha generado el código que se comunica directamente con Gravatar a fin de obtener la imagen correcta para la cuenta proporcionada.

El método GetHtml también permite personalizar la imagen proporcionando otros parámetros. El código siguiente muestra cómo solicitar una imagen que tenga un ancho y alto de 40 píxeles y utiliza una imagen predeterminada especificada denominada wavatar si la cuenta especificada no existe.

@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")

Este código genera un resultado parecido al siguiente (la imagen predeterminada variará aleatoriamente).

Screenshot of the web browser page showing the new specified default image with the set parameters defined in the Get H T M L method.

Próximamente

Para que este tutorial sea breve, hemos tenido que centrarnos solo en algunos aspectos básicos. Naturalmente, hay mucho más para Razor y C#. A medida que prosiga con estos tutoriales, tendrá más información. Si está interesado en obtener más información sobre los aspectos de programación de Razor y C#, puede leer una introducción más exhaustiva aquí: Introducción a la programación web de ASP.NET mediante la sintaxis de Razor.

El siguiente tutorial trata de cómo trabajar con una base de datos. En ese tutorial comenzará a crear la aplicación de ejemplo que le permite enumerar sus películas favoritas.

Lista completa de la página TestRazor

@{
   // Working with numbers
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings)
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects
   var rightNow = DateTime.Now;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

    <div>
      <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
      <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
      <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
    </div>

    <div>
      <p>The technology is @technology, and the product is @product.</p>
      <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
   </div>

   <div>
     <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
   </div>

  </form>
</body>
</html>

Lista completa de la página TestRazorPart2

@{
   var message = "This is the first time you've requested the page.";

   if (IsPost) {
      message = "Now you've submitted the page.";
   }

   var showMessage = false;
   if (Request.QueryString["show"].AsBool() == true) {
     showMessage = true;
   }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax - Part 2</title>
    <meta charset="utf-8" />
    <style>
      body {font-family:Verdana; margin-left:50px; margin-top:50px;}
      div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    </style>
  </head>
  <body>
  <h1>Testing Razor Syntax - Part 2</h1>
  <form method="post">
    <div>
      <!--<p>@message</p>-->
      @if(showMessage){
        <p>@message</p>
      }
      <p><input type="submit" value="Submit" /></p>
      @if (IsPost) {
        <p>You submitted the page at @DateTime.Now</p>
      }
    </div>
  </form>
</body>
</html>

Lista completa de la página GravatarTest

@{
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div>
          @Gravatar.GetHtml("john@contoso.com")
          @Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
        </div>
    </body>
</html>

Recursos adicionales

AnteriorSiguiente