Artigos .NET Abrindo relatório em janela popup em ASP.NET com JavaScript

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”, como mostra a Figura 1.

Criando o projeto
Figura 1. Criando o projeto

Após criar o nosso projeto com o nome Relatorio (podia ser qualquer outro nome), adicionaremos 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 conterá o nosso relatório de exemplo, como mostra a Figura 2.
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 adicionaremos na mesma se chamará Alunos.rdlc, como mostra a Figura 3.

Estrutura do projeto definida
Figura 3. Estrutura do projeto definida
É 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. Além disso, nesse artigo não será abordado como ligar o ReportViewer a um DataSet, o foco é apenas exibi-lo em uma interface web.

Desenvolvendo o Layout

Na Figura 4 tmeos 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.

Home.aspx
Figura 4. Home.aspx

Agora abriremos 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, como vemos na Figura 5.
ExibirRelatorio.aspx com o relatório configurado
Figura 5. ExibirRelatorio.aspx com o relatório configurado

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 sintaxe da Listagem 1. 

window.open(URL,NOME_JANELA,CARACTERISTICAS)
Listagem 1. Sintaxe de uso do método window.open
  • 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 na Listagem 2.

window.open("http://www.google.com.br","PrimeiraJanela");
Listagem 2. Chamando o método window.open com dois parâmetros
Vejamos na Listagem 3 que apenas dois parâmetros foram preenchidos, mesmo assim a sintaxe está perfeitamente correta. 
window.open("http://www.google.com.br","PrimeiraJanela","status=1,toolbar=1")
Listagem 3. Chamando o método window.open com dois parâmetros
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 sintaxe da Listagem 4. 
    window.open('ExibirRelatorio.aspx','JanelaExemplo','height=400,weight=400')
    Listagem 4. Chamada ao método window.open para abrir o relatório

    Para conferência, vamos abrir a nossa página home.aspx e visualizar o código HTML do nosso botão Listagem 5).

    
<asp:Button ID="Button1" runat="server" Text="Gerar" onclick="Button1_Click"     
  onclientclick="window.open('ExibirRelatorio.aspx','JanelaExemplo',
    'height=400,weight=400')" />
    Listagem 5. Código HTML do botão que abre o relatório
  4. Percebamos que o evento OnClientClick está adicionado ao nosso botã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, como mostra a Figura 6.

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 7.

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.