logo
small logo
  • Producto
  • Comprar
  • Ayuda
  • About
  • Consola de usarios Ayuda
    • en
    • de
    • JP
    • ZH
  • Página principal
  • /
  • Blogs
  • /
  • Cómo representar algunos informes en una página en Blazor
  • Informes y documentos PDF en Blazor

    5 de abril de 2021

    Microsoft ha lanzado recientemente una plataforma web llamada Blazor. Este marco permite crear una interfaz

    read more
  • Personalización de la barra de herramientas y configuración de exportación en FastReport.Web para Core

    6 de septiembre de 2021

    Nuestros usuarios a menudo necesitan cambiar la apariencia de la barra de herramientas o personalizar

    read more
  • Cómo actualizar el informe web FastReport.Core

    21 de septiembre de 2020

    A veces es necesario actualizar el informe, por ejemplo, si ingresa un nuevo valor de

    read more
  • Working with NuGet packages in FastReport

    22 de noviembre de 2021

    UPD: Applies to the versions of FastReport .NET before 2022.2. License packages are now available

    read more
  • La personalización de funciones extendidas de exportación en FastReport.Web for Core y Blazor Server

    6 de diciembre de 2021

    Muy a menudo nuestras usuarias necesitan modificar los parámetros de exportación del archivo, esto

    read more

Cómo representar algunos informes en una página en Blazor

12 de julio de 2022

Muy a menudo nuestros usuarios necesitan representar dos informes con datos diferentes en una página. Imaginamos la situación, donde usted necesita comparar los informes del primer mes y del último mes. Para solucionar vuestro problema tenemos una aplicación de apoyo  Blazor WebReport.

Un ejemplo de utilización de dos informes en una página en Blazor

Vamos a considerar en más detalle cómo realizarlo en vuestra aplicación de Blazor. Utilizamos una aplicación de demostración del artículo “Los informes y los documentos de PDF en la aplicación de Blazor” como base y eliminamos todo lo innecesario.

Al principio, intentamos simplemente representar dos informes en una página. Vamos al archivo “Pages\Index.razor.cs”.

Luego añadimos el segundo informe. No olvidamos primeramente anunciarlo y registrar los datos para él, y luego escribir la parte siguiente del código:

Report Report2 { get; set; }
 
 Report2 = Report.FromFile(reportPath);
 Report2.RegisterData(DataSet, "NorthWind");

Bien, ahora representamos nuestro informe. Pasamos al archivo “Pages\Index.razor.cs” y escribimos el código necesario:

 UserWebReport2 = new WebReport
 {
 Report = Report2,
 Toolbar = toolbar2
 };

Ahora nuestro archivo será el siguiente:

 public partial class Index
 {
 readonly string directory;
 const string DEFAULT_REPORT = "Filter Employees.frx";
 public Report Report1 { get; set; }
 public Report Report2 { get; set; }
 public WebReport UserWebReport { get; set; }
 
 public WebReport UserWebReport2 { get; set; }
 
 DataSet DataSet { get; }
 
 
 protected override void OnParametersSet()
 {
 base.OnParametersSet();
 
 string path = 
 Path.Combine(
 directory,
 string.IsNullOrEmpty(ReportName) ? DEFAULT_REPORT : ReportName);
 
 Report1 = Report.FromFile(path);
 Report2 = Report.FromFile(path);
 
 // Registers the application dataset
 Report1.RegisterData(DataSet, "NorthWind");
 Report2.RegisterData(DataSet, "NorthWind");
 
 
 ToolbarSettings toolbarSettings1 = new ToolbarSettings()
 {
 Color = Color.Red,
 IconColor = IconColors.White,
 Position = Positions.Left,
 };
 
 ToolbarSettings toolbarSettings2 = new ToolbarSettings()
 {
 Color = Color.Black,
 IconColor = IconColors.White,
 Position = Positions.Right,
 };
 
 UserWebReport = new WebReport
 {
 Report = Report1,
 Toolbar = toolbarSettings1,
 };
 UserWebReport2 = new WebReport
 {
 Report = Report2,
 Toolbar = toolbarSettings2,
 };
 }
 
 public Index()
 {
 directory = Path.Combine(
 Directory.GetCurrentDirectory(),
 Path.Combine("..", "..", "Reports"));
 
 DataSet = new DataSet();
 DataSet.ReadXml(Path.Combine(directory, "nwind.xml"));
 }
 }

Muy bien, ahora vamos al archivo “Pages/Index.razor” y escribimos la componente siguiente: 

<WebReportContainer WebReport="@UserWebReport2"/>

Puede ver el resultado por ejecutar nuestra aplicación Blazor y abrir cualquier informe. A título ilustrativo hemos seleccionado un informe con gráficos y diagramas.

La representación de dos informes en Blazor

Y si:
- Queremos ver los datos diferentes en estos informes;
- Queremos ver los informes diferentes en cada página;
- Queremos ver un informe que contenga los empleados y sus salarios para cada mes;
- Queremos ver un informe con los datos de Septiembre, y el secundo con los datos de Octubre;
- Queremos abrir rápidamente otro informe sin cerrar el primero.

Hay una respuesta a todas estas situaciones. ¡Es posible realizarlo!

Utilizamos FastReport .NET, en la que abrimos el administrador de diseño y cambiamos nuestro Simple List.frx estándar. Conectamos una nueva fuente de datos, en nuestro caso esto es XML:

La conexión de una nueva fuente de datos

Luego editamos un poco el informe, eliminamos todo lo innecesario y conservamos solo los campos que necesitamos. En la captura de pantalla siguiente todos los cambios en el informe se muestran bien. 

La edición del informe

Ahora se requiere crear una condición para filtrar los datos. Pulsamos dos veces en la columna “Datos” a la izquierda. Luego en la pestaña “Filtro” escribimos una condición como en la captura de pantalla debajo. 

La filtración de datos en un informe

En este momento puede guardar el informe y abrir nuestra aplicación de demostración. Vamos a escribir una parte del código en el archivo “Pages/Index.razor”:

 public EventCallback Filter1()
 {
 UserWebReport.Report.Load(Path.Combine(directory,firstReport));
 UserWebReport.Report.SetParameterValue("Month", Select1);
 return default;
 }
 public EventCallback Filter2()
 {
 UserWebReport2.Report.Load(Path.Combine(directory,secondReport));
 UserWebReport2.Report.SetParameterValue("Month", Select2);
 return default;
 }
 public EventCallback ChangeReport1(){
 
 UserWebReport.Report.Load(Path.Combine(directory,firstReport));
 return default;
 }
 
 public EventCallback ChangeReport2(){
 
 UserWebReport2.Report.Load(Path.Combine( directory, secondReport));
 return default;
 }

Ahora vamos a añadir a una pagina con el informe cuatro listas desplegables para filtrar los datos y pasar entre los informes:

 <div style="display:flex;flex-direction:column;">
 <div style="display:flex;flex-direction:row;">
 <div style="display:flex;flex-direction:column;">
 <select style= "margin-left:370px;" @onclick=ChangeReport1() @bind="@firstReport">
 <option>Simple List.frx</option>
 <option>Chart.frx</option>
 <option>Filter Employees.frx</option>
 </select>
 @if (@firstReport == "Filter Employees.frx")
 {
 <select style= "margin-left:400px;" @onclick=Filter1() @bind="@Select1">
 <option>September</option>
 <option>October</option>
 <option>November</option>
 </select>
 }
 </div>
 <div style="display:flex;flex-direction:column;">
 <select style= "margin-left:614px;" @onclick=ChangeReport2() @bind="@secondReport">
 <option>Simple List.frx</option>
 <option>Chart.frx</option>
 <option>Filter Employees.frx</option>
 </select>
 @if (@secondReport == "Filter Employees.frx")
 {
 <select style= "margin-left:681px;" @onclick=Filter2() @bind="@Select2">
 <option>September</option>
 <option>October</option>
 <option>November</option>
 </select>
}
 </div>
 </div> 

El archivo Pages/Index.razor será el siguiente después de todas las modificaciones: 

@page "/"
@using System.IO;
@using System.Data;
 
 <div style="display:flex;flex-direction:column;">
 <div style="display:flex;flex-direction:row;">
 <div style="display:flex;flex-direction:column;">
 <select style= "margin-left:370px;" @onclick=ChangeReport1() @bind="@firstReport">
 <option>Simple List.frx</option>
 <option>Chart.frx</option>
 <option>Filter Employees.frx</option>
 </select>
 @if (@firstReport == "Filter Employees.frx")
 {
 <select style= "margin-left:400px;" @onclick=Filter1() @bind="@Select1">
 <option>September</option>
 <option>October</option>
 <option>November</option>
 </select>
 }
 </div>
 <div style="display:flex;flex-direction:column;">
 <select style= "margin-left:614px;" @onclick=ChangeReport2() @bind="@secondReport">
 <option>Simple List.frx</option>
 <option>Chart.frx</option>
 <option>Filter Employees.frx</option>
 </select>
 @if (@secondReport == "Filter Employees.frx")
 {
 <select style= "margin-left:681px;" @onclick=Filter2() @bind="@Select2">
 <option>September</option>
 <option>October</option>
 <option>November</option>
 </select>
 }
 </div>
 </div> 
 <div style="display:flex;flex-direction:row;">
 <WebReportContainer WebReport="@UserWebReport"/>
 
 <WebReportContainer WebReport="@UserWebReport2"/>
 </div>
