Crie relat�rios com o Stimulsoft Reports.Web para .NET

Fique por dentro

Todo desenvolvedor j� viveu a reuni�o de levantamento de requisitos na qual o cliente toma a palavra para falar sobre a import�ncia de algum relat�rio, sem que tenhamos j� discutido como as informaç�es que ele apresentar� ser�o geradas. Essa cena demonstra como a emiss�o de relat�rios � uma funcionalidade importante para o cliente.

Falando honestamente, criar relat�rios pode levar horas, sen�o dias, dependendo da complexidade do documento. O jeito para n�o atrasar as outras tarefas por conta de relat�rios � contar com boas ferramentas na hora de program�-los e esse artigo apresentar� o Stimulsoft Reports.Web para .NET (Figura 1) como uma delas.

Figura 1. Stimulsoft Reports.Web em funcionamento no navegador

Stimulsoft Reports.Web � uma ferramenta para a criaç�o de relat�rios que pode ser executada no navegador e � facilmente integrada a aplicaç�es ASP.NET, ASP.NET MVC e .NET Core.

Inscreva-se na mat�ria .NET Core

Aqui nesse artigo veremos como integrar o pacote Stimulsoft Reports.Web para .NET Core com uma aplicaç�o ASP.NET Core MVC que gera e exibe relat�rios (Figura 2). A aplicaç�o vai acessar um banco de dados SQL Server utilizando as classes DataSet e DataTable.

Figura 2. Relat�rio emitido pela aplicaç�o

Caso a sua aplicaç�o utilize o Entity Framework para persist�ncia de dados � poss�vel integrar o Stimulsoft Reports.Web a ela, mas ainda ser� necess�rio utilizar objetos DataSet e DataTable. Os relat�rios Stimulsoft Reports se comunicam com os bancos de dados apenas utilizando estes componentes. Fique � vontade para utilizar os coment�rios e tirar qualquer d�vida nesse processo.

Instalaç�o

Começaremos pela instalaç�o do pacote da Stimulsoft em uma aplicaç�o ASP.NET Core MVC.

Para acompanhar esse artigo voc� vai precisar ter uma aplicaç�o ASP.NET Core MVC no seu computador.

Com a aplicaç�o aberta no Visual Studio encontre o Gerenciador de Soluç�es, clique com o bot�o direito do mouse nas depend�ncias e escolha a opç�o Gerenciar Pacotes do Nuget.

Na opç�o Gerenciar Pacotes do Nuget > Procurar escreva �Stimulsoft�. Ser�o exibidos diversos pacotes, dentre os quais escolheremos Stimulsoft.Reports.Web.NetCore. Veja a instalaç�o do pacote na Figura 3.

Figura 3. Instalaç�o do pacote Stimulsoft.Reports.Web.NetCore no Visual Studio

Ap�s instalado, o Stimulsoft Reports.Web n�o precisar� de nenhuma configuraç�o nesse caso de uso inicial.

A partir daqui veremos os passos necess�rios para colocar o Stimulsoft Reports.Web em funcionamento em uma das p�ginas da aplicaç�o.

Passo 1/5: Criando o controller e view para o editor de relat�rios

Ao utilizar o Stimulsoft Reports.Web, pelo menos uma das views da aplicaç�o ser� destinada a conter o editor de relat�rios, uma ferramenta visual utilizada para o design deles.

Nesse passo faremos essa configuraç�o: no Gerenciador de Soluç�es, clique com o bot�o direito na pasta Controllers e selecione a opç�o Adicionar → Controlador. Ser� aberta uma tela com opç�es, onde devemos escolher Controlador MVC - Vazio e ao adicion�-lo d� o nome de �EditorController�.

Agora, no c�digo gerado para este Controller, dentro do m�todo Index, clique com o bot�o direito em View() e no menu selecione a primeira opç�o, Adicionar Exibiç�o. Aceite o nome Index, e clique em Adicionar, como mostra a Figura 4.

Figura 4. Adicionando o Controller EditorController e criando a View Index

Para exibir um Editor de Relat�rios Stimulsoft Reports em nossa View Index, vamos utilizar um objeto StiNetCoreDesigner.

Com ele a View ser� exibida como um Editor para criar e alterar relat�rios de forma visual, arrastando componentes para a �rea do relat�rio, al�m de alterar as configuraç�es que forem necess�rias.

Vamos substituir o c�digo que foi gerado para esta view no arquivo Views/Editor/Index.cshtml pelo c�digo da Listagem 1.


@using Stimulsoft.Report.Mvc;

@Html.StiNetCoreDesigner(new StiNetCoreDesignerOptions()
{
  Actions =
  {
    GetReport = "GetReport",
    PreviewReport = "PreviewReport",
    DesignerEvent = "DesignerEvent"
  }
})

Listagem 1. Adicionando o objeto StiNetCoreDesigner a View Index

Explicando o c�digo:

Linha 1: Refer�ncia a biblioteca Stimulsoft.Report.MVC que tem as funcionalidades de relat�rios

Linha 3: Inst�ncia do objeto StiNetCoreDesigner que � o Editor de Relat�rios.

Linhas 5 a 9: Declaraç�o dos tr�s m�todos: GetReport, PreviewReport e DesignerEvent que vamos implementar em nosso Controlador.

O Editor n�o serve apenas para exibir um relat�rio, mas permite diversos eventos envolvendo a criaç�o e ediç�o de um relat�rio. Os seguintes m�todos tornam isso poss�vel:

O m�todo GetReport retorna um relat�rio para a View.
O m�todo PreviewReport permite visualizar uma pr�via do relat�rio com as alteraç�es que aplicarmos.
O m�todo DesignerEvent permite todos eventos do editor, como criar um relat�rio, adicionar um componente, e outros.

Vamos abrir o c�digo do Controlador no arquivo Controllers/EditorController.cs e implementar os tr�s m�todos do nosso Editor de Relat�rios. Precisamos disponibilizar as funcionalidades de relat�rios da Stimulsoft para aplicaç�es ASP .NET Core MVC, para isso vamos incluir as refer�ncias as bibliotecas Stimulsoft.Report e Stimulsoft.Report.Mvc no in�cio do c�digo do Controlador conforme a Listagem 2.


using Stimulsoft.Report;
using Stimulsoft.Report.Mvc;

Listagem 2. Refer�ncias as bibliotecas do Stimulsoft Reports

Vamos escrever o m�todo GetReport de acordo com o c�digo da Listagem 3.


public IActionResult GetReport()
{
  StiReport report = new StiReport();
  return StiNetCoreDesigner.GetReportResult(this, report);
}

Listagem 3. M�todo GetReport

Explicando o c�digo:

Linha 3: inst�ncia do objeto StiReport que representa o relat�rio.

Linha 4: Retornando o objeto StiNetCoreDesigner que representa o Editor de relat�rios com o novo relat�rio que foi criado.

Vamos adicionar o m�todo PreviewReport conforme a Listagem 4.


public IActionResult PreviewReport()
{
  StiReport report = StiNetCoreDesigner.GetActionReportObject(this);
  return StiNetCoreDesigner.PreviewReportResult(this, report);
}

Listagem 4. M�todo PreviewReport

Explicando o c�digo:

Linha 3: retorna uma c�pia do relat�rio preparada para visualizaç�o.

Linha 4: retorna o relat�rio para visualizaç�o no Editor para a View

Agora vamos adicionar o terceiro m�todo DesignerEvent conforme o c�digo da Listagem 5.


public IActionResult DesignerEvent()
  {
    return StiNetCoreDesigner.DesignerEventResult(this);
   }

Listagem 5. M�todo DesignerEvent

Explicando o c�digo:

Linha 3: Este m�todo lida com todos eventos no editor (inclus�o e alteraç�o de componentes no relat�rio, configuraç�o de dados etc.) e responde ao cliente que � o Editor de relat�rios exibido na View.

Vamos usar o template ou modelo de aplicaç�o ASP .NET Core gerado pelo framework para exibir o Editor de relat�rios. Para isso vamos abrir o arquivo de layout Views/Shared/_Layout.cshtml e alterar um dos links de menu para acessar a View que criamos para o Editor de relat�rios. Na tag li com a classe �nav-item� vamos mudar o atributo asp-controller do componente �a� para �Editor�, que � o Controlador que criamos, e o atributo asp-action fica como �Index� que � o m�todo que retorna a View, conforme o c�digo da Listagem 6.


<li class="nav-item">
  <a class="nav-link text-dark" asp-area="" asp-controller="Editor" 
   asp-action="Index">Editor de relat�rios</a>
</li>

Listagem 6. Link no menu para o Editor de relat�rios

Passo 2/5: Utilizando o editor de relat�rios

Execute a aplicaç�o para acessar o editor de relat�rios, como demonstrado na Figura 5. Voc� deve notar que no menu superior na p�gina ser� adicionado um novo link para a p�gina do editor de relat�rios.

Figura 5. Executando a aplicaç�o e exibindo o Editor de Relat�rios

Vamos entender a interface visual do Editor de Relat�rios, conforme a Figura 6.

Figura 6. Divis�o do Editor em tr�s partes

Identificando as tr�s principais partes do Editor de Relat�rios:

�rea de design do relat�rio. Neste local vamos arrastar os componentes visuais para formar o relat�rio.
Menu do Editor. Aqui temos diversos componentes para compor o relat�rio e opç�es de configuraç�es do relat�rio.
Painel Lateral. Este painel est� dividido em tr�s abas:
- Properties - exibe as propriedades do componente selecionado para configuraç�es;
- Dictionary - permite adicionar e alterar as fontes de dados para o relat�rio;
- Report Tree - exibe a estrutura do relat�rio. com seus componentes.

Para criar um modelo de relat�rio, localize a aba Insert do editor de relat�rios e no segundo �cone, chamado Bands selecione o item Report Title. V� para a �rea quadriculada do relat�rio e ao clicar adicione o componente Report Title, como na Figura 7.

Figura 7. Adicionando o componente Report Title

Para inserir um t�tulo ao relat�rio no Report Title selecione o �cone �Text� e clique no componente Report Title e edite o texto, como mostra a Figura 8.

Figura 8. Adicionando componente texto ao Report Title

Vamos adicionar uma fonte de dados ao relat�rio, vindo de um arquivo XML na pasta �Data� do projeto. Adicionaremos tamb�m um DataBand e arrastamos os campos desejados, como vemos na Figura 9.

Figura 9. Adicionando fonte de dados e uma DataBand para exibir detalhes dos dados

Vamos salvar o relat�rio em uma pasta de nome �Reports� no diret�rio do projeto. Vamos utilizar este arquivo de relat�rio para testar o componente que exibe o relat�rio em uma view, conforme a Figura 10.

Figura 10. Salvando o relat�rio para ser exibido no Visualizador de Relat�rios

Passo 3/5: Criar Controller e View para o Visualizador de Relat�rios

Agora precisamos criar outra view para apenas exibir um relat�rio j� criado. Para isso crie o controlador Viewer.

Repita os passos da Figura 4.

Nesta view vamos utilizar o objeto StiNetCoreViewer do pacote Stimulsoft Reports, que vai exibir um relat�rio incorporado a View com opç�es de impress�o e de exportaç�o para diversos formatos.

Vamos abrir o arquivo Views/Viewer/Index.cshtml da View que foi criada e substituir o c�digo gerado pelo da Listagem 7.


@using Stimulsoft.Report.Mvc;

@{
  ViewData[�Title�] = �Index�;
}

<h1>Visualizando relat�rios Stimulsoft Reports</h1>
<div class=�container�>
@Html.StiNetCoreViewer(new StiNetCoreViewerOptions()
  {
    Actions =
    {
     GetReport = "GetReport",
     ViewerEvent = "ViewerEvent"
    }
})
</div>

Listagem 7. Exibindo um relat�rio incorporado a View

Basicamente � o mesmo c�digo da primeira View, a principal diferença s�o os m�todos que ser�o criados no controller:

GetReport que cria e retorna o objeto que representa o relat�rio,
ViewerEvent que retorna o Visualizador de Relat�rios para a nossa View que suporta as opç�es de impress�o e exportaç�o de relat�rios.

Vamos abrir o arquivo Controllers/ViewerController.cs do controller que criamos e adicionar o c�digo da Listagem 8.


public ActionResult GetReport()
{
  StiReport report = new StiReport();
  report.Load(StiNetCoreHelper.MapPath(this, "Reports/Report.mrt"));
  return StiNetCoreViewer.GetReportResult(this, report);
}

public ActionResult ViewerEvent()
{
  return StiNetCoreViewer.ViewerEventResult(this);
}

Listagem 8. View do controller

Explicando o c�digo:

Linha 3: Criamos o relat�rio

Linha 4: Carregamos o arquivo do relat�rio salvo no projeto

Linha 5: Retornamos o relat�rio para o Visualizador de Relat�rios

Linha 10: Retornamos o Visualizador de Relat�rios para a View

Agora vamos criar uma opç�o no menu da aplicaç�o para o Visualizador de Relat�rios. Para isso vamos abrir o arquivo de layout no caminho Views/Shared/_Layout.cshtml. Na segunda tag li com a classe nav-item vamos mudar o atributo asp-controller do componente �a� para Viewer, que � o Controlador que criamos, e o atributo asp-action fica como Index o m�todo que retorna a View, conforme o c�digo abaixo da Listagem 9.


<li class="nav-item">
  <a class="nav-link text-dark" asp-area="" asp-controller="Viewer" 
  asp-action="Index">Visualizar relat�rio</a>
</li>

Listagem 9. Opç�o de visualizaç�o no menu

Vamos executar a aplicaç�o e ver o Visualizador de Relat�rios na nova View. Veja a Figura 11.

Figura 11. Executando a aplicaç�o e exibindo o Visualizador de Relat�rios

Passo 4/5: Fornecendo dados ao relat�rio

Para fornecer dados de um banco de dados a serem exibidos pelo relat�rio vamos criar uma pasta Data no projeto com um arquivo chamado bd.cs.

Este arquivo ser� uma classe que vai acessar o banco de dados e retornar um DataTable para preencher os dados no relat�rio, conforme o c�digo da Listagem 10.

Voc� pode utilizar todo o c�digo, apenas alterando a propriedade connectionString com os dados da sua conex�o ao seu banco de dados SQL Server.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Data;
using System.Data.SqlClient;

namespace RelatoriosStimulsoftReports.Data
{
  public class bd
  {
    private string _connectionString = @"Integrated Security=False; 
    Data Source=.\SQLEXPRESS;
    Initial Catalog=ControleFinanceiroPessoal; User ID=sa; Password=zaxx34;"; 

    public DataTable retornaDataTable<T>(string query) where T : IDbConnection, new()
    {
      using (var conn = new T())
      {
        using (var cmd = conn.CreateCommand())
        {
           cmd.CommandText = query;
           cmd.Connection.ConnectionString = _connectionString;
           cmd.Connection.Open();
           var table = new DataTable();
           table.Load(cmd.ExecuteReader());
           return table;
        }
      }
    }
  }
}

Listagem 10. Arquivo bd.cs

Agora vamos acrescentar c�digo da Listagem 11 ao Controller no arquivo Controller/ViewerController.cs para retornar dados ao relat�rio. Veja que adicionamos refer�ncias a classe bd com o namespace RelatoriosStimulsoftReports.Data e as bibliotecas System.Data e System.Data.SqlClient para criar os objetos DataSet e DataTable.


using RelatoriosStimulsoftReports.Data;
using System.Data;
using System.Data.SqlClient;

Listagem 11. Refer�ncias

No m�todo GetReport vamos criar um objeto DataSet e adicionar a ele um DataTable com os dados atrav�s da classe bd, conforme a Listagem 12.


public ActionResult GetReport()
{
  StiReport report = new StiReport();
  report.Load(StiNetCoreHelper.MapPath(this, "Reports/relatorio_teste.mrt"));
  DataSet dataSet = new DataSet("dataSet");
  DataTable dataTable = new DataTable("Gastos");
  string sql = @"select CONVERT(VARCHAR(10),Data,103) as Data
    ,Area
    ,FORMAT(VALOR, 'c', 'pt-BR') as Valor
  from Gastos";
  dataTable = data.retornaDataTable<SqlConnection>(sql);
  dataSet.Tables.Add(dataTable);
  report.RegData("dataSet","dataSet",dataSet);
  return StiNetCoreViewer.GetReportResult(this, report);
}

Listagem 12. M�todo GetReport

Explicando o c�digo:

Linha 5: DataSet com o mesmo nome que usamos no relat�rio.

Linha 6: DataTable com o mesmo nome do DataSource do relat�rio.

Linha 7: Instruç�o sql que traz os dados da tabela Gastos do banco de dados;

Linha 11: trazemos os dados para o DataTable utilizando a classe bd.

Linha 12: Adicionamos o DataTable ao DataSet;

Linha 13: Configuramos o DataSet como fonte de dados do relat�rio.

Passo 5/5: Alterar o relat�rio criado para exibir os dados da consulta ao banco de dados

Agora precisamos modelar o relat�rio criado de acordo com a fonte de dados que ser� fornecida pelo Controller.

Abra no Editor de Relat�rios o relat�rio salvo no projeto. Acesse a aba Dictionary no Editor e adicione um Data Source e escolha o tipo de conex�o Data from DataSet, DataTables.

Na janela que abre a seguir, no primeiro campo Name in source digite o nome que ter� o DataSet a ser criado, e nos campos Name e Alias digite o nome do DataTable que vai conter os dados.

Em seguida clique no primeiro �cone para criar as colunas do DataTable e preencha os tr�s primeiros campos com os nomes das colunas do DataTable.

A princ�pio mantenha o Type das colunas do DataTable como string pois apesar de existir a opç�o de formatar dados no editor de relat�rios, como por exemplo Data e Moeda, esta formataç�o n�o funciona corretamente em 100% dos casos. Por isso � melhor j� trazer os dados com a formataç�o desejada a partir do c�digo.

Agora vamos acompanhar a modelagem do relat�rio conforme a Figura 12.

Figura 12. Modelando o relat�rio de acordo com os dados a serem exibidos

Na Figura 13 vemos a execuç�o da aplicaç�o e a exibiç�o do relat�rio com os dados do banco de dados.

Figura 13. Exibindo o relat�rio com os dados de uma consulta a banco de dados

Com o Stimulsoft Reports criamos relat�rios facilmente adicionando componentes visuais e integramos o relat�rio a nossa aplicaç�o com poucas linhas de c�digo. Atender as demandas por relat�rios ser� mais simples e levar� menos tempo. Com a ajuda deste artigo voc� pode começar a criar seus relat�rios que podem evoluir � medida que explora os recursos desta ferramenta.

Confira tamb�m

O que � .NET Core?

Curso

Hello world .NET Core

Curso

Curso de Entity Framework

Curso

Crie relat�rios com o Stimulsoft Reports.Web para .NET

Nesse artigo veremos como integrar o pacote Stimulsoft Reports.Web para .NET Core com uma aplicação ASP.NET Core MVC utilizando as classes DataSet e DataTable.

Instalaç�o

Passo 1/5: Criando o controller e view para o editor de relat�rios

Passo 2/5: Utilizando o editor de relat�rios

Passo 3/5: Criar Controller e View para o Visualizador de Relat�rios

Passo 4/5: Fornecendo dados ao relat�rio

Passo 5/5: Alterar o relat�rio criado para exibir os dados da consulta ao banco de dados

Confira tamb�m

O que � .NET Core?

Hello world .NET Core

Curso de Entity Framework

Artigos relacionados