Reporte por parámetros (ReportViewer) – Visual Studio 2017

Introducción.

Existen varias formas de insertar un informe en .NET (ReportViewer, Crystal

Reports, o SQL Server Reporting Services). Este tutorial se centrará en cómo hacerlo
mediante el componente ReportViewer.

Componente ReportViewer.

El componente ReportViewer se va a encargar de contener el informe, el cual se

puede cargar tanto dinámica, como estáticamente.
Para insertar un ReportViewer, basta con ir al cuadro de herramientas y arrastrarlo
hacia el formulario Web.

El control Web del visor de informes requiere un System.Web.UI.ScriptManager

en el formulario Web, ya que internamente, el control utiliza llamadas Ajax para
generar el informe. Por esa razón, además del ReportViewer, se debe agregar un
control ScriptManager.

NOTA: si hay error al insertar el control, puede apoyarse consultando la siguiente

dirección: https://www.youtube.com/watch?v=yFXARwLrUd8
 Propiedades de un ReportViewer.

Entre las propiedades del ReportViewer se pueden destacar las siguientes:

• SizeToReportContent: determina si el área del informe tiene un tamaño fijo

o si equivale al tamaño del contenido del informe.
• Propiedades de la categoría “Barra de herramientas”: hace que se muestre
u oculte cualquier botón del ReportViewer (flechas de navegación, botón
imprimir,…).
• AsyncRendering: determina si el informe se representa asincrónicamente a
partir del resto de la página.

Enlazar con un informe.

Para enlazar el objeto con un informe, se debe dar clic en la pestaña superior
derecha del objeto y asignarle el informe.

Ejemplo práctico ReportViewer.

OBSERVACIÓN: el control ReportViewer se debe instalar independientemente de la

instalación estándar de Visual Studio 2017, para ello, se puede apoyar en las instrucciones
que se encuentran en la siguiente dirección electrónica (por estandarización se debe crear
una ficha llamada Informes en el cuadro de herramientas):
https://es.scribd.com/document/346646304/Instalando-ReportViewer-en-VisualStudio-2017

• Desde el entorno de Visual Studio 2017, implementar un sitio Web vacío

ASP.NET (Visual C#) llamado ReportePorParametros, y adicionar un formulario
Web llamado ReportePorParametrosClientesPedidos.aspx que permita visualizar
todos los registros que se relacionan entre las tablas Clientes y Pedidos de la base
de datos BDComercial.mdf, como también, se deberá poder digitar un nit y filtrar
los registros relacionados por dicho campo.

a) Adicionar el control ReportViewer: sitúese en el nombre del Sitio Web ASP.NET

(ReportePorParametros), de clic derecho para visualizar el siguiente menú
contextual:
 De clic en la opción Administrar paquetes NuGet.... En la ventana que aparece de
clic en el vínculo Examinar y en el campo de texto escriba reportviewercontrol. Se
deberá aprecia la siguiente figura:

Seleccione la opción Microsoft.ReportingServices.ReporViewerControl.WebForms, para

apreciar la siguiente figura:
De clic en el botón Instalar. Al iniciar el proceso de instalación, se deberá visualizar la
siguiente figura:

De clic en el botón Aceptar para visualizar la siguiente figura:

Nuevamente de clic en el botón Aceptar. Al terminar el proceso de instalación se
deberá ver la siguiente figura:

Ahora de clic en el formulario ReportePorParametrosClientesPedidos.aspx y en el

cuadro de herramientas de clic derecho para visualizar un menú emergente. En dicho
menú seleccione la opción Agregar pestaña y como nombre de dicha pestaña escriba
Informes. Luego sitúese sobre la pestaña Informes, de clic derecho para obtener la
siguiente figura:
De clic en la opción Elegir elementos.., para visualizar la ventana Elegir elementos del
cuadro de herramientas, tal como se aprecia la siguiente figura:

De clic en el botón Examinar, busque la carpeta donde guardo el sitio Web ASP.NET
(para el ejemplo es: C:\cv\Diapositivas
Prog_Web_ASPNET_C#\Programas\ReportePorParametros).
Desde allí abra las siguientes carpeta: packages ->
Microsoft.ReportingServicesControl.WebForms.150.900.148 -> Lib -> net40. En esta
última carpeta, seleccione el archivo Microsoft.ReportViewer.Winforms.dll, tal como se
aprecia en la siguiente figura:

Observación: el número 150.900.148, es la versión del componente ReportViewer

actualmente instalado, por lo que, según la instalación que se tenga este valor puede
variar.
Pulse el botón Abrir, para volver a la ventana Elegir elementos del cuadro de
herramientas. En la pestaña Componentes de .NET Framework busque y seleccione la
opción ReportViewer (como puede existir varias versiones, seleccione la versión más
reciente), tal como se aprecia en ver la siguiente figura:

NOTA: Si se visualiza la siguiente ventana de mensajes antes de seleccionar el respectivo

control ReportViewer (indica que ya existen algún control ReportViewer), de clic en el
botón Aceptar y realice el procedimiento para seleccionar el respectivo control
ReportViewer.
b) Adicionar los controles al formulario Web: El formulario web deberá contener los
siguientes controles: 3 Label (lbltitulo1, lbltitulo2, lblnit), 1 TextBox (txtnit), 2 Button
(btntodos, btnnit), 1 ReportViewer (reportviewer1 – ficha Informes) y 1
ScriptManager (ficha Extensiones Ajax). La interfaz de usuario quedara como se
aprecia en la siguiente figura:

c) Crear la base de datos: inicialmente se deberá crear la base de datos de forma local
desde el IDE de Visual Studio 2017. Dicha base de datos se llamará
BDComercial.mdf y dentro de ella se definirán las siguientes tablas: Clientes y
Pedidos.
La estructura de la tabla Clientes es:

La información que se le adiciono es:

La estructura de la tabla Pedidos es:

 La información que se le adiciono es:

d) Adicionar el Dataset (conjunto de datos): para adicionar el conjunto de datos, vaya

al menú Sitio Web, seleccione Agregar nuevo elemento y allí seleccione DataSet
(conjunto de datos). Se observará la siguiente figura:

Como Nombre del DataSet escriba DatosClientesPedidos y por último dé clic en el botón
Agregar para visualizar la siguiente figura:
 Se debe agregar el elemento a la carpeta App_Code al proyecto, para ello, dé clic en
el botón Sí. Se obtendrá la siguiente figura:

e) Seleccionar el origen de datos: para seleccionar el origen de datos, desde el IDE

de Visual Studio 2017, seleccione la opción del menú Ver, luego de clic en la
opción Explorador de servidores. Se deberá visualizar en la parte izquierda de la
pantalla la ventana del Explorador de servidores. Busque y de clic en el icono
Conectar con la base de datos, para visualizar la ventana Agregar conexión. Alli
dé clic en el boton Cambiar… y seleccione la opcion Archivo de base de datos de
Microsoft SQL Server, luego dé clic en el boton Examinar, busque y seleccione la
bases de datos BDComercial.mdf. Se deberá obtener una figura similar a la
siguiente:
Pulse el botón Aceptar. Luego en el cuadro Explorador de servidores despliegue la
base de datos BDComercial.mdf, y en la carpeta Tablas seleccione las tablas Clientes
y Pedidos y arrástrelas hacia el DataSet. Se visualizará la siguiente figura:

Dé clic el botón Si, para guardar la base de datos en el proyecto. Se obtendrá la

siguiente figura:

Dé clic derecho sobre el procedimiento Fill, GetData() de la tabla Clientes, como

se aprecia en la siguiente figura
Dé clic en la opción Configurar…, para obtener la siguiente figura:

Clic en la opción Generador de consultas…, para visualizar la siguiente figura:

Dé clic derecho en la ventana donde aparece la tabla Clientes, tal como se aprecia
en la siguiente figura:
Dé clic en la opción Agregar tabla…, se obtendrá la siguiente figura:

Seleccione la tabla Pedidos, pulse el botón Agregar y por ultimo de clic en el botón
Cerrar para obtener la siguiente figura:
Seleccione los campos deseados de las dos tablas para generar la instrucción SQL
Select (para el ejemplo seleccione los de la figura). Por otro lado, puede dar clic en
el botón Ejecutar consulta para visualizar los registros que cumplen la condición de
la instrucción SQL. Se mostrará la siguiente figura:

Luego pulse el botón Aceptar para obtener la siguiente figura:

Clic en el botón Siguiente para ver la siguiente figura:

Como Nombre de método escriba TodosCP y luego pulse el botón Finalizar para
regresar a la ventana del DataSet. Ahora de clic derecho sobre la opción
ClientesTableAdapter de la tabla Clientes, como se aprecia en la siguiente figura:

Clic en la opción Agregar consulta…, para obtener la siguiente figura:

Clic en el botón Siguiente para obtener la siguiente figura:

Nuevamente clic en el botón Siguiente para obtener la siguiente figura:

De clic en el botón Generador de consultas…, para visualizar la siguiente figura:

Modifique la sentencia SQL, como se aprecia en la siguiente figura:

Se adiciona la cláusula WHERE a la sentencia SQL igualando el campo nit de la tabla
Pedidos a un parámetro llamado @valor, para solicitar un parámetro para filtrar los
registros y ejecutar la sentencia. Si da clic en el botón Ejecutar consulta, se obtendrá
la siguiente figura:

Si se escribe el valor 200 (nit existente en la tabla Clientes), al pulsar el botón Aceptar
se mostrará la siguiente figura:
Clic en el botón Aceptar y nuevamente clic en el botón Siguiente para obtener la
siguiente figura:

Como Nombre de método escriba FiltroNit y luego pulse el botón Siguiente para
ver la siguiente figura
 Pulse el botón Finalizar para regresar a la ventana del DataSet. Como se aprecia en
la figura al objeto Clientes se le agrego un nuevo procedimiento llamado FiltroNit
GetDataBy, el cual permitirá realizar un filtrado de los registros de las tablas
Clientes/Pedidos.

f) Diseñar el reporte: para diseñar el informe dé clic en la pestaña

ReportePorParametrosClientesPedidos.aspx. Luego vaya al menú Sitio Web,
 seleccione Agregar nuevo elemento y allí seleccione Informe. Se observará la
siguiente figura:

Pulse el botón Agregar para obtener la siguiente figura:

Sobre el rectángulo, de clic derecho para observar un menú contextual. En dicho

menú seleccione Insertar, luego escoja la opción Encabezado de página, realice el
mismo procedimiento y escoja Pie de página. Se debería visualizar la siguiente
figura:
Ahora dentro de la ventana del Encabezado de página, de clic derecho para visualizar
la siguiente figura:

Seleccione la opción Imagen, y realice en la ventana que aparece realice el proceso

para adicionar una imagen.
Nuevamente dentro de la ventana del Encabezado de página, de clic derecho y
seleccione Cuadro de texto y escriba un título para el reporte. Se podría obtener la
siguiente figura

En el cuadro de herramientas Datos del informe, de clic para desplegar la carpeta

Campos integrados, seleccione y arrastre la opción Número de página hacia el Pie
de página. Se debería visualizar la siguiente figura:
Ahora en el espacio central, de clic derecho, seleccione Insertar, y luego Tabla. Se
debería visualizar la siguiente figura:

Al dar clic sobre la opción Tabla, se visualizará la ventana Propiedades del

conjunto de datos. Como Nombre escriba clientespedidos, como origen de datos
seleccione el DataSet DatosClientesPedidos, tal como se aprecia en la siguiente
figura:
Al pulsar el botón Aceptar, se obtendrá la siguiente figura:

Sobre la tabla, de clic derecho, seleccione Insertar columna y luego escoja Derecha
para adicionar una nueva columna. Repita este mismo proceso para que la tabla
contenga 8 columnas. Se debería apreciar la siguiente figura:
c
Ahora sitúese sobre la primera columna, de clic derecho para ver la siguiente
figura:

De clic sobre Expr1. Realice el mismo procedimiento en cada una de las columnas
(Modifique los títulos, y luego de clic en la pestaña gris al lado izquierdo de campo
nit para seleccionar todas las celdas y de clic en el icono centrar de la barra de
formato que aparece en el editor). Se deberá apreciar la siguiente figura:
g) Adicionar el informe al ReportViewer: sitúese en el formulario Web
ReportePorParametrosClientesPedidos, pulse la flecha del lado superior derecha
del objeto ReportViewer para ver la ventana Tareas de ReportViewer y escoja la
opción Choose Report y seleccione Report.rdlc. Se debería apreciar la siguiente
figura:

h) Ejecutar la aplicación: al ejecutar el formulario Web

