ASP .NET - Exibindo os dados de um GridView em um relatório ReportViewer no VS 2017 - I

Este artigo mostra como exibir dados de um controle GridView em um relatório ReportViewer no Visual Studio 2017 Community.

Já ouviu falar no ReportViewer, o gerador de relatórios da Microsoft para o Visual Studio ?

Se nunca ouviu falar então dê uma espiada na seção ReportViewer do site Macoratti .net : ReportViewer (seção do site Macoratti .net)

Para acompanhar este artigo você vai ter que instalar o ReportViewer no VS 2017. Eu mostro como fazer isso neste artigo : ReportViewer - Instalando no Visual Studio 2017

Neste artigo eu vou criar um relatório ReportViewer bem simples que será conectado a um DataSet Tipado exibindo os dados em um GridView onde poderemos selecionar registros para exibir em um relatório Reportview.

As etapas para criar o projeto e o relatório estão resumidas as seguir:

1. Criar um projeto ASP .NET Web Forms

2. Incluir um DataSet Tipado (DataSet)

3. Adicionar um DataTable ao DataSet

4. Adicionar Colunas ao DataTable

5. Adicionar o RDLC Report

6. Escolher o DataSet e definir os campos

7. Escolher o Layout

8. Adicionar o ReportViewer na página

9. Popular o RDLC a partir do banco de dados Northwind.mdf

Se você não sabe como criar um relatório ReportViewer simples para web visite a seção  ReportViewer - Macoratti .net.

Eu vou usar o banco de dados Northwind.mdf que pode ser obtido e instalado neste link: http://www.microsoft.com/en-us/download/details.aspx?id=23654

Usarei também a tabela Customers deste banco de dados. Essa tabela possui a seguinte estrutura:

Vamos usar os nomes dos campos no DataTable que iremos criar no artigo.

Para concluir vamos definir a string de conexão com o banco de dados Northwind.mdf no arquivo Web.Config :

...
<configuration>
  <connectionStrings>
    <add name="conexaoSQL" connectionString="Data Source=MACORATTI;Initial Catalog=Northwind;Integrated Security=True" />
  </connectionStrings>
  <system.web>
...

Criando o projeto ASP .NET no VS 2017

Abra o VS 2017 Community e clique em New Project escolhendo o template ASP .NET Web Application(.NET Framework):
 

A seguir selecione o template Empty e marque Web Forms, e clique em OK.

Agora vamos incluir uma página no projeto via menu Project -> Add New Item e selecionando o template Web Form com o nome Default.aspx e clicando em Add:

Instalando o ReportViewer para web

Como eu vou precisar de um controle ReportViewer para web vamos instalar logo esse pacote em nosso projeto.

Clique com o botão direito sobre o projeto e a seguir clique em Manage Nuget Packages.

Clique na guia Browse e informe reportviewercontrol na caixa de busca. Você verá as duas opções atuais do controle: para Windows Forms e para WebForms:

Selecione a opção para WebForms e clique no botão Install.

Criando o DataSet, o DataTable e o Relatório Rdlc
 

A partir do menu Project -> Add New Item clique na guia Data e escolha o template DataSet informando o nome Customers.xsd e clique em Add:

Com o DataSet aberto clique com o botão direito sobre o descritor e no menu suspenso clique em Add-> DataTable :
 

Vamos incluir no DataTable criado os nomes das colunas que desejamos exibir no relatório RDLC. Os nomes das colunas devem ser iguais aos da tabela Customers.
 

Para incluir uma coluna clique com o botão direito sobre o DataTable a seguir clique em Add-> Column e informe o nome da coluna:

Para ficar mais simples vou incluir apenas as colunas : CustomerID, ContactName, City e Country no DataTable.

Inclui no projeto via menu Project-> Add New Item um Report RDLC chamado Relatorio.rdlc usando o Report Wizard e clicando em Add:

Nota:  Para localizar o controle digite report na caixa de busca e você verá as opções : Report e Report Wizard

Usando o assistente selecione os dados conforme mostra a figura abaixo e clique em Next> :

Escolha os campos a exibir e clique em Next:> e a seguir escolha o layout do relatório :

Ao final você deverá obter o seguinte leiaute para o relatório: (Eu estou usando o leiaute mais simples)

Pronto, iremos preencher esse relatório com dados de um controle GridView que o usuário vai selecionar.

Incluindo um ReportViewer na página

Para poder exibir os dados no relatório precisamos incluir o controle ReportViewer na página web.

O controle ReportViewer requer que incluamos o controle ScriptManager na página.

Então abra a ToolBox e inclua esses controles na página Default.aspx conforme mostra a figura abaixo :

Nota: (Veja como criar a guia Reporting no artigo : ReportViewer - Instalando no Visual Studio 2017)

A seguir inclua um controle GridView(gvCustomers) e um Button(btnExibir) na página Default.aspx configurados conforme mostra o código abaixo:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AspNet_RptGridView.Default" %>

<%@ Register Assembly="Microsoft.ReportViewer.WebForms" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
       <asp:ScriptManager ID="ScriptManager1" runat="server">
       </asp:ScriptManager>
        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="chkSelect" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="CustomerId" HeaderText="ID" />
            <asp:BoundField DataField="ContactName" HeaderText="Nome" />
            <asp:BoundField DataField="City" HeaderText="Cidade" />
            <asp:BoundField DataField="Country" HeaderText="Pais" />
        </Columns>
    </asp:GridView>
    <br />
    <asp:Button ID="btnExibir" Text="Exibir no Relatório" runat="server" OnClick="ExibirRDLC" />
    <hr />
        <rsweb:ReportViewer ID="ReportViewer1" runat="server">
        </rsweb:ReportViewer>
    </form>
</body>
</html>

Observe que estamos usando um ItemTemplate do GridView para definir uma coluna do tipo checkbox - chkSelect -  que iremos usar para selecionar a linha do GridView.

Agora precisamos definir código no arquivo Code-Behind Default.aspx.cs para carregar os dados e preencher o GridView e a seguir definir o código no evento ExibirRDLC do Button.

Vamos fazer isso na segunda parte do artigo. Aguarde...
 

Portanto, quer comais quer bebais, ou façais outra qualquer coisa, fazei tudo para glória de Deus.
 1 Coríntios 10:31

             Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter
 

Referências:

• Seção VB .NET do Site Macoratti.net

• Super DVD .NET - A sua porta de entrada na plataforma .NET

• Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#

• Seção C# do site Macoratti.net

• Super DVD C#

• Super DVD Visual Basic

• Curso Básico VB .NET - Vídeo Aulas

• Curso C# Básico - Vídeo Aulas

• Seção de Jogos do site Macoratti .net

• ReportViewer - Macoratti.net

• Gerando Relatorios com o ReportViewer - Macoratti.net

• EBook - Usando o ReportViewer (revisão) - Macoratti.net

• ReportView - Usando parâmetros - Macoratti.net

• ReportViewer - Relatórios Dinâmicos com ASP .NET

• ReportViewer - Instalando no Visual Studio 2013

• ReportViewer 2015

José Carlos Macoratti