Diálogos

Todos los diálogos de Dinaup comparten el mismo esqueleto. Lo montas con DnzDialogLayout y rellenas tres huecos: cabecera, cuerpo y pie. Para los dos casos más repetidos no montas nada: DnzConfirmDialog te resuelve el "¿seguro?" antes de borrar, y DnzItemPickerDialog deja al usuario elegir una ficha de un informe.

El patrón de diálogo Dinaup

Antes de mirar props, quédate con la receta. Un diálogo de edición estándar se monta así:

DnzDialogLayout

Estructura fija de cualquier diálogo: cabecera arriba, cuerpo con scroll en medio y pie abajo. Tú rellenas los tres RenderFragment y el componente pone el grid y el botón de cerrar. Solo el cuerpo hace scroll; cabecera y pie quedan anclados.

<DnzDialogLayout>
    <TitleContent>
        <span>@(ID.IsEmpty() ? "Nueva Retención" : "Editar Retención")</span>
    </TitleContent>
    <BodyContent>
        @if (cargando)
        {
            <DnzSkeleton Lines=4 MaxWidth="400px" />
        }
        else
        {
            <div class="d-flex flex-column gap-3 p-3">
                <RadzenFormField class="w-100" Text="Nombre" Variant="Variant.Flat">
                    <RadzenTextBox @bind-Value=@editandoNombre Style="width:100%" />
                </RadzenFormField>
                <RadzenFormField class="w-100" Text="Retención %" Variant="Variant.Flat">
                    <RadzenNumeric @bind-Value=@editandoRetencion Style="width:100%" Format="N2" />
                </RadzenFormField>
            </div>
        }
    </BodyContent>
    <FooterContent>
        <div class="d-flex justify-content-end gap-2 align-items-center px-3">
            <RadzenButton Click=@Cerrar ButtonStyle="ButtonStyle.Danger" Text="Cancelar" Variant="Variant.Text" />
            <RadzenButton Click=@GuardarAsync ButtonStyle="ButtonStyle.Success" Text="Guardar" Icon="check" IsBusy=@isBusy />
        </div>
    </FooterContent>
</DnzDialogLayout>

Si omites TitleContent o FooterContent, el layout genera una cabecera automática (con Title + Icon + botón de cerrar) y un pie con un botón "Cerrar" por defecto. Pero el patrón Dinaup es darle tu propio pie con Guardar + Cancelar.

Cabecera: automática o a medida

Si solo pasas Title (y opcionalmente Icon), el componente pinta la cabecera por ti con el título, el icono y el botón de cerrar. Si necesitas algo más, usa TitleContent y mandas tú.

<DnzDialogLayout Title="Detalle del pedido" Icon="receipt">
    <BodyContent>
        @* ... *@
    </BodyContent>
</DnzDialogLayout>

<DnzDialogLayout>
    <TitleContent>
        <div class="d-flex align-items-center justify-content-between w-100">
            <span class="fw-semibold">Detalle del pedido #1042</span>
            <RadzenBadge Text="Pagado" BadgeStyle="BadgeStyle.Success" />
        </div>
    </TitleContent>
    <BodyContent>
        @* ... *@
    </BodyContent>
</DnzDialogLayout>

Convención del pie

El pie de página de Dinaup siempre sigue el mismo orden: Cancelar a la izquierda en estilo discreto, Aceptar a la derecha y destacado.

Parámetros

DnzConfirmDialog

Diálogo de "¿seguro?" para acciones que no se pueden deshacer. No lo pintas en tu markup: lo abres con el método estático OpenAsync, que devuelve true si el usuario confirma y false si cancela o cierra.

@code {
    async Task EliminarDominioAsync(string dominio)
    {
        if (await DnzConfirmDialog.OpenAsync(DialogService, $"¿Eliminar el dominio '{dominio}'?", "Eliminar dominio", DnzConfirmSeverity.Danger, "Eliminar") == false) return;

        // ... borrar el dominio
        NotificationService.Notify(NotificationSeverity.Success, "Dominio eliminado");
    }
}

El patrón es siempre el mismo: if (await ...OpenAsync(...) == false) return; y, si pasa, ejecutas la acción.

Firma de OpenAsync

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

Devuelve Task<bool>: true si el usuario pulsa aceptar, false si cancela, cierra o pulsa fuera. Solo dialogService y message son obligatorios; el resto tiene valor por defecto.

Valores de DnzConfirmSeverity

El severity cambia el color de acento, el icono y el estilo del botón de aceptar. Elige el que case con la gravedad de la acción.

if (await DnzConfirmDialog.OpenAsync(DialogService, $"¿Eliminar el dominio '{dominio}'?", "Eliminar dominio", DnzConfirmSeverity.Danger, "Eliminar") == false) return;

if (await DnzConfirmDialog.OpenAsync(DialogService, "¿Instalar esta app externa? Tendrá acceso a tus datos.", "Instalar app externa", DnzConfirmSeverity.Warning, "Instalar") == false) return;

DnzItemPickerDialog

Selector de ficha sobre un informe de Dinaup. Abre un diálogo con una tabla buscable y devuelve la fila que elija el usuario, o null si cancela. Igual que el de confirmación, se abre con OpenAsync.

@code {
    async Task ElegirClienteAsync()
    {
        var fila = await DnzItemPickerDialog.OpenAsync(DialogService, Client, "clientes");
        if (fila == null) return;

        // fila es la DinaupDynamicRowDTO seleccionada
        var nombre = fila.GetLegible("nombre");
    }
}

Firma de OpenAsync

public static async Task<DinaupDynamicRowDTO> OpenAsync(DialogService dialogService, DinaupClientC client, string reportId)

Devuelve Task<DinaupDynamicRowDTO> con la fila seleccionada, o null si el usuario cancela o cierra el diálogo. Por dentro monta un DnzReportView sobre el informe que le pases y cierra devolviendo la fila al pulsar sobre ella.

Relacionado

• Intro a DinaZen — la librería de componentes al completo.
• Índice de componentes · Selectores · Tablas e informes
• Cookbook de patrones — recetas de diálogos y otros patrones de UI.
• Cliente Dinaup — el cliente que alimenta el selector de ficha.
• Informes de Dinaup Flex — los informes que usa DnzItemPickerDialog.