📊 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