Patrones de uso

Ejemplos para copiar y adaptar. Cada uno resuelve una tarea habitual de una app Blazor sobre el SDK .NET: traer datos con el Cliente Dinaup y mostrarlos con DinaZen.

De un informe a una tabla

Un informe de Dinaup Flex (su GUID) se muestra como tabla con paginación, búsqueda, filtros y exportación a CSV. DnzReportView ejecuta el informe con tu cliente y genera la rejilla a partir de la definición del informe. No declaras columnas.

@code {
    private DinaupClientC _client;

    protected override async Task OnInitializedAsync()
    {
        _client = await DinaupClientC.ConnectAsync(endpoint, publicKey, secretKey);
    }
}

@if (_client.IsNotNull())
{
    <div style="height:600px; overflow:auto;">
        <DnzReportView Client=@_client ReportId="3f2a9c10-8b4e-4d21-9f77-1a2b3c4d5e6f" Limit="50" />
    </div>
}

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

@code {
    private async Task AbrirDetalleAsync(DinaupDynamicRowDTO row)
    {
        var nombre = row.GetLegible("nombre");
        await DnzFormView.OpenAsync(DialogService, _client, row.SectionId, row.ID);
    }
}

Para abrirlo en un diálogo o en una ventana flotante en lugar de en la página, el componente expone dos métodos estáticos.

@inject DialogService DialogService

@code {
    private async Task AbrirInformeAsync()
    {
        await DnzReportView.OpenAsync(DialogService, _client, "3f2a9c10-8b4e-4d21-9f77-1a2b3c4d5e6f", title: "Ventas del mes");
    }
}

@inject DnzWindowManagerService WindowManager

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

Firmas de los métodos 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%", List<FilterCondition> filter = null)
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 muestra como tabla con búsqueda, filtros, paginación en servidor y exportación a CSV.

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

Parámetros

DnzReportProvider

Variante sin tabla: ejecuta el informe y expone las filas como ReportContext en cascada, sin mostrar nada. Sirve para usar los datos del informe con tu propio marcado o con DnzCardList, DnzChartView y DnzTopN.

<DnzReportProvider Client=@_client ReportId="7c1d4e90-2f5a-41b8-bc63-9e0a1b2c3d4f" Limite="500">
    <DnzChartView ChartType="DnzChartView.ChartTypeE.Column" />
    <DnzTopN N="5" />
</DnzReportProvider>

Parámetros

Mostrar datos tipados

Un importe, una fecha o unos minutos se muestran con su formato (moneda de la región, fecha legible, color según el signo) sin formatear a mano. Lo hace la familia de Spans: cada uno formatea su tipo según la cultura 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

Muestra un importe con la moneda de la región del cliente, con etiqueta, icono y color por signo opcionales.

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

Parámetros

DnzSpanDate

Muestra una fecha con el formato legible de la región, texto emergente con la fecha exacta y una etiqueta de estado opcional (Hoy, Mañana, Ayer, Pasado, Futuro).

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

Parámetros

Elegir el selector correcto

El desplegable para que el usuario elija un valor depende de dónde salen las opciones.

La regla completa, con RadzenDropDown, DnzDropDown y DnzSectionDropDown, está en Selectores.

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

@code {
    private EstadoPedidoE _estado;
}

<DnzDataGridDropDown T="DinaupBasicInformation" @bind-Value=@_cliente Data=@_clientes TextProperty=@nameof(DinaupBasicInformation.Label) Label="Cliente" Width="320px" />

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

<DnzRowSelector Client=@_client ReportId=@SectionsD.EntidadesD._SectionID @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 atributos extra que se pasan al elemento raíz.

DnzDataGridDropDown

Desplegable con búsqueda y columnas para una lista en memoria. T tiene que implementar IDinaupRow.

<DnzDataGridDropDown T="DinaupBasicInformation" @bind-Value=@_cliente Data=@_clientes TextProperty=@nameof(DinaupBasicInformation.Label) Label="Cliente" />

Parámetros

Acepta atributos extra que se pasan al elemento raíz.

DnzRowSelector

Selector que busca en un informe del servidor mientras escribes, de 20 en 20 filas. Para fichas del servidor que son demasiadas para tenerlas en memoria.

<DnzRowSelector Client=@_client ReportId=@SectionsD.EntidadesD._SectionID @bind-SelectedRow=@_clienteSel Label="Cliente" />

Parámetros

Acepta atributos extra que se pasan al elemento raíz.

Esqueleto de diálogo

Un diálogo con la estructura de Play lleva el título en la cabecera, el contenido en el cuerpo y los botones al pie. DnzDialogLayout aporta los tres huecos.

@inject DialogService DialogService

<DnzDialogLayout Title="Editar pedido" Icon="edit" AltoAuto=true>
    <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=@Cancelar />
            <RadzenButton Text="Guardar" ButtonStyle="ButtonStyle.Success" Click=@GuardarAsync IsBusy=@_guardando />
        </div>
    </FooterContent>
</DnzDialogLayout>

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

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

    private async Task GuardarAsync()
    {
        if (_guardando) return;
        _guardando = true;
        try
        {
            await PersistirAsync();
            DialogService.Close(true);
        }
        finally
        {
            _guardando = false;
        }
    }
}

DnzDialogLayout

Estructura de diálogo con cabecera, cuerpo desplazable y pie. Sin TitleContent, genera la cabecera con Title + Icon + botón de cerrar; sin FooterContent, muestra un botón Cerrar.

Parámetros

DnzConfirmDialog

Para una acción destructiva (eliminar, vaciar), no montes un diálogo entero: abre la confirmación con el método 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. Se elimina el pedido.", title: "Eliminar pedido", severity: DnzConfirmSeverity.Danger, okText: "Eliminar");
        if (ok == false) return;
        await BorrarPedidoAsync();
    }
}

Firma del método 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

DinaZen tiene tres piezas para indicar que algo está en curso, una para cada momento.

@if (_procesando)
{
    <DnzLoader />
}

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

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

DnzLoader

Indicador de operación en curso. Centrado por defecto; horizontal para una barra o cabecera.

<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 renderizado del contenido pesado y muestra un esqueleto mientras tanto. Sirve para que las subpáginas pesadas no bloqueen el primer renderizado.

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

Parámetros

Relacionado

• DinaZen: instalación y convenciones de la biblioteca.
• Componentes: la referencia por familias.
• Cliente Dinaup: crear el DinaupClientC que alimenta estos ejemplos.
• Informes de Dinaup Flex: de dónde sale el GUID que pasas a DnzReportView.