Patrones de uso

Recetas que copias y adaptas, no referencia de props. Cada una resuelve un problema real de montar una app Blazor sobre el SDK .NET: traer datos con el Cliente Dinaup y pintarlos con DinaZen sin reinventar la UI.

De un informe a una tabla

Tienes un informe de Dinaup Flex (su GUID) y quieres pintar sus filas en una tabla con paginación, búsqueda, filtros y exportación a CSV. Sin escribir ni una columna a mano. DnzReportView ejecuta el informe contra la API con tu cliente y genera el DataGrid a partir de la definición del informe.

@code {
    private DinaupClientC _client;

    protected override async Task OnInitializedAsync()
    {
        _client = new DinaupClientC(endpoint, apiKey, secretKey, "*");
        await _client.InitializeAsync(3000);
    }
}

@if (_client.IsNotNull())
{
    <div style="height:600px; overflow:auto;">
        <DnzReportView Client=@_client ReportId="guid-del-informe" Limit="50" />
    </div>
}

<DnzReportView Client=@_client ReportId="guid-del-informe" OnItemSelect=@AbrirDetalleAsync />

@code {
    private async Task AbrirDetalleAsync(DinaupDynamicRowDTO row)
    {
        // row.ID y row.SectionId vienen rellenos
        await HacerAlgoCon(row.ID);
    }
}

¿Lo quieres en un diálogo o en una ventana flotante en lugar de inline? El componente expone dos helpers estáticos.

@inject DialogService DialogService

@code {
    private async Task AbrirInformeAsync()
    {
        await DnzReportView.OpenAsync(DialogService, _client, "guid-del-informe", title: "Ventas del mes");
    }
}

@inject DnzWindowManagerService WindowManager

@code {
    private void AbrirInformeEnVentana()
    {
        DnzReportView.OpenAsWindow(WindowManager, _client, "guid-del-informe", title: "Ventas");
    }
}

Firmas de los helpers estáticos:

Task DnzReportView.OpenAsync(DialogService ds, DinaupClientC client, string reportId, Dictionary<string, string> vars = null, string title = "Informe", string width = "90%", string height = "80%")
string DnzReportView.OpenAsWindow(DnzWindowManagerService wm, DinaupClientC client, string reportId, Dictionary<string, string> vars = null, string title = "Informe", string icon = "analytics")

DnzReportView

Ejecuta un informe de Flex y lo pinta como tabla con búsqueda, filtros, paginación servidor y exportación a CSV.

<DnzReportView Client=@_client ReportId="guid-del-informe" Limit="50" Title="Ventas" />

Parámetros

DnzReportProvider

Variante "headless": ejecuta el informe y expone las filas como CascadingValue, pero no pinta ninguna tabla. Úsalo cuando quieras los datos del informe pero con tu propio render (tarjetas, KPIs, una vista a medida). El ChildContent recibe el contexto con las filas ya cargadas.

<DnzReportProvider Client=@_client ReportId="guid-del-informe" Limite="500">
    <div class="d-flex flex-column gap-2">
        @* Aquí pintas las filas a tu manera, leyéndolas del CascadingValue *@
    </div>
</DnzReportProvider>

Parámetros

Mostrar datos tipados

Tienes una fila con un importe, una fecha, unos minutos... y quieres pintarlos con el formato correcto (moneda local, fecha amigable, color según el signo) sin formatear a mano. La familia de Spans lo hace: cada uno sabe formatear su tipo según la región del cliente.

<div class="d-flex flex-column gap-2">
    <DnzSpanMoney Amount=@factura.Total Label="Total" Icon="payments" AutoColor=true />
    <DnzSpanDate Value=@factura.Vencimiento ShowStatus=true />
</div>

DnzSpanMoney

Pinta un importe con el formato de moneda de la región del cliente. Opcionalmente con etiqueta, icono y color por signo.

<DnzSpanMoney Amount=@total Label="Total" Icon="payments" AutoColor=true />

Parámetros

DnzSpanDate

Pinta una fecha con el formato amigable de la región, con tooltip de la fecha exacta y un badge de estado opcional ("Hoy", "Mañana", "Ayer", "Pasado", "Futuro").

<DnzSpanDate Value=@pedido.Fecha ShowStatus=true />

Parámetros

Elegir el selector correcto

Necesitas un desplegable para que el usuario elija un valor. DinaZen tiene tres, y cada uno resuelve un caso distinto. La regla de los tres segundos:

<DnzEnumDropDown TEnum="EstadoPedidoE" @bind-Value=@_estado Placeholder="Estado" />

@code {
    private EstadoPedidoE _estado;
}

<DnzDataGridDropDown T="ClienteRow" @bind-Value=@_cliente Data=@_clientes TextProperty="Label" Label="Cliente" Width="320px" />

@code {
    private ClienteRow _cliente;
    private List<ClienteRow> _clientes = new();
}

<DnzRowSelector Client=@_client ReportId="guid-informe-clientes" @bind-SelectedRow=@_clienteSel Label="Cliente" Placeholder="Buscar cliente..." />

@code {
    private IDinaupRow _clienteSel;
}

