# 📊 nexabase-report — Ejemplos de Integración

Ejemplos funcionales de cómo integrar el visor de reportes en diferentes tecnologías.

## 🟦 Blazor Server / Razor

### Blazor Razor Page

Componente para Blazor Server (.NET 8) con IJSRuntime para interactuar con el custom element.

Razor Ver archivo →

### Blazor Server Page (code-behind)

Page completa con Injected HttpClient, manejo de parámetros y botones de exportación.

Blazor Server Ver archivo →

## 🟩 ASP.NET Core Razor Pages

### Razor Pages (.cshtml)

Ejemplo clásico de Razor Pages con section Scripts y HTML helpers para serializar datos.

Razor Pages Ver archivo →

## 🟨 Vanilla HTML + JS

### jQuery + HTML

Ejemplo puro con jQuery que genera datos simulados (como haría un backend .NET) y los pasa al visor.

jQuery Ver archivo →

## 📁 Archivos de Definición de Reportes

### invoice-report.json

Reporte de factura de venta listo para cargar. Compatible con todos los ejemplos de arriba.

Ver archivo →

## 🔧 Cómo usar

    # 1. Build del proyecto
    npm run build

    # 2. Copiar dist/ a tu proyecto ASP.NET
    # o usar un CDN (jsDelivr, unpkg)

    # 3. En tu .cshtml o .razor:
    <link rel="stylesheet" href="~/lib/nexabase-report/style.css" />
    <script src="~/lib/nexabase-report/nexabase-report.umd.js"></script>

    # 4. Registrar y usar
    NexaReport.registerNexaReport();
    const viewer = document.getElementById('viewer');
    viewer.definition = definitionJson;
    viewer.data = dataArray;

## ⚡ Tips para .NET

- Usa `JsonSerializer.Serialize()` para convertir tus modelos a JSON
- Pasa los datos como `List<Dictionary<string, object>>` o tu modelo directamente
- Para datos de múltiples fuentes, usa el formato `{ "alias": [...] }`
- El viewer funciona tanto en Blazor Server (con IJSRuntime) como en Blazor WebAssembly