https://github.com/josejuansanchez/blazorbootstrap
Repositorio con ejemplos sobre cómo usar componentes BlazorBootstrap.
https://github.com/josejuansanchez/blazorbootstrap
blazor blazor-server blazorbootstrap
Last synced: about 22 hours ago
JSON representation
Repositorio con ejemplos sobre cómo usar componentes BlazorBootstrap.
- Host: GitHub
- URL: https://github.com/josejuansanchez/blazorbootstrap
- Owner: josejuansanchez
- Created: 2025-11-04T15:34:18.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-11-04T17:07:15.000Z (8 months ago)
- Last Synced: 2025-11-04T18:09:11.107Z (8 months ago)
- Topics: blazor, blazor-server, blazorbootstrap
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Introducción a BlazorBootstrap
## Índice
- [Introducción](#introducción)
- [Instalación de BlazorBootstrap](#instalación-de-blazorbootstrap)
- **Ejemplos**
- [Ejemplo 1. Alertas y botones](#ejemplo-1-alertas-y-botones)
- [Ejemplo 2. Uso de modales](#ejemplo-2-uso-de-modales)
- [Ejemplo 3. Tarjetas responsivas con información de usuario](#ejemplo-3-tarjetas-responsivas-con-información-de-usuario)
- [Ejemplo 4. Formulario con validación](#ejemplo-4-formulario-con-validación)
- [Ejemplo 5. Listado de usuarios con Grid](#ejemplo-5-listado-de-usuarios-con-grid)
- [Ejercicios propuestos](#ejercicios-propuestos)
- [Referencias](#referencias)
---
## Introducción
En esta práctica aprenderemos a utilizar la biblioteca **[BlazorBootstrap][1]**, una librería de componentes creada específicamente para **Blazor Server y Blazor WebAssembly**, que permite aprovechar la potencia de **[Bootstrap 5][2]** sin necesidad de escribir código JavaScript o HTML adicional. Existen otras librerías similares, como por ejemplo **[Blazorise][3]**.
El objetivo de estos ejemplos es familiarizarse con los componentes visuales más comunes: **alertas, botones, modales, tarjetas, formularios y grids**, así como comprender su integración dentro del flujo interactivo de una aplicación Blazor.
---
## Instalación de BlazorBootstrap
Siga los pasos que se detallan en la página oficial de [BlazorBootstrap](https://docs.blazorbootstrap.com/getting-started/blazor-webapp-server-global-net-8) para instalar la librería en su proyecto Blazor.
---
## Ejemplo 1. Alertas y botones
En este primer ejemplo se muestran las **alertas** (``) y **botones** (``) básicos de [BlazorBootstrap][1], junto con la gestión de eventos desde código C#.
**Paso 1. Crear un nuevo componente Razor**
Cree un nuevo archivo Razor llamado `Ejemplo1.razor` en la carpeta `Pages` de su proyecto Blazor.
**Paso 2. Añadir el código del ejemplo**
Añada el siguiente código al archivo `Ejemplo1.razor`:
```razor
@page "/ejemplo1"
@rendermode InteractiveServer
Ejemplo 1. Alertas y Botones
Alerta sin icono que se puede cerrar
Alerta con icono que se puede cerrar
Mostrar / Ocultar alerta informativa
@if (mostrarInfo)
{
Esta alerta se muestra dinámicamente desde C#
}
mostrarInfo: @mostrarInfo
@code {
private bool mostrarInfo = true;
private void ToggleAlerta()
{
mostrarInfo = !mostrarInfo;
Console.WriteLine("Botón ToggleAlerta pulsado");
}
}
```
### Comentarios
* ``: Componente que muestra mensajes visuales de diferentes colores (`Success`, `Danger`, `Info`, etc.).
* `Dismissable="true"`: Es un atributo del componente `Alert` que añade un botón en la esquina superior derecha para cerrar la alerta.
* ``: Inserta un icono Bootstrap. Existen muchos tipos, por ejemplo: `ExclamationTriangleFill`, `InfoCircleFill`, etc.
* ``: Componente que crea un botón configurable por color y tipo.
**Paso 3. Modificar el archivo de navegación**
Añade un enlace al nuevo componente en Components/Layout/NavMenu.razor:
```razor
```
---
## Ejemplo 2. Uso de modales
Este ejemplo muestra cómo utilizar el componente `` de [BlazorBootstrap][1], que permite abrir ventanas emergentes con contenido y acciones personalizadas.
**Paso 1. Crear un nuevo componente Razor**
Cree un nuevo archivo Razor llamado `Ejemplo2.razor` en la carpeta `Pages` de su proyecto Blazor.
**Paso 2. Añadir el código del ejemplo**
```razor
@page "/ejemplo2"
@rendermode InteractiveServer
Ejemplo 2. Modal con Blazor Bootstrap
El contenido del modal va aquí.
Cerrar
Guardar cambios
Mostrar Modal
@code {
private Modal modal = default!;
private async Task OnShowModalClick() => await modal.ShowAsync();
private async Task OnHideModalClick() => await modal.HideAsync();
}
```
### Comentarios
* ``: Componente que define la ventana modal.
* `@ref="modal"`: Referencia al componente para manipularlo desde C#.
* ``: Contenido principal de la ventana modal.
* ``: Parte inferior del modal, normalmente con botones de acción.
* `modal.ShowAsync()` / `modal.HideAsync()`: Métodos que muestran u ocultan la ventana modal.
**Paso 3. Modificar el archivo de navegación**
Añade un enlace al nuevo componente en `Components/Layout/NavMenu.razor`:
```razor
```
---
## Ejemplo 3. Tarjetas responsivas con información de usuario
Este ejemplo utiliza el componente `` para mostrar información de varios usuarios en un diseño responsive.
**Paso 1. Crear un nuevo componente Razor**
Cree un nuevo archivo Razor llamado `Ejemplo3.razor` en la carpeta `Pages` de su proyecto Blazor.
**Paso 2. Añadir el código del ejemplo**
```razor
@page "/ejemplo3"
@rendermode InteractiveServer
Ejemplo 3. Tarjetas responsivas con información de usuario
@foreach (var usuario in usuarios)
{
@usuario.Nombre
@usuario.Rol
Correo: @usuario.Email
Teléfono: @usuario.Telefono
Descripción: @usuario.Descripcion
}
@code {
private readonly List usuarios = new()
{
new Usuario
{
Nombre = "Usuario 1",
Rol = "Administrador del sistema",
Email = "admin@empresa.com",
Telefono = "950 252525",
Imagen = "https://randomuser.me/api/portraits/men/40.jpg",
Descripcion = "Responsable de la configuración general del sistema y seguridad."
},
new Usuario
{
Nombre = "Usuario 2",
Rol = "Gestor de contenido",
Email = "content@empresa.com",
Telefono = "950 242424",
Imagen = "https://randomuser.me/api/portraits/men/41.jpg",
Descripcion = "Encargado de la creación y actualización de contenidos en el portal."
},
new Usuario
{
Nombre = "Usuario 3",
Rol = "Soporte técnico",
Email = "soporte@empresa.com",
Telefono = "950 232323",
Imagen = "https://randomuser.me/api/portraits/men/42.jpg",
Descripcion = "Atiende incidencias y da soporte a usuarios internos y externos."
}
};
private class Usuario
{
public string Nombre { get; set; } = string.Empty;
public string Rol { get; set; } = string.Empty;
public string Email { get; set; } = string.Empty;
public string Telefono { get; set; } = string.Empty;
public string Imagen { get; set; } = string.Empty;
public string Descripcion { get; set; } = string.Empty;
}
}
```
### Comentarios
* ``: Contenedor visual con borde y sombra (`shadow-sm`).
* ``: Parte superior de la tarjeta, usada para el nombre del usuario.
* ``: Contenido principal de la tarjeta con imagen, texto y datos secundarios.
* Las clases Bootstrap (`col-12`, `col-md-6`, `col-lg-4`) hacen que la cuadrícula sea **responsive**.
| Clase | Breakpoint | Significado | Resultado visual |
| :--- | :--- |:--- | :--- |
| `col-12` | **Extra pequeño (XS)**: pantallas menores de 576 px (móviles) | La columna ocupa **todo el ancho disponible (12 columnas)** | Una sola tarjeta por fila |
| `col-md-6` | **Mediano (MD)**: >= 768 px (tablets) | La columna ocupa **6 de 12 columnas** (la mitad del contenedor) | Dos tarjetas por fila |
| `col-lg-4` | **Grande (LG)**: >= 992 px (ordenadores de escritorio) | La columna ocupa **4 de 12 columnas** (un tercio del contenedor) | Tres tarjetas por fila |
**Paso 3. Modificar el archivo de navegación**
Añade un enlace al nuevo componente en `Components/Layout/NavMenu.razor`:
```razor
```
---
## Ejemplo 4. Formulario con validación
En este ejemplo se implementa un formulario controlado con **validaciones automáticas** mediante `DataAnnotations` y componentes para la entrada de datos de BlazorBootstrap.
**Paso 1. Crear un nuevo componente Razor**
Cree un nuevo archivo Razor llamado `Ejemplo4.razor` en la carpeta `Pages` de su proyecto Blazor.
**Paso 2. Añadir el código del ejemplo**
```razor
@page "/ejemplo4"
@using System.ComponentModel.DataAnnotations
@rendermode InteractiveServer
Ejemplo 4. Formulario con validación
Nombre
Correo electrónico
Fecha de nacimiento:
Guardar
@if (mostrarAlerta)
{
Usuario guardado correctamente
}
@code {
private Usuario usuario = new();
private bool mostrarAlerta = false;
public class Usuario
{
[Required(ErrorMessage = "El nombre es obligatorio")]
public string Nombre { get; set; } = string.Empty;
[Required(ErrorMessage = "Formato de correo no válido")]
public string Email { get; set; } = string.Empty;
[Required(ErrorMessage = "La fecha de nacimiento es obligatoria")]
public DateOnly? FechaNacimiento { get; set; } = DateOnly.FromDateTime(DateTime.Now);
}
private async Task Guardar()
{
mostrarAlerta = true;
}
}
```
### Comentarios
* ``: Controla el formulario y valida el modelo.
* ``: Activa la validación basada en atributos.
* ``: Muestra los mensajes de error específicos.
* ``: Componente de BlazorBootstrap para fechas (`DateOnly`).
* ``: Muestra un mensaje de éxito tras guardar.
**Paso 3. Modificar el archivo de navegación**
Añade un enlace al nuevo componente en `Components/Layout/NavMenu.razor`:
```razor
```
---
## Ejemplo 5. Listado de usuarios con Grid
Este último ejemplo utiliza el componente `` para mostrar, filtrar, ordenar y paginar registros dinámicamente.
**Paso 1. Crear un nuevo componente Razor**
Cree un nuevo archivo Razor llamado `Ejemplo5.razor` en la carpeta `Pages` de su proyecto Blazor.
**Paso 2. Añadir el código del ejemplo**
```razor
@page "/ejemplo5"
@using System.Globalization
@rendermode InteractiveServer
Ejemplo 5. Listado de usuarios
@context.Id
@context.Nombre
@context.Email
@context.FechaNacimiento.ToString("dd/MM/yyyy", CultureInfo.InvariantCulture)
Usuarios seleccionados: @selectedUsuarios.Count
@if (selectedUsuarios.Any())
{
- @user.Nombre (@user.Email)
@foreach (var user in selectedUsuarios)
{
}
}
@code {
private IEnumerable usuarios = default!;
private HashSet selectedUsuarios = new();
private async Task> UsuariosDataProvider(GridDataProviderRequest request)
{
if (usuarios is null)
usuarios = GetUsuarios(); // simula la obtención desde una base de datos o API
return await Task.FromResult(request.ApplyTo(usuarios));
}
private IEnumerable GetUsuarios()
{
return new List
{
new Usuario { Id = 1, Nombre = "Ana Torres", Email = "ana.torres@example.com", FechaNacimiento = new DateOnly(1990, 3, 14) },
new Usuario { Id = 2, Nombre = "Luis García", Email = "luis.garcia@example.com", FechaNacimiento = new DateOnly(1988, 7, 9) },
new Usuario { Id = 3, Nombre = "Marta López", Email = "marta.lopez@example.com", FechaNacimiento = new DateOnly(1995, 12, 25) },
new Usuario { Id = 4, Nombre = "Carlos Pérez", Email = "carlos.perez@example.com", FechaNacimiento = new DateOnly(1982, 5, 2) },
new Usuario { Id = 5, Nombre = "Laura Sánchez", Email = "laura.sanchez@example.com", FechaNacimiento = new DateOnly(1999, 10, 21) },
new Usuario { Id = 6, Nombre = "Javier Ruiz", Email = "javier.ruiz@example.com", FechaNacimiento = new DateOnly(1985, 1, 18) },
new Usuario { Id = 7, Nombre = "Patricia Gómez", Email = "patricia.gomez@example.com", FechaNacimiento = new DateOnly(1992, 11, 30) },
};
}
private Task OnSelectedItemsChanged(HashSet items)
{
selectedUsuarios = items is not null && items.Any() ? items : new();
return Task.CompletedTask;
}
public class Usuario
{
public int Id { get; set; }
public string Nombre { get; set; } = string.Empty;
public string Email { get; set; } = string.Empty;
public DateOnly FechaNacimiento { get; set; }
}
}
```
### Comentarios
* ``: Tabla avanzada con filtrado, paginación y ordenación integradas.
* `DataProvider`: Función que proporciona los datos al grid.
* `RowKeySelector`: Identifica cada fila por su clave primaria.
* `SelectionMode`: Permite selección múltiple o simple.
* `SelectedItemsChanged`: Evento que se dispara al seleccionar filas.
**Paso 3. Modificar el archivo de navegación**
Añade un enlace al nuevo componente en `Components/Layout/NavMenu.razor`:
```razor
```
---
## Ejercicios propuestos
### Ejercicio 1. Añadir iconos a las tarjetas de usuario
Modifica el componente del **Ejemplo 3** para añadir un icono representativo según el rol del usuario. También puedes cambiar el color del borde de la tarjeta según el rol, por ejemplo, azul para administradores, verde para usuarios normales, etc.
### Ejercicio 2. Validación adicional en el formulario
Amplía el **Ejemplo 4** para incluir nuevos campos como teléfono, dirección, rol, foto, etc. Debe validar estos campos utilizando atributos de validación adicionales.
### Ejercicio 3. Añadir eliminación en el Grid
Modifica el **Ejemplo 5** para incluir una columna con un botón que permita eliminar usuarios del listado.
### Ejercicio 4. Integración de modal de confirmación
Combina el **Ejemplo 2** (Modal) con el **Ejemplo 5** (Grid) para confirmar la eliminación de un usuario seleccionado.
---
## Referencias
* [Documentación oficial de BlazorBootstrap](https://docs.blazorbootstrap.com/).
* [Microsoft Docs: Componentes de Blazor Server](https://learn.microsoft.com/es-es/aspnet/core/blazor/components./?view=aspnetcore-9.0)
* [Documentación oficial de Bootstrap 5](https://getbootstrap.com/docs/5.3/getting-started/introduction/).
* [Repositorio en GitHub de BlazorBootstrap](https://github.com/vikramlearning/blazorbootstrap).
* [Repositorio en GitHub con ejemplos para las clases de DWM](https://github.com/jaruiz1961-ual/EjemplosClaseDWM).
* [Tutorial de Bootstrap 5 en W3Schools](https://www.w3schools.com/bootstrap5/index.php).
[1]: https://demos.blazorbootstrap.com
[2]: https://getbootstrap.com
[3]: https://blazorise.com