V SEMESTRE: ASP.NET(DRAPI) - Crear Versión Imprimible de una página

Buenas noches:

Vamos a crear una aplicación que puedes ser de utilidad si desean crear una versión imprimible de una página. El concepto es bastante simple en realidad se trata de crear una página con contenido igual al de otra, pero con un formato más sencillo para enviar por impresora..

Requisitos:

Para diseñar esta aplicación necesitamos lo siguiente

• Visual Web Developer Express Edition
• 2 Formularios web
• Conexión a Base de Datos
• Secuencias de comando del lado del cliente (JavaScript)

Comenzaremos por lo más simple, la configuración de la página predeterminada. Abrimos Web Developer y creamos un Web Site común. Como ya es de su conocimiento, se ha creado la página Default.aspx, con esta página comenzaremos la sesión de hoy:

Diseñaremos una interfaz sencilla, tendrá la siguiente apariencia:

Como podemos apreciar, tenemos la lista de los siguientes elementos y controles de usuario:

• Tabla
• TextBox(1)
• Button (2)
• LinkButton (1)
• SqlDataSource (Conectado a Northwind, tabla Customers)
• GridView (Enlazado a SqlDataSource1)

Cabe señalar lo siguiente: el control SqlDataSource1 debe tener especificado un criterio de filtro, bajo el campo ContactName y el TextBox del formulario:

De momento eso es lo que requerimos para que la página funcione sin mayores contratiempos como lo hemos visto en otros ejemplos similares.

La idea parte de lo siguiente, como es bastante notorio, la página que hemos creado está con formato, lo cual podría no ser lo más apropiado al momento de imprimir.Para lograr esto haremos que nuestro LinkButton me permita crear una ventana nueva en tiempo de ejecución y en esa ventana nueva presentar la misma data que en Default.aspx pero sin formato exagerado. para llegar a esto vamos a apoyarnos en un poco de JavaScript. Antes, vamos a agregar un nuevo Web Form a nuestro sitio web y lo guardamos con el nombre "print.aspx".

Ubiquémonos en la página Default.aspx, pero en la vista "Source" y agregamos la siguiente función de JavaScript:

Utilizaremos esta función para configurar el control LinkButton tal como se muestra en la siguiente imagen:

Bien, ahora vamos a la página print.aspx y diseñamos una interfaz parecida a la anterior:

Viendo la lista de controles:

Label(1)

LinkButton (2)

SqlDataSource (1)

GridView (1)

El control SqlDataSource (sqlPrint), debe tener la misma distribución de campos de su antecesora, sólo que el filtro se establece con el control Label insertado arriba.

Cabe señalar lo siguiente, viendo el código en JavScript descrito líneas arriba es fácil darse cuenta que hay un valor que está siendo enviado hacia la página print.aspx, ese valor tenemos que recuperarlo desde print.aspx. Para lograrlo necesitamos entrar al evento Load del objeto Page, una vez ahi escribimos el siguiente código:

Finalmente haremos que los botones "imprimir" y "cerrar" de nuestra página print.aspx funcionen, en realidad es bastante sencillo, vamos a la vista Source y modificamos un poco la definición de ambos controles:

Guardamos el proyecto y ejecutamos la página Default.aspx. Colocamos un criterio de Filtro y probamos el link "versión imprimible". Debe salir un resultado similar al que se aprecia aqui

Mayores alcances se harán en horas de clase.