ReportePorParametrosClientesPedidos.aspx, se deberá visualizar la siguiente figura
(puede ajustar el tamaño del reporte en la página en modo de diseño):
i) Parametrizar el reporte: para visualizar todos los registros o únicamente los registros
especificados se debe realizar los siguientes pasos:

1. Eliminar código del formulario Web: en modo diseño, sitúese en el formulario Web
ReportePorParametrosClientesPedidos.aspx, de clic en la pestaña Código, para obtener
la siguiente figura:

Dentro de la etiqueta <rsweb:ReportViewer.., elimine el código desde la etiqueta

<LocalReport… hasta </LocalReport>, como también, la etiqueta
<asp:ObjectDataSource…, para que el código quede como se visualiza en la
siguiente figura:
Como se observa se eliminó todo el código del objeto <asp:ObjectDataSource> y
dentro del objeto ReportViewer se eliminó todo el código del objeto <localReport>.

2. Escribir el código de los Button: ahora se deberá escribir el respectivo código para
los objetos Button (btntodos y btnnit). El código de cada botón es:
protected void btntodos_Click(object sender, EventArgs e)
{
ObjectDataSource ObjectDataSource1 = new ObjectDataSource(
"DatosClientesPedidosTableAdapters.ClientesTableAdapter", "GetData");
Microsoft.Reporting.WebForms.ReportDataSource rds =
new Microsoft.Reporting.WebForms.ReportDataSource("clientespedidos",
ObjectDataSource1);
ReportViewer1.LocalReport.DataSources.Clear();
ReportViewer1.LocalReport.DataSources.Add(rds);
ReportViewer1.LocalReport.ReportPath = "Report1.rdlc";
ReportViewer1.LocalReport.Refresh();
}

protected void btnnit_Click(object sender, EventArgs e)

{
ObjectDataSource ObjectDataSource1 = new ObjectDataSource(
"DatosClientesPedidosTableAdapters.ClientesTableAdapter", "GetDataBy");
ObjectDataSource1.SelectParameters.Add("valor", txtnit.Text);
Microsoft.Reporting.WebForms.ReportDataSource rds =
new Microsoft.Reporting.WebForms.ReportDataSource("clientespedidos",
ObjectDataSource1);
ReportViewer1.LocalReport.DataSources.Clear();
ReportViewer1.LocalReport.DataSources.Add(rds);
ReportViewer1.LocalReport.ReportPath = "Report1.rdlc";
ReportViewer1.LocalReport.Refresh();
}

Un ReportViewer se compone para su funcionamiento de un objeto LocalReport y

un ReportDataSource (fuente del reporte). El objeto LocalReport es necesario ya que
se está usando un reporte que existe dentro de la aplicación (si se estuviera usando
un reporte que existe en un servidor de reportes con SQL Server Reporting Services,
entonces se debería usar un objeto ServerReport).
El objeto LocalReport tiene una referencia al archivo que guarda el documento de
reporte por medio del parámetro ReportPath. El documento de reporte se llama
Report.rdlc. Por último, es necesario indicar de donde vendrán los datos para este
reporte, esto se hace con el objeto ReportDataSource. Este necesita dos parámetros;
el primero es el objeto que maneja la conexión con la fuente de datos, que en este
caso, es un objeto ObjectDataSource llamado ObjectDataSource1. El segundo
parámetro es quien tiene la definición de la fuente de datos (clientespedidos) y dentro
de esta fuente, que objeto se está referenciando (tabla Clientes del DataSet).
El otro elemento dentro de la página es el ObjectDataSource que se conectará con la
fuente de datos para pasarle la información al reporte. En este caso, el
ObjectDataSource indica que se debe utilizar un tipo TableAdapter que existe dentro
de clientespedidos y que este adaptador se llama ClientesTableAdapter. Este objeto
adaptador es el que conoce todo lo necesario para poder obtener los datos de la base
de datos y devolverlos en el formato que se necesita. Por último, se utilizará un
método llamado GetData que tiene la lógica para hacer las llamadas al adaptador y
obtener todos los datos a mostrar y un método GetDataBy para mostrar los datos
según un valor especificado.
Al ejecutar nuevamente el formulario Web ReportePorParametrosClientesPedidos.aspx,
se deberá visualizar la siguiente figura:

Al dar clic en el botón Todos se obtendrá la siguiente figura:

Y al escribir en el campo de texto el valor 200 y al pulsar el botón Filtrar por Nit, se
obtendrá la siguiente figura: