INTRODUÇÃO

Nos mais diversos tipos de aplicação, é comum surgir a necessidade de apresentar relatórios para o usuário. Em aplicações web, uma das formas mais utilizadas para exibir relatórios, é mostrá-los na mesma página em que o usuário se encontra. Porém, pode ser útil e às vezes necessário que outra janela seja aberta com os dados, deixando a tela principal livre.

Para atender essa situação, será apresentado nesse artigo um método de simples compreensão e implementação para abrir relatórios em aplicações ASP.NET com Report Viewer em janela “modal”, utilizando para isso apenas Javascript.

CRIANDO O PROJETO

Inicie criando uma nova aplicação ASP.NET “vazia”, utilizando o menu File > New > Web Site, e escolhendo o template “ASP.NET Empty Web Application”.

Criando o projeto

Figura 1: Criando o projeto

Após criar o nosso projeto com o nome Relatorio(podia ser qualquer outro nome), iremos adicionar dois webforms ao nosso projeto. O primeiro se chamará Home.aspx e o segundo ExibirRelatorio.aspx.

Home.aspx: será a página inicial da nossa aplicação, é a partir dela que acessaremos o relatório.

ExibirRelatorio.aspx: essa página irá conter o nosso relatório de exemplo.

Adicionando dois WebForms ao projeto

Figura 2: Adicionando dois WebForms ao projeto

Em seguida crie uma pasta com o nome que desejar para armazenar os relatórios. No caso desse projeto de exemplo, o nome da pasta será Documentos, e o relatório que iremos adicionar na mesma se chamará Alunos.rdlc.

OBSERVAÇÃO: é uma boa prática criar uma pasta contendo todos os seus relatórios e, se possível, subpastas para facilitar a manutenção dos mesmos.

OBSERVAÇÃO: nesse artigo não será abordado como ligar o ReportViewer a um DataSet, o foco é apenas exibi-lo em uma interface web.

Estrutura do projeto definida

Figura 3: Estrutura do projeto definida

DESENVOLVENDO O LAYOUT

Home.aspx

Figura 4: Home.aspx

Este é o layout completo do nosso exemplo, que consiste basicamente de um título e um botão, contudo os ajustes podem ser feitos para suprir da sua necessidade, enfim você pode adicionar controles para facilitar a forma de o usuário gerar o seu próprio relatório.

Agora iremos abrir a nossa página ExibirRelatorio.aspx e adicionar o ReportViewer.

CONFIGURANDO O REPORTVIEWER

  1. Dentro do menu da Toolbox (Ctrl+alt+x caso não esteja visível), clique na seção Reporting
  2. Clique no item ReportViewer e adicione-o à nossa webpage.
  3. Agora selecionaremos qual relatório será exibido no ReportViewer.
  4. Clique no ReportViewer uma vez.
  5. Com o nosso objeto selecionado, uma seta no lado direito ficará visível, cliquemos nela.
  6. Abaixo de ReportViewer Tasks, podemos ver o seguinte texto "Choose Report" e uma DropdownList ao lado.
  7. Clicando na DropdownList, podemos visualizar todos os relatórios desenvolvidos. No nosso caso selecione Documentos\Alunos.rdlc.
  8. Após escolher o nosso relatório, precisamos também escolher a fonte de dados, para isso repita o passo 5 e em seguida escolha Choose DataSources, e em seguida escolha a sua string de conexão na coluna Data Source Instance.
  9. O ReportViewer exige o controle ScriptManager que se encontra na seção Ajax Extensions. Clique e arraste para a nossa página ExibirRelatorio.aspx.
ExibirRelatorio.aspx com o relatório configurado

Figura 5: ExibirRelatorio.aspx com o relatório configurado

EXPLICAÇÃO SOBRE O MÉTODO WINDOW.OPEN()

Antes de o utilizarmos na prática, é importante conhecer um pouco da função window.open do Javascript. O método window.open, é utilizado para gerar uma nova janela popup e possui a seguinte sintaxe:

Listagem 1: Sintaxe de uso do método window.open

window.open(URL,NOME_JANELA,CARACTERISTICAS)
  • URL: endereço da página que pretendo abrir a janela;
  • NOME_JANELA: nome atribuído para essa janela(parâmetro opcional);
  • CARACTERISTICAS: parâmetros utilizados para formatar a aparência da janela.

Vejamos alguns exemplos de como usarmos esse método:

Listagem 2: Chamando o método window.open com dois parâmetros

window.open("http://www.google.com.br","PrimeiraJanela");

OBSERVAÇÃO: vejamos que apenas dois parâmetros foram preenchidos, mesmo assim a sintaxe está perfeitamente correta.

Listagem 3: Chamando o método window.open com dois parâmetros

window.open("http://www.google.com.br","PrimeiraJanela","status=1,toolbar=1")

OBSERVAÇÃO: neste exemplo podemos observar que temos o terceiro parâmetro definido. O parâmetro caracteristicas possui vários atributos e vale apena conhecê-lo melhor antes de construir a sua janela.

Com isso terminamos a explicação sobre esse método, ele é bem simples e de fácil compreensão. Com certeza no final do nosso exemplo, ficará mais claro a sua utilização.

GERANDO REPORTVIEWER EM UMA TELA POPUP

Aora que já configuramos a nossa página que exibirá o relatório, basta apenas criarmos uma forma da página home.aspx, através de um evento click do botão, gerar o relatório(nós também podíamos adicionar essa função no evento Page_Load). Para isso façamos os seguintes procedimentos:

1. Abra a página Home.aspx ;

2. Clique no botão e veja suas propriedades (a tecla de atalho para visualizar a janela de propriedades é a F4);

3. Procure o evento (na guia de eventos) OnClientClick, e adicione o método a chamada ao método window.open. Utilize para isso a seguinte sintaxe:

Listagem 4: Chamada ao método window.open para abrir o relatório

window.open('ExibirRelatorio.aspx','JanelaExemplo','height=400,weight=400')

4. Para conferência, vamos abrir a nossa página home.aspx e visualizar o código html do nosso botão:

Listagem 5: Código HTML do botão que abre o relatório

5. Percebamos que o evento OnClientClick está adicionado ao nosso botão.

OBSERVAÇÃO: OnClientClick é diferente de OnServerClick. Se precisar você pode também adicionar um evento para rodar no lado do servidor.

TESTANDO A APLICAÇÃO

Vamos então testar a nossa aplicação, para isso basta que executemos a nossa pagina home.aspx, visualizando-a no browser.

Testando a aplicação

Figura 6: Testando a aplicação

Clicando no botão, o relatório deve ser aberto em uma nova janela, como mostra a figura a seguir.

Relatório exibido na janela modal

Figura 7: Relatório exibido na janela modal

Temos então o relatório aberto em uma janela popup, independente da página principal da aplicação. Como vimos, o procedimento é bastante simples e nenhum código C# ou VB.NET foi necessário.

Espero que tenham gostado. Até a próxima.