DinaZen

DinaZen es la biblioteca de componentes Blazor de Dinaup, construida sobre Radzen. Aporta las piezas con las que Play monta sus pantallas: tarjetas, etiquetas de estado, tablas de informe, formularios dinámicos, diálogos y ventanas. Todos los componentes llevan el prefijo Dnz.

Se instala como paquete NuGet DinaZen, para net10.0, sobre Radzen.Blazor y el SDK Dinaup. Si tu proyecto fija una versión de Radzen.Blazor más baja que la que pide DinaZen, la restauración falla con NU1605: sube tu referencia o quítala.

Antes de empezar

• Un proyecto Blazor Server en .NET 10 con Radzen registrado (AddRadzenComponents).
• Para los componentes que leen datos (informes, formularios, selectores), un DinaupClientC conectado. Cómo crearlo: Cliente Dinaup.
• Los tipos de fila generados (SectionsD, APIImpuestosC y similares) vienen del paquete MyDinaup.

Qué incluye

La referencia está dividida por familias. Empieza por la que resuelve tu pantalla.

Los patrones de uso combinan estas piezas con el SDK en cinco ejemplos completos.

Componentes dinámicos

Tres componentes reciben un identificador o un dato y montan la pieza entera a partir de la definición que guarda Dinaup. Con otro identificador, el componente muestra otra pieza sin cambiar el marcado.

Informe: DnzReportView

Recibe el cliente y el GUID del informe. Columnas, tipos, buscador, filtros por columna, paginación en servidor y exportación a CSV salen de la definición del informe.

<DnzReportView Client=@Client ReportId="3f2a9c10-8b4e-4d21-9f77-1a2b3c4d5e6f" />

Detalle en Tablas e informes.

Formulario: DnzFormView

Recibe el cliente y el GUID de la sección y muestra la ficha completa: pestañas, campos con su tipo y validación, listas y botones. Con DatoId vacío crea un registro nuevo; con un GUID edita ese registro.

<DnzFormView Client=@Client SectionId=@SectionsD.EntidadesD._SectionID DatoId="" />

Detalle en Entrada de datos y formularios.

Estadística: DnzDynamicStat

Recibe un DnzDynamicStatData y decide el formato con Render="Auto". Una serie con un solo valor se muestra como tarjeta KPI y varias series de un valor, como fila de KPIs. Las series con categorías se muestran como gráfica hasta 20 categorías y como tabla por encima.

<DnzDynamicStat Data=@_ventas Title="Ventas del mes" Icon="payments" />

Detalle en KPIs y métricas.

Ventanas flotantes

Los tres se abren en una ventana de escritorio (arrastrable, minimizable, con barra de tareas) con OpenAsWindow, que recibe el DnzWindowManagerService inyectado. El gestor admite hasta 6 ventanas a la vez (DnzWindowManagerService.MaxWindows).

@inject DnzWindowManagerService WindowManager

@code {
    private void AbrirVentas() => DnzReportView.OpenAsWindow(WindowManager, Client, "3f2a9c10-8b4e-4d21-9f77-1a2b3c4d5e6f", title: "Ventas");
}

Cómo montar DnzWindowHost: Diálogos y ventanas.

Instalación

dotnet add package DinaZen

<PropertyGroup>
  <WarningsAsErrors>RZ10012</WarningsAsErrors>
</PropertyGroup>
<ItemGroup>
  <Using Include="Dinaup.extensions" Static="true" />
</ItemGroup>

builder.Services.AddRadzenComponents();
builder.Services.AddDinaZen();

@using DinaZen
@using DinaZen.Components
@using DinaZen.Components.DnzDynamicStat
@using DinaZen.Components.DinaupFlex.Components
@using DinaZen.Components.DinaupFlex.Forms
@using DinaZen.Components.DinaupFlex.Reports
@using DinaZen.Components.DinaupFlex.Reports.Provider
@using DinaZen.Components.DinaupFlex.DynamicDocuments
@using DinaZen.Components.WindowManager
@using DinaZen.Dialogs

<head>
    <component type="typeof(DnzHead)" render-mode="ServerPrerendered" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
    <component type="typeof(DnzScripts)" render-mode="ServerPrerendered" />
</body>

<RadzenDialog />
<RadzenNotification />
<DnzWindowHost />

Configuración global: DnzConfig

DnzConfig es una clase estática que se ajusta en Program.cs antes de builder.Build().

DnzConfig.DeepDispose = true;

Convenciones de uso

DinaZen sigue los criterios del resto del ecosistema Blazor de Dinaup. Detalle en las guías de estilo C# y Blazor.

Nombres de propiedad con nameof

Cuando un componente pide el nombre de una propiedad (TextProperty, ColorProperty), pásalo con nameof. El compilador valida el nombre y un renombrado no rompe en silencio.

TextProperty=@nameof(APIImpuestosC.APIImpuestos_RowC.TextoPrincipal)

TextProperty="TextoPrincipal"

Atributos extra

La mayoría de componentes capturan los atributos que no reconocen (CaptureUnmatchedValues) y los pasan al elemento raíz. Sirve para data-testid, id, title o una clase suelta.

<DnzCardTitle Title="Clientes" Icon="group" data-testid="crm-clientes-titulo" />

Estados de carga

Distingue "estoy procesando" de "la interfaz aún no está montada". Cada caso tiene su componente.

<DnzLoader />

<DnzSkeleton Lines="3" />

Diálogos

Los diálogos comparten un pie fijo: cancelar a la izquierda en estilo discreto, confirmar a la derecha y destacado, con IsBusy mientras procesa.

<FooterContent>
    <div class="d-flex gap-2 justify-content-end">
        <RadzenButton Text="Cancelar" Variant="Variant.Text" ButtonStyle="ButtonStyle.Danger" Click=@Cancelar />
        <RadzenButton Text="Aceptar" ButtonStyle="ButtonStyle.Success" Click=@AceptarAsync IsBusy=@_guardando />
    </div>
</FooterContent>

Cómo encaja con el SDK

→ Patrones de uso · Componentes · SDK .NET · Cliente Dinaup · Guías de estilo C# y Blazor