Contenido Dinámico en WebMatrix (sintaxis Razor) Parte II

 

Toma de decisiones

Existen varios operadores en Razor tanto para definir distintos flujos de ejecución en función de una condición lógica. Podemos utilizar el tipo “bool” para definir variables que sólo podrán contener uno de estos dos valores: verdadero o falso. En el siguiente fragmento de código podemos ver un ejemplo:

@{
bool resultado = miObjeto.HaSidoExitoso();
if (resultado == true)
{
<h1>Ha salido bien.</h1>
}
else
{
<h1>Ha fallado.</h1>
}
}

Analicemos el fragmento. En primer lugar recogemos en la variable “resultado” lo que nos devuelve el método “HaSidoExitoso” de un objeto “miObjeto”. Este resultado, al estar almacenado en una variable booleana, sólo puede ser verdadero o falso.

A partir de ahí, utilizando el operador de decisión if/else, podemos mostrar en el HTML final dos posibles mensajes: uno si el resultado ha sido exitoso (valor “true”) y otro si el resultado ha fallado (valor contrario, “false”).

Existe otro operador de decisión, llamado switch, que trabaja con rangos de opciones. Por ejemplo, si el valor de un resultado es un entero de entre 1 y 3, y queremos ejecutar sentencias distintas para cada caso, podríamos definir tres etiquetas “case” para cada uno de esos tres valores. El siguiente ejemplo nos aclara cómo hacerlo.

@{
int resultado = miObjeto.OtroMetodo();
switch (resultado)
{
case 1: // Codigo para el resultado igual a 1
break;
case 2: // Codigo para el resultado igual a 2
break;
case 3: // Codigo para el resultado igual a 3
break;
default: // Codigo para resultado distinto de 1, 2 y 3
break;
}
}

Como vemos, por cada posible valor del resultado definimos una etiqueta case con el valor que aplica. Estas etiquetas se cierran con la instrucción break y contendrán todas las instrucciones que queremos ejecutar para ese caso. En el ejemplo, sin embargo, nos hemos limitado a definir unos cuantos comentarios (que nunca aparecerán en el HTML devuelto al cliente, al igual que todo el código que se ejecuta en el servidor).

Por último, la etiqueta “default” nos sirve para definir un caso por defecto en caso de que el valor de la variable sobre la que se ejecuta el switch, sea distinto a todos los considerados. Suele servir, en la mayoría de casos, para realizar control de errores.

Bucles y colecciones

Anteriormente comentamos que WebMatrix está orientado a objetos y siendo así utiliza todos los conceptos de este tipo de programación. Ahora vamos a introducir un nuevo concepto: las colecciones. No son más que lo que su propio nombre indica, colecciones o estructuras de datos que contienen múltiples objetos de un mismo tipo. Es decir, que una colección podrá serlo de enteros, de booleanos, de cadenas de texto, pero no podrá serlo de varios tipos a la vez.

Será frecuente que queramos ejecutar instrucciones repetidas sobre todos los objetos que forman parte de una colección. Por ejemplo, si el resultado de un método es una colección de enteros con las edades de los usuarios de una página y queremos mostrar por pantalla dichos valores, lo más práctico es iterar por esta colección de elementos y, para cada uno, generar el mismo fragmento HTML para visualizar su valor por pantalla. El operador principal para lograr esto es “for”. Veamos un ejemplo:

@{
int[] coleccion = new int[] { 1, 2, 3, 4 };
for (int i=0; i<coleccion.Length; i++)
{
<h1>Numero @coleccion[i]</h1>
}
}

Como se puede ver en el código, en primer lugar se define una colección de enteros del 1 al 4. Esto se hace creando una variable “colección” cuyo tipo será “int[]”. Es importante indicar que, en C# (y por ende en Razor), podemos crear una colección o array de cualquier tipo situando los caracteres [] tras el tipo, como en este ejemplo.

Una vez creada la colección, la recorreremos con el operador for. Para ello, necesitamos una variable contador, que nos permite saber en qué posición de la colección nos encontramos. Desde los tiempos de C, 40 años atrás, i ha sido el nombre más popular para este tipo de variables (seguido de j, k, l, etc.), así que sigamos la tradición.

Una vez definida la variable, tenemos que indicar el límite del bucle con una sentencia lógica. En este caso estamos accediendo a la propiedad “Length” de la colección (no olvidemos que todo son objetos y los objetos tienen propiedades con valores que les definen, como el número de elementos en este caso).

La última cláusula sirve para indicar cuantos avances queremos en nuestra variable contadora al finalizar cada iteración del bucle (el operador ++ nos sirve para indicarle que sólo uno). Resumiendo, el bucle entero se leería, en lenguaje natural, así:

“Define una variable contador i con valor inicial 0, que no puede ser mayor que el número de elementos de la colección, y que avanza una posición en cada iteración”

Posteriormente, con el bloque de llaves definimos el código que queremos ejecutar en cada iteración del bucle. En este caso lo que estamos haciendo es, para cada iteración, acceder a un elemento de la colección. Para ello utilizamos la sintaxis siguiente:

Nombre_Variable_Coleccion[Variable_Contador];

Con esta sintaxis lo que estamos haciendo es acceder a un de los elementos que compone la colección; en concreto, al elemento que ocupa la posición representada por el valor de la variable contador. Como es habitual, el primero de los elementos de la colección ocupa la posición 0. El resultado del fragmento de código que hemos visto sería una imagen parecida a la siguiente.

A continuación vamos a crear un proyecto WebMatrix para comprender de mejor manera este tipo de instrucciones.

Creamos un nuevo proyecto WebMatrix de tipo CSHTML en blanco y lo nombramos “Instrucciones Básicas”. Procedemos a escribir el siguiente código.

· Para el uso de la sentencia if/then:

@{

// IF STATEMENT

// example no.1

//

// feel free to experiment with those 3 numbers and note that the program still works fine

int NumberOne = 26;

int NumberTwo = 15;

int NumberThree = 0;

var SmallestNumber = "";

// IF number one is the smallest

if((NumberOne < NumberTwo) && (NumberOne < NumberThree))

{

// assign the following value to the variable

SmallestNumber = "one";}

// ELSE IF number two is the smallest

else if((NumberTwo < NumberOne) && (NumberTwo < NumberThree))

{

// assign the following value to the variable

SmallestNumber = "two";

}

else

{

// ELSE it must be number three that is the smallest

SmallestNumber = "three";

}

}

<!DOCTYPE html>

<html>

<head>

<title>Instrucciones Basicas</title>

</head>

<body>

<p>[IF STATEMENT - example no.1] EL número @SmallestNumber es el menor! </p>

</body>

</html>

· Para el uso de la sentencia switch:

// SWITCH STATEMENT

var DayOfWeek = @DateTime.Now.DayOfWeek.ToString();

var WeekdayGreeting = "";

// the current day of the week is used for determining the appropriate greeting to be displayed

switch(DayOfWeek)

{

// if the contents of the above variable are as follows

case "Monday":

// assign the following value to the variable

WeekdayGreeting = "So it's the great Monday! Welcome back new week... :-)";

break;

// if the contents of the above variable are as follows

case "Tuesday":

// assign the following value to the variable

WeekdayGreeting = "Today's Tuesday - my favourite day! And what's your favourite? :-)";

break;

// if the contents of the above variable are as follows

case "Wednesday":

// assign the following value to the variable

WeekdayGreeting = "Looks like you've made it to Wednesday! Well done... :-)";

break;

// if the contents of the above variable are as follows

case "Thursday":

// assign the following value to the variable

WeekdayGreeting = "It's Thursday... so there's only one day left until the weekend! :-)";

break;

// if the contents of the above variable are as follows

case "Friday":

// assign the following value to the variable

WeekdayGreeting = "Hurray! It's Friday and the weekend is almost here... :-)";

break;

// if the contents of the above variable are as follows

case "Saturday":

// assign the following value to the variable

WeekdayGreeting = "I gotta feeling... that Saturday's night gonna be a good night! :-)";

break;

// if the contents of the above variable are as follows

case "Sunday":

// assign the following value to the variable

WeekdayGreeting = "Make the most of Sunday because tomorrow starts another brilliant week! :-)";

break;

}

}

<!DOCTYPE html>

<html>

<head>

<title>Basics: Instructions</title>

</head>

<body>

<p>[SWITCH STATEMENT] Message of the day: @WeekdayGreeting </p>

</body>

</html>

· Para el uso de la sentencia while loop:

<!DOCTYPE html>

<html>

<head>

<title>Basics: Instructions</title>

</head>

<body>

<p>[WHILE LOOP] Let's practice some maths by counting to ten! ;) Here we go... </p>

<!-- WHILE LOOP -->

@{

// initialising the "counter" variable with a starting value

int CountToTen = 1;

// the condition which must be met for the loop to run

while(CountToTen <= 10)

{

// displaying the current contents of the variable

@: @CountToTen;

CountToTen++; // incrementation of the variable by one

}

// checking if the loop executed successfully

if(CountToTen >= 10)

{

// displaying the appropriate message

@: ...Done!

}

}

</body>

</html>

· Para el uso de la sentencia for loop:

<!DOCTYPE html>

<html>

<head>

<title>Basics: Instructions</title>

</head>

<body>

<p>[FOR LOOP] Here's an example of a simple countdown timer (60secs): </p>

<!-- FOR LOOP -->

@{

// initialisation, condition, decrementation of the variable

for(int CountdownTimer = 60; CountdownTimer >= 0; CountdownTimer--)

{

// displaying the current contents of the variable

@: @CountdownTimer

// checking if the loop executed successfully

if(CountdownTimer <= 0)

{

// displaying the appropriate message

@: ...Time is up!

}

}

}

</body>

</html>

· Para el uso de la sentencia foreach loop:

<!DOCTYPE html>

<html>

<head>

<title>Basics: Instructions</title>

</head>

<body>

<p>[FOREACH LOOP] Here's an example of displaying the contents of a simple string array: </p>

<!-- FOREACH LOOP -->

@{

// initialising the string array with sample values

string[] SimpleStringArray = {"One", "Two", "Three", "Four", "Five"};

// using a "helper" variable to read each element of the array in turn

foreach(var element in SimpleStringArray)

{

// displaying the current contents of the variable

@: @element

}

}

</body>

</html>