Inputs y formularios

Lo que el usuario teclea, pega o sube. Esta familia agrupa los inputs autónomos de DinaZen (una caja de búsqueda, un botón de subida, un editor de etiquetas, un recortador de imagen…). A ellos se suma el sistema de formularios dinámicos de Flex, que pinta una ficha completa a partir de un GUID de sección. Recurre a ella cuando montas una pantalla de alta o edición y no quieres pelearte con cada <input> a mano.

Casi todos son componentes de dos vías: les pasas el dato con Value y te avisan del cambio con ValueChanged. En Razor eso se escribe con @bind-Value=@Modelo.Campo.

DnzSearchInput

Caja de búsqueda con icono de lupa y debounce de 500 ms: no dispara en cada tecla, espera a que el usuario pare de escribir. Ideal para filtrar una tabla o una lista sin machacar el servidor.

<DnzSearchInput Placeholder="Buscar cliente..." BounceValueChanged=@OnBuscar />

@code {
    private string _filtro = "";

    private async Task OnBuscar(string texto)
    {
        _filtro = texto;
        await RecargarListaAsync();
    }
}

Parámetros

Los atributos extra que pongas (por ejemplo autofocus o maxlength) se pasan tal cual al elemento <input> raíz.

DnzFileUploaderButton

Botón que abre el selector nativo, sube los ficheros a S3 (vía presign + Uppy) y te devuelve los DinaupFileDTO ya registrados en Dinaup. Si subes una sola imagen, abre antes el editor de imagen.

<DnzFileUploaderButton Client=@Cliente OnFilesUploaded=@OnFicherosSubidos AcceptExtensions=@(new[] { ".pdf", ".docx", ".xlsx" }) MaxFiles="5" MaxSizeBytes=@(50 * 1024 * 1024) ButtonText="Adjuntar documento" ButtonIcon="upload_file" OnError=@OnErrorSubida />

@code {
    private async Task OnFicherosSubidos(List<DinaupFileDTO> ficheros)
    {
        foreach (var f in ficheros)
            Factura.Adjuntos.Add(f);
        await InvokeAsync(StateHasChanged);
    }

    private void OnErrorSubida(string mensaje)
    {
        NotificationService.Notify(NotificationSeverity.Error, "Subida", mensaje);
    }
}

Parámetros

DnzFileName

Pinta un fichero ya subido: icono según su extensión, nombre, tamaño y un botón de descarga o una acción propia. Es lo que enseñas en una lista de adjuntos; no sube nada.

@foreach (var adjunto in Factura.Adjuntos)
{
    <DnzFileName DnzFileNameDisplay=@adjunto.Name FileSize=@adjunto.SizeInBytes DownloadURL=@adjunto.url_original Horizontal="true" @key=@adjunto.ID />
}

Parámetros

DnzHtmlEditor

Editor de texto rico (Radzen HtmlEditor) con la barra de herramientas de Dinaup. Para descripciones largas, plantillas de email o notas de un cliente.

<DnzHtmlEditor @bind-Value=@Plantilla.Cuerpo EditorStyle="min-height:400px;" UploadUrl="upload/image" />

Parámetros

DnzImageEditor

Editor de imagen completo embebido: recorte, rotación, volteo, ajustes, mejora automática y herramientas externas (IDnzImageTool). Trabaja sobre una URL o sobre byte[]. Lo normal es usarlo dentro del diálogo (ver abajo), pero puedes incrustarlo suelto.

<DnzImageEditor @ref=_editor ImageUrl=@Producto.FotoUrl PresignEndpoint="/file/upload/sign" OnSave=@OnImagenGuardada Style="height:600px;" />

@code {
    private DnzImageEditor _editor;

    private async Task Guardar()
    {
        var bytes = await _editor.GetResultBytesAsync();
        // ...persistir bytes
    }
}

Parámetros

DnzImageEditorDialog

El editor de imagen ya envuelto en un diálogo modal con Aceptar/Cerrar. No lo pones en el markup: lo abres con un método estático y te devuelve el resultado. Es la forma recomendada de editar imágenes.

@code {
    private async Task EditarFoto()
    {
        var bytes = await DnzImageEditorDialog.OpenAsync(DialogService, imageUrl: Producto.FotoUrl);
        if (bytes.IsNull()) return; // cancelado
        // ...persistir bytes
    }
}

@code {
    private async Task EditarYSubir()
    {
        var result = await DnzImageEditorDialog.OpenAndUploadToS3Async(DialogService, "/file/upload/sign", imageUrl: Producto.FotoUrl);
        if (result.IsNull()) return; // cancelado
        Producto.FotoUrl = result.Url;
    }
}

Parámetros

Métodos estáticos

DnzTagListEditor

Editor de una lista de etiquetas (List<string>). Se escribe y se pulsa Enter para añadir, click en la X para quitar. Admite pegar varias separadas por coma o punto y coma, validación por valor y transformación.

<DnzTagListEditor @bind-Value=@Producto.Etiquetas Title="Etiquetas" Icon="sell" Placeholder="Añade una etiqueta y pulsa Enter..." Transform=@(v => v.Trim().ToLower()) />

Parámetros

DnzJsonKVEditor

Editor de pares clave/valor que entra y sale como JSON (string). Para metadatos sueltos, configuración de una integración, cabeceras HTTP... Trae copiar, pegar JSON e importar. Usa notación con punto (app.apikey) para agrupar visualmente.

<DnzJsonKVEditor @bind-Value=@Integracion.MetadatosJson />

Parámetros

DnzStepper

Lista vertical de pasos numerados con la línea que los une. Es presentacional: muestra un proceso ("cómo empezar", "qué pasa después"), no controla un wizard ni navega. Los pasos van dentro como DnzStepperStep.

<DnzStepper>
    <DnzStepperStep Index="1">
        <strong>Crea la factura</strong>
        <p>Elige cliente y añade las líneas.</p>
    </DnzStepperStep>
    <DnzStepperStep Index="2">
        <strong>Revisa los importes</strong>
        <p>Comprueba bases, IVA y total.</p>
    </DnzStepperStep>
    <DnzStepperStep Index="3">
        <strong>Emite y envía</strong>
        <p>Genera el PDF y mándalo al cliente.</p>
    </DnzStepperStep>
</DnzStepper>

Parámetros

DnzStepperStep

Un paso suelto dentro del DnzStepper: el círculo numerado y el contenido al lado.

<DnzStepperStep Index="2">
    <strong>Configura el almacén</strong>
    <p>Define ubicaciones y stock inicial.</p>
</DnzStepperStep>

Parámetros

DnzFormView

El formulario dinámico de Flex. No declaras campos: le pasas el GUID de una sección y el cliente, y pinta la ficha completa (cabecera, pestañas, controles, botones, guardar/cancelar) tal cual está definida en Dinaup. Es lo que usas para dar de alta o editar un registro de cualquier sección sin escribir un solo <input>.

<DnzFormView Client=@Cliente SectionId=@SeccionClientesId DatoId=@ClienteId OnClosed=@OnFichaCerrada />

@code {
    private void OnFichaCerrada(DinaupFormResult result)
    {
        if (result.Reason == DinaupFormCloseReason.Saved)
            RecargarLista();
    }
}

Parámetros

En vez de incrustarlo en el markup, lo habitual es abrirlo como modal o como ventana flotante con sus helpers estáticos:

@code {
    private async Task EditarCliente(string clienteId)
    {
        var result = await DnzFormView.OpenAsync(DialogService, Cliente, SeccionClientesId, clienteId);
        if (result.Reason == DinaupFormCloseReason.Saved)
            RecargarLista();
    }
}

@code {
    private void AbrirFichaFlotante(string clienteId)
    {
        DnzFormView.OpenAsWindow(WindowManager, Cliente, SeccionClientesId, clienteId, title: "Cliente");
    }
}

DnzFormTab

Es la pieza interna que DnzFormView usa para renderizar cada pestaña del formulario: el título, los contenedores, los controles y los botones de esa pestaña. No lo montas tú directamente; lo gestiona DnzFormView. Lo listamos para que, si depuras un formulario de Flex, sepas qué estás viendo en el árbol de componentes.

@* DnzFormView monta esto por cada pestaña; no se usa suelto *@
<DnzFormTab Tab=@tab Client=@Cliente OnTabChanged=@HandleTabChange OnButtonClick=@HandleButtonClick />

Parámetros

Relacionado

• Selectores — elegir opciones (enum, memoria o catálogo remoto), con DnzSearchInput por dentro.
• Tablas e informes — pintar un informe del SDK como tabla, tarjetas o gráfica.
• Cookbook de patrones — recetas que combinan estos inputs con el SDK.
• Cliente Dinaup — conexión, WriteOperations y File_UploadURLAsync para persistir lo que capturan estos inputs.
• Informes de Dinaup Flex — el origen de datos que rellenan las tablas y los formularios.

→ Volver a Componentes · DinaZen · SDK .NET