</div>

 

@code {
 
 private string dir = Path.Combine(
 Directory.GetCurrentDirectory(),
 Path.Combine("..","..", "Demos", "Reports"));
 
 [Parameter]
 public string ReportName { get; set; }
 
 [Parameter]
 public string Select1 { get; set; } = "September";
 
 [Parameter]
 public string Select2 { get; set; } = "October";
 
 [Parameter]
 public string firstReport { get; set; } = "Filter Employees.frx";
 
 [Parameter]
 public string secondReport { get; set; } = "Filter Employees.frx";
 
 public EventCallback Filter1()
 {
 UserWebReport.Report.Load(Path.Combine(directory,firstReport));
 UserWebReport.Report.SetParameterValue("Month", Select1);
 return default;
 }
 public EventCallback Filter2()
 {
 UserWebReport2.Report.Load(Path.Combine(directory,secondReport));
 UserWebReport2.Report.SetParameterValue("Month", Select2);
 return default;
 }
 public EventCallback ChangeReport1(){
 
 UserWebReport.Report.Load(Path.Combine(directory,firstReport));
 return default;
 }
 
 public EventCallback ChangeReport2(){
 
 UserWebReport2.Report.Load(Path.Combine( directory, secondReport));
 return default;
 }
 
}

Quiere variar un poco un informe. Vamos al archivo “Pages/Index.razor.cs” para pintar nuestras barras de herramientas al trabajo simultáneo con ellas. Añadimos el código siguiente: 

 ToolbarSettings toolbarSettings1 = new ToolbarSettings()
 {
 Color = Color.Red,
 IconColor = IconColors.White,
 Position = Positions.Left,
 };
 
 ToolbarSettings toolbarSettings2 = new ToolbarSettings()
 {
 Color = Color.Black,
 IconColor = IconColors.White,
 Position = Positions.Right,
 };

En este momento puede ejecutar la aplicación de demostración y ver el resultado:

La representación de dos informes en la aplicación de demostración Blazor

Se ve bien, pero puede mejorar un poco más. El paso siguiente es de añadir la filtración al segundo informe mediante las listas desplegables arriba: 

La filtración de informes mediante las listas desplegables

Bien, ahora cambiamos el informe en el segundo componente: 

La presentación de dos informes diferentes

En consecuencia, puede representar dos informes en una página, así como realizar las manipulaciones diferentes con ellos. Por ejemplo, intente de filtrar los datos o ver los varios informes al el mismo tiempo como se muestra arriba. En nuestra aplicación WebReport para su comodidad es posible personalizar la barra de herramientas para cada informe para sus necesidades.

Cabe notar que dos informes no es una limitación, que los puede tener diez en una página! Si, será posible realizar todas las acciones a cada informe.

Puede encontrar la demostración del proyecto de este artículo al directorio siguiente: FastReport.Net Trial\Demos\Core\FastReport.Blazor.DoubleReports

about product comprar
avatar
Kirill Kornienko
.NET Development
Fast Reports Team: Kirill Kornienko - NET Development at Fast Reports
.NET FastReport Core WebReport C# Report Blazor

Add comment
logo
  • 800-985-8986 (English, US)
  • +4930568373928 (German)
  • +55 19 98147-8148 (Portuguese)
  • info@fast-report.com
  • 901 N Pitt Str #325 Alexandria VA 22314
  • Comprar
  • Descargar
  • Documentación
  • Opiniones de usuarios
  • Cómo desinstalar nuestros productos
  • FAQ
  • Toturial en vídeo
  • Foro
  • Support SLA
  • Documentación técnica
  • Nuestras noticias
  • Quiénes somos
  • Socios
  • Extended licensing
  • Contactos

© 1998-2023 by Fast Reports Inc.

  • Privacidad

Trustpilot