Blazor en .Net Core, C# para front end.

Microsoft ha liberado recientemente una de sus nuevas herramientas de programación, esta es blazor, esta herramienta nos permite crear aplicaciones web usando C# en vez de javascript!!, de tal forma nuestra aplicacion es programada tanto en el Front End como en el Back End con C#, en potencia es una gran ayuda ya que nos liberaría de tener que usar un lenguaje aparte para la interfaz gráfica como lo es javascript (con sus diferentes frameworks) que es todo un stack de desarrollo.

Estuve dando un vistazo a esta herramienta y quiero compartirles como fue mi experiencia, para este ejemplo he utilizado visual studio community edition 2019, la versión con nos permite trabajar con las ultimas características de .Net core.

Empecemos.

Primero por supuesto creamos el proyecto y elegimos Nuevo proyecto -> "Blazor App", elegimos un nombre para la aplicación, lo mismo para la solución y damos clic en crear, luego hay una lista con el tipo de proyecto Blazor que queremos crear, elegimos "Blazor Server App", este tipo de aplicación nos permite tener comunicación entre el servidor y front end usando la librería SignalR, siendo este proceso transparente para el desarrollador. Finalmente volvemos dar clic en Crear y nos aseguramos que la versión del framework sea .Net Core 3.1.

Una vez creado veremos la siguiente estructura de archivos:

Por defecto Visual Studio crea el proyecto con una aplicacion de ejemplo, un contador y un servicio del clima, no lo tocaremos pero es libre de explorarlo, si habrimos el explorador de soluciones podemos ver los diferentes componentes: la carpeta "Pages" como su nombre nos indica es donde están las paginas de nuestra aplicación, "Index" que es la pagina de inicio por defecto, una pagina de error y los otros archivos de la aplicación, todos terminan .razor, esto indica que son archivos blazor (no confundir con paginas razor que tienen terminación .cshtml), hay una carpeta "Shared" donde esta "NavMenu.razor" el menú y "MainLayout.razor" el "panel" principal que contiene nuestras otras paginas; finalmente esta el archivo "App.razor" esta es la raíz de nuestro front end, desde allí se empieza a construir nuestra interfaz web. El resto es tal y como cualquier proyecto web en .Net

Nustra App para este ejemplo será una librería y tendrá la lista de los diferentes títulos disponibles, primero recuperaremos la lista y la mostraremos en la página, por ultimo podremos agregar un nuevo libro y guardarlo en el servidor.

Modelo

Creemos la clase que representa el modelo de nuestro libro, clic derecho sobre el nombre del proyecto y añadimos una carpeta llamada "Modelos", clic derecho sobre esta carpeta y agregamos la clase "LibroModel.cs", agregamos las siguientes propiedades:

DataAccess

A continuación crearemos una carpeta llamada "DataAccess" que representa nuestro acceso a información, clic derecho sobre el proyecto, agregar -> Carpeta y la nombramos "DataAccess" clic derecho sobre esta y agregamos una clase llamada "LibroDataAccess.cs" que representará el acceso a la base de datos.

Esta clase simplemente simula el acceso a la información y nos retorna una lista de libros mediante el método "ObtenerLibros()".

Razor Page.

Ahora damos clic derecho en la carpeta "Pages" luego Agregar -> Nuevo Item y elegimos "Razor Component", le ponemos un nombre "ListaLibros.razor" para este caso y damos clic en agregar.

El archivo creado no se diferencia de una típica pagina cshtml:

Primero configuramos la ruta a la página, esto se hace usando la directiva @page "/Libros"  en la parte superior del archivo así la ruta de esta página sería: http://localhost/Libros.
Ahora necesitamos inyectar, obtener una instancia del objeto de la clase "LibroDataAccess.cs" para esto agregamos "@using DataAccess" y a continuación copiamos "@inject LibroDataAccess libroDataAccess":

No nos olvidemos de configurar nuestra Inyección de dependencias en el método "ConfigureServices" de la clase "Startup.cs":

Ahora si podemos proceder y usar C#, lo primero que haremos será sobreescribir el método "OnInitialized" que claramente es el método que se llama al inicializar la página, y desde esta recuperamos la información y llenamos la tabla con los datos:

Estamos llamando el método "ObtenerLibros()" directamente y este nos retorno una Lista de "LibroModel" que luego mostramos en una tabla, esta es la magia, no tuvimos que hacer ningún llamado al servidor, la misma herramienta usando SignalR se ha comunicado con el back end y traido la información como si estuviéramos invocando cualquier método.

Enviar Información.

Ahora procederemos a guardar información, para esto crearemos un método en la clase "libroDataAccess" llamado "GuardarLibro" donde simplemente nos envían una instancia del objeto "LibroModel" y lo añadimos a la lista:

Regresamos a la pagina "ListaLibros.razor" y creamos el metodo "InsertarLibro" donde invocaremos nuestro data access y añadiremos el libro, finalmente creamos un formulario, para esto .Net nos provee con diferentes componentes:

• EditForm: El formulario.
• Model: El modelo.
• OnValidSubmit: El método que vamos a llamar si es valido los datos.
• @bind-Value: El valor que atamos a cada entrada.
• DataAnnotationsValidator: Para usar anotaciones.
• ValidationSummary: Para mostrar errores de la información.

Finalmente nuestra clase queda así:

Validar Información.

Podemos añadir anotaciones al modelo de nuestro libro, para validar los datos que ingresan:

En Conclusión.

Finalmente podemos ver nuestro pequeño proyecto y observar como guarda y recupera información usando solo C#, todo sin tener que usar javascript.