Iniciando con Blazor + MudBlazor

Blazor es una gran solución para crear aplicaciones web orientada a desarrolladores de .NET, dado que no tenemos que escribir código JavaScript para diseñar nuestra lógica en el lado frontend, podemos reutilizar nuestro conocimiento en .NET y C # e inclusos componentes y librerías.

Veamos una figura sobre la evolución de Blazor:

Blazor comenzó con algunas limitaciones, pero ahora tenemos un framework muy maduro que incluye todas las características necesarias para comenzar un proyecto desde cero.

Aunque Blazor es una herramienta poderosa, también podemos incluir otras librerías o utilidades para potencializar y diseñar interfaces de usuario enriquecidas en nuestros componentes. Por ejemplo, si necesitamos un componente para mostrar notificaciones, modales, formularios, calificaciones y tablas de datos. MudBlazor es una librería para crear aplicaciones web usando Blazor con una interfaz de usuario enriquecida.

La librería MudBlazor contiene elementos y recursos en las siguientes categorías:

Temas, Colores, Tipografía
Diseño
Botones
Entradas
Visualización de datos
Navegación
Retroalimentación
Utilidades

Podemos probar MudBlazor en el navegador antes de comenzar localmente con un proyecto Blazor usando TryMudBlazor.

Podemos navegar a https://try.mudblazor.com/ y luego hacer clic en Play Now ahora para abrir un editor:

Solo necesitamos editar el código y usar el botón de reproducción para ejecutar el código y ver una vista previa en el panel derecho.

Ahora comencemos con MudBlazor paso a paso con un proyecto real:

1. Debemos crear un Blazor WebAssembly utilizando el siguiente comando:

dotnet new blazorwasm

Nota: Podemos omitir este paso si ya tenemos un proyecto con Blazor.

2. Agreguemos el paquete para MudBlazor con el siguiente comando:

dotnet add package MudBlazor

3. Agreguemos la librería en _Imports archivo.razor. Añadamos esta línea: @using MudBlazor

4. Agreguemos referencias de fuente y estilo en el archivo index.html:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" 
rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

5. Agreguemos la referencia de JavaScript en el archivo index.html:

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

6. Agreguemos el servicio en la clase Program.cs:

using MudBlazor.Services;
builder.Services.AddMudServices();

7. En MainLayout.razor agreguemos los siguientes componentes:

<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>

8. Podemos navegar a Counter.razor para agregar un nuevo botón con MudBlazor y comparar con el original de la plantilla base:

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="IncrementCount">Click 
Me</MudButton>

Ahora podemos diseñar todos los componentes de nuestra aplicación Blazor utilizando MudBlazor. Si queremos leer más sobre controles y utilidades en MudBlazor podemos explorar la página oficial de Explorar MudBlazor – MudBlazor

Si quieres saber más sobre Blazor y MudBlazor consulta este MVP Show de C# Corner en YouTube: