Una de las cosas a recordar que Microsoft utiliza de manera por defecto Razor, que básicamente lo que significa es que podemos utilizar el lenguaje C# o VB.NET como lenguaje de cliente, recuerden que por defecto el lenguaje de cliente para paginas web HTML es JavaScript.
No es el único motor para trabajar en nuestra vistas, existen otros por ejemplo: Spark, NHaml, Brail, StringTemplate o NVelocity,
Para trabajar con razor en nuestras vistas debemos utiliza el arroba como carácter de inicio de código, esto indica que lo que sigue es código C# y será interpretado como tal.
@{ var miVariable= 5; }
Si queremos realizar una pregunta lo haremos de la siguiente manera:
@if(miVariable >= 5)
{
El valor es: @miVariable
}
else
{
El valor no es valido!
}
Es importante indicar que el código Razor llega hasta la llave que cierra.
Podemos crear secciones de código Razor como el siguiente:
- El dia es @i
@foreach (var i = 1; i < 32; i++ )
{
}
Aqui Creara los ítems de una lista no ordenada con los números del 1 al 31. Una de las cosas a entender es que Razor nos permite incluir lógica en la vista con código HTML como en este ejemplo.
Vamos a crear una acción en el controlador, esta acción la llamaremos NuevaVista, en esta acción vamos a crear unas variable de tipo anónimo, con esto no creamos la clase como tal, luego adicionamos esto a una colección genérica con lo cual pasaremos los datos a la vista desde el controlador a través del objeto ViewBag.
Vamos a crear una clase de que llamaremos Mes en el mismo controlador, la clase se vera de la siguiente manera:
public class Mes
{
public int Id { get; set; }
public string NombreMes { get; set; }
}
Entonces, en nuestro controlador crearemos una nueva acción que quedara así:
public ActionResult NuevaVista()
{
ViewBag.ListaMeses = new List
new Mes { Id = 1, NombreMes = "Enero" },
new Mes { Id = 2, NombreMes = "Febrero" },
new Mes { Id = 3, NombreMes = "Marzo" },
new Mes { Id = 4, NombreMes = "Abril" },
new Mes { Id = 5, NombreMes = "Mayo" },
new Mes { Id = 6, NombreMes = "Junio" },
new Mes { Id = 7, NombreMes = "Julio" },
new Mes { Id = 8, NombreMes = "Agosto" },
new Mes { Id = 9, NombreMes = "Septiembre" },
new Mes { Id = 10, NombreMes = "Octubre" },
new Mes { Id = 11, NombreMes = "Noviembre" },
new Mes { Id = 12, NombreMes = "Diciembre" },
};
return View();
}
Ahora vamos a crear la nueva vista.
Esto lo hacemos dando clic derecho sobre el nombre de la acción en el controlador, en el menú que nos aparece seleccionamos Add View, o Adicionar vista, esto nos mostrara la ventana de creación de las vistas:
Como se aprecia el nombre de la vista lo crea de acuerdo al nombre que se le haya colocado, el template de la vista es Empty o vacio, pero se puede seleccionar un template de los que ya conocemos que se generan de manera automática a un modelo.
Aqui es dar clic en el botón Add, y crear la vista.
Esta es la vista que se crea, ahora vamos a configurarla para que se pueda ver como deseamos.
Modificamos la vista para que se vea de la siguiente manera:
@{
ViewBag.Title = "NuevaVista";
}
Nueva Vista
@Html.DropDownList("ListaMeses",
(SelectList)ViewBag.ListaMeses,
new { @class = "from-control" });
Creamos un div con un style y le agregamos un alto a la vista de 360 pixeles, luego creamos un div con una clase de tipo row de bootstrap, lo mas importante es que utilizamos uno de los helpers de HTML y el control DropDownList que le pasamos los parametrs del nombre, que es el mismo del ViewBag, el segundo parámetro es el Viewbag con una conversión a un SelectList que nos permitirá mostrar la lista de datos.
Al ejecutar la vista veremos lo siguiente:
De esta manera podremos crear desde cero nuestras vistas, o utilizar la plantilla que ya tiene Asp.net MVC.
Que lo disfruten!
Hasta la próxima.