DnzEnumDropDown

Desplegable cuyas opciones salen de un enum. La etiqueta de cada opción se toma del atributo [Display(Name = ...)] si existe; si no, del nombre del valor.

<DnzEnumDropDown TEnum="EstadoPedidoE" @bind-Value=@_estado />

Parámetros

Acepta además atributos extra que se pasan tal cual al elemento raíz.

DnzDataGridDropDown

Desplegable con búsqueda y columnas para una lista que ya tienes en memoria. El tipo T debe implementar IDinaupRow.

<DnzDataGridDropDown T="ClienteRow" @bind-Value=@_cliente Data=@_clientes TextProperty="Label" Label="Cliente" />

Parámetros

Acepta además atributos extra que se pasan tal cual al elemento raíz.

DnzRowSelector

Selector que busca contra un informe remoto mientras escribes. Para fichas que viven en el servidor (clientes, productos) y son demasiadas para tener en memoria.

<DnzRowSelector Client=@_client ReportId="guid-informe-clientes" @bind-SelectedRow=@_clienteSel Label="Cliente" />

Parámetros

Acepta además atributos extra que se pasan tal cual al elemento raíz.

Esqueleto de diálogo

Quieres un diálogo con la estructura y los botones de Play: título arriba, contenido en medio, botones al pie con la convención de la casa (cancelar discreto a la izquierda, confirmar destacado a la derecha). DnzDialogLayout te da los tres huecos.

@inject DialogService DialogService

<DnzDialogLayout Title="Editar pedido" Icon="edit">
    <BodyContent>
        <div class="d-flex flex-column gap-3 p-3">
            <RadzenTextBox @bind-Value=@_nombre Placeholder="Nombre" />
        </div>
    </BodyContent>
    <FooterContent>
        <div class="d-flex gap-2 justify-content-end">
            <RadzenButton Text="Cancelar" Variant="Variant.Text" ButtonStyle="ButtonStyle.Danger" Click=@CancelarAsync />
            <RadzenButton Text="Guardar" ButtonStyle="ButtonStyle.Success" Click=@GuardarAsync IsBusy=@_guardando />
        </div>
    </FooterContent>
</DnzDialogLayout>

@code {
    private string _nombre = "";
    private bool _guardando;

    private void CancelarAsync() => DialogService.Close();

    private async Task GuardarAsync()
    {
        _guardando = true;
        await PersistirAsync();
        DialogService.Close(true);
    }
}

DnzDialogLayout

Estructura de diálogo con cabecera, cuerpo desplazable y pie. Si omites TitleContent, genera la cabecera con Title + Icon + botón de cerrar; si omites FooterContent, muestra un botón "Cerrar" por defecto.

Parámetros

DnzConfirmDialog

Para una acción destructiva (eliminar, vaciar), no montes un diálogo entero: abre la confirmación con el helper estático OpenAsync, que devuelve true si el usuario confirma.

@code {
    private async Task EliminarAsync()
    {
        var ok = await DnzConfirmDialog.OpenAsync(DialogService, "Esta acción no se puede deshacer. ¿Eliminar el pedido?", title: "Eliminar pedido", severity: DnzConfirmSeverity.Danger, okText: "Eliminar");
        if (ok == false) return;
        await BorrarPedidoAsync();
    }
}

Firma del helper estático:

Task<bool> DnzConfirmDialog.OpenAsync(DialogService dialogService, string message, string title = "Confirmar", DnzConfirmSeverity severity = DnzConfirmSeverity.Warning, string okText = "Confirmar", string cancelText = "Cancelar")

El severity (Info, Warning, Danger, Success) cambia el icono, el color de acento y el estilo del botón de confirmar. Para algo irreversible, usa DnzConfirmSeverity.Danger.

Estados de carga

Mostrar que algo está pasando es parte de la UX. DinaZen tiene tres piezas y cada una resuelve un momento distinto:

@if (_procesando)
{
    <DnzLoader />
}

@if (_cargando)
{
    <DnzSkeleton Lines="3" />
}

<DnzDeferredContent DelayMs="500">
    <GraficoPesado Data=@_datos />
</DnzDeferredContent>

DnzLoader

Spinner de "estoy procesando". Centrado por defecto; horizontal si lo necesitas en línea.

<DnzLoader />

Parámetros

DnzSkeleton

Silueta gris animada que ocupa el sitio del contenido mientras carga.

<DnzSkeleton Lines="3" Height="1.2rem" />

Parámetros

DnzDeferredContent

Retrasa el render del contenido pesado un instante y muestra un esqueleto mientras tanto. Útil para que las subpáginas pesadas no bloqueen la primera pintura.

<DnzDeferredContent DelayMs="500">
    <SeccionPesada />
</DnzDeferredContent>

Parámetros

Relacionado

• DinaZen — introducción, instalación y convenciones de la librería.
• Cliente Dinaup — crear el DinaupClientC que alimenta estas recetas.
• SDK .NET — conexión, lectura y escritura de datos.
• Informes de Dinaup Flex — de dónde sale el GUID que pasas a DnzReportView.