Formulario de Registro Web con Jquery y Asp.Net

18 septiembre, 2011 at 12:18 (Asp.Net, JQuery) (, )

Jquery es un poderoso marco de trabajo para la web, pero por si solo no puede interactuar con una base de datos, pero además de usar jQuery usamos Asp.Net tenemos una página visualmente atractiva (por Jquery) y con mucha funcionalidad (Por .Net y Asp) el resultado final simplemente es una web más agradable para el usuario final.

En un simple formulario de registro de usuario se conjunción tanto Jquery y Asp.Net.

Codigo Fuente Aqui

Primero tenemos la pantalla uno donde se pide al usuario el nombre que usara y su contraseña.

clip_image002

Si es que falla en la contraseña o no ingresa usuario, las cajas de texto se pintaran de rojo

clip_image004

También se valida campos con expresiones regulares el correo electrónico

clip_image006

clip_image008

Resumen de los Datos

clip_image010

Finalmente se envía los datos al servidor.

clip_image012

En el proyecto de Asp.Net tenemos la siguiente estructura. En la cual tenemos archivos js, css, fonts para lograr el estilo visual atractivo.

clip_image014

En el archivo ¨ jquery.main.js¨ tenemos el control de las transiciones lo que logra sobreponer los div para ocultar uno y aparecer otro logrando el efecto de (slide) transición.

 1: $(function () {
 2:     //Valores originales para validar si escribio en la caja de texto
 3:     var field_values = {
 4:         //id : value
 5:         'username': 'Usuario',
 6:         'password': 'Password',
 7:         'cpassword': 'Password',
 8:         'firstname': 'Nombre',
 9:         'lastname': 'Apellido',
 10:         'email': 'Direccion Email'
 11:     };
 12:
 13:
 14:     //Foco para las cajas de texto
 15:     $('input#username').inputfocus({ value: field_values['username'] });
 16:     $('input#password').inputfocus({ value: field_values['password'] });
 17:     $('input#cpassword').inputfocus({ value: field_values['cpassword'] });
 18:     $('input#lastname').inputfocus({ value: field_values['lastname'] });
 19:     $('input#firstname').inputfocus({ value: field_values['firstname'] });
 20:     $('input#email').inputfocus({ value: field_values['email'] });
 21:
 22:
 23:
 24:
 25:     //reiniciar progress bar
 26:     $('#progress').css('width', '0');
 27:     $('#progress_text').html('0% Complete');
 28:
 29:     //Primer Paso 
 30:     $('#submit_first').click(function () {
 31:         //Remover class
 32:         $('#first_step input').removeClass('error').removeClass('valid');
 33:
 34:         //verificar si las cajas son vacias
 35:         var fields = $('#first_step input[type=text], #first_step input[type=password]');
 36:         var error = 0;
 37:         fields.each(function () {
 38:             var value = $(this).val();
 39:             if (value.length < 4 || value == field_values[$(this).attr('id')]) {
 40:                 $(this).addClass('error');
 41:                 $(this).effect("shake", { times: 3 }, 50);
 42:
 43:                 error++;
 44:             } else {
 45:                 $(this).addClass('valid');
 46:             }
 47:         });
 48:
 49:         if (!error) {
 50:             if ($('#password').val() != $('#cpassword').val()) {
 51:                 $('#first_step input[type=password]').each(function () {
 52:                     $(this).removeClass('valid').addClass('error');
 53:                     $(this).effect("shake", { times: 3 }, 50);
 54:                 });
 55:
 56:                 return false;
 57:             } else {
 58:                 //actualizar la caja de texto
 59:                 $('#progress_text').html('33% Complete');
 60:                 $('#progress').css('width', '113px');
 61:
 62:                 //Sigiuente Paso
 63:                 $('#first_step').slideUp();
 64:                 $('#second_step').slideDown();
 65:             }
 66:         } else return false;
 67:     });
 68:
 69:
 70:     $('#submit_second').click(function () {
 71:         //Remover class y validacion
 72:         $('#second_step input').removeClass('error').removeClass('valid');
 73:
 74:         var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
 75:         var fields = $('#second_step input[type=text]');
 76:         var error = 0;
 77:         fields.each(function () {
 78:             var value = $(this).val();
 79:             if (value.length < 1 || value == field_values[$(this).attr('id')] || ($(this).attr('id') == 'email' && !emailPattern.test(value))) {
 80:                 $(this).addClass('error');
 81:                 $(this).effect("shake", { times: 3 }, 50);
 82:
 83:                 error++;
 84:             } else {
 85:                 $(this).addClass('valid');
 86:             }
 87:         });
 88:
 89:         if (!error) {
 90:             //Actualizar progress bar
 91:             $('#progress_text').html('66% Complete');
 92:             $('#progress').css('width', '226px');
 93:
 94:             //sigiuente paso
 95:             $('#second_step').slideUp();
 96:             $('#third_step').slideDown();
 97:         } else return false;
 98:
 99:     });
 100:
 101:
 102:     $('#submit_third').click(function () {
 103:         //Actualizar progress bat
 104:         $('#progress_text').html('100% Complete');
 105:         $('#progress').css('width', '339px');
 106:
 107:         //cambio de valor de 1 o 0 a Literal Masculino o femenino para mostrar en resumen
 108:         var Sexo ='Masculino';
 109:         if($('#gender').val()==0)
 110:            Sexo='Femenino';
 111:         else
 112:             Sexo='Masculino'
 113:
 114:         //var passw= $('#password').val();
 115:
 116:         //prepare the fourth step
 117:         var fields = new Array(
 118:             $('#username').val(),
 119:            '**********',
 120:             $('#email').val(),
 121:             $('#firstname').val() + ' ' + $('#lastname').val(),
 122:             $('#age').val(),
 123:             Sexo,
 124:             $('#country').val()
 125:         );
 126:         var tr = $('#fourth_step tr');
 127:         tr.each(function () {
 128:             //alert( fields[$(this).index()] )
 129:             $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
 130:         });
 131:
 132:         //Sigiuente paso
 133:         $('#third_step').slideUp();
 134:         $('#fourth_step').slideDown();
 135:     });
 136:
 137:
 138:     $('#submit_fourth').click(function () {
 139:
 140:         alert('Datos Enviados!!!');
 141:
 142:     });
 143:
 144: });

El formulario aspx tiene varias transiciones. La primera valida el usuario y password.

 1: <!-- #Primer Paso -->
 2:             <div id="first_step">
 3:                 <h1>Registrese de Forma Gratuita <span>giovannidotnet.wordpress.com</span> Ahora...</h1>
 4:
 5:                 <div class="form">
 6:
 7:                     <asp:TextBox ID="username" runat="server" Text="Usuario"></asp:TextBox>
 8:                     <label for="username">Use Mas de 4 caracteres. Mayusculas, Minusculas, Numero solamente.</label>
 9:
 10:                     <asp:TextBox ID="password" runat="server" Text="Password" TextMode="Password"></asp:TextBox>
 11:                     <label for="password">Use Mas de 4 caracteres. Mayusculas, Minusculas, Numero solamente. Para tener un password fuerte.</label>
 12:
 13:                      <asp:TextBox ID="cpassword" runat="server" Text="Password" TextMode="Password"></asp:TextBox>
 14:                     <label for="cpassword">Si no son iguales, no podras continuar.</label>
 15:                 </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
 16:                 <input class="submit" type="button" name="submit_first" id="submit_first" value="" />
 17:             </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

En esta primera transición usamos controles Asp.net para el ingreso de los datos. También podemos usar los controles de formulario de Html, solo para que podamos usarlos tenemos que agregar el runat=”server” en la siguiente transición usamos los elementos html de formulario.

 1: <!-- #Segundo Paso -->
 2:             <div id="second_step">
 3:                 <h1>Registrese de Forma Gratuita <span>giovannidotnet.wordpress.com</span> Ahora...</h1>
 4:                 <div class="form">
 5:
 6:                     <input type="text" name="firstname" id="firstname" value="Nombre" runat="server" />
 7:                     <label for="firstname">Nombre Completo. </label>
 8:
 9:                     <input type="text" name="lastname" id="lastname" value="Apellido" runat="server" />
 10:                     <label for="lastname">Apellidos. </label>
 11:
 12:                     <input type="text" name="email" id="email" value="Direccion Email" runat="server" />
 13:                     <label for="email">Tu Direccion de Correo Electronico. </label>
 14:                 </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
 15:                 <input class="submit" type="button" name="submit_second" id="submit_second" value="" />
 16:             </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

Como se ve solo tenemos que adicionar runat=”server” a los controles.

En el la ultima transición usamos un botón Asp para generar un evento y poder enviar los datos al servidor.

 1: <asp:Button ID="submit_fourth" runat="server" 

Text="" CssClass="send submit" onclick="submit_fourth_Click" />
 1: <!-- #Cuarto Paso -->
 2:             <div id="fourth_step">
 3:                 <h1>Registrese de Forma Gratuita <span>giovannidotnet.wordpress.com</span> Ahora...</h1>
 4:                 <div class="form">
 5:                     <h2>Resumen de Datos</h2>
 6:
 7:                     <table>
 8:                         <tr><td>Usuario</td><td></td></tr>
 9:                         <tr><td>Password</td><td></td></tr>
 10:                         <tr><td>Email</td><td></td></tr>
 11:                         <tr><td>Nombre</td><td></td></tr>
 12:                         <tr><td>Edad</td><td></td></tr>
 13:                         <tr><td>Sexo</td><td></td></tr>
 14:                         <tr><td>Pais</td><td></td></tr>
 15:                     </table>
 16:                 </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
 17:
 18:             <asp:Button ID="submit_fourth" runat="server" Text="" CssClass="send submit" onclick="submit_fourth_Click" />

Este evento será el encargado de enviar los datos a una base de datos. Llamada inscripción

 1: Create Database DbInscripcion
 2: Go
 3:
 4: Use DbInscripcion
 5: go
 6:
 7: Create Table Registro
 8: (
 9: IdRegistro int identity(1,1) Primary Key,
 10: Usuario nvarchar(20) not null,
 11: Contrasenia nvarchar(30) not null,
 12: Email nvarchar(30),
 13: Nombre nvarchar(150) not null,
 14: Edad nvarchar(20),
 15: Sexo bit,
 16: Pais nvarchar(20)
 17: )
 18: Go

Usaremos Procedimiento Almacenado para el ingreso de los datos a la BD.

 1: -- =============================================
 2: -- Author: Giovanni Callisaya
 3: -- Create date: 18/09/2011
 4: -- Description: SP para insertar datos
 5: -- =============================================
 6: CREATE PROCEDURE paInsertarDatos
 7:            @Usuario nvarchar(20),
 8:            @Contrasenia nvarchar(30),
 9:            @Email nvarchar(30),
 10:            @Nombre nvarchar(150),
 11:            @Edad nvarchar(20),
 12:            @Sexo bit,
 13:            @Pais nvarchar(20)
 14: AS
 15: BEGIN
 16:     INSERT INTO Registro
 17:            (Usuario
 18:            ,Contrasenia
 19:            ,Email
 20:            ,Nombre
 21:            ,Edad
 22:            ,Sexo
 23:            ,Pais)
 24:      VALUES
 25:            (@Usuario,
 26:            @Contrasenia,
 27:            @Email,
 28:            @Nombre,
 29:            @Edad,
 30:            @Sexo,
 31:            @Pais)
 32: END
 33: GO

Para adicionar a la base de datos tenemos el siguiente código:

 1: protected void submit_fourth_Click(object sender, EventArgs e)
 2:        {
 3:            //Controles Aspx
 4:            string Usuario = this.username.Text.Trim();
 5:            string Contrasenia = this.password.Text.Trim();
 6:            //Controles Html
 7:            string Email=this.email.Value.Trim();
 8:            string Nombre = this.firstname.Value.Trim()+this.lastname.Value.Trim();
 9:            //Controles Select por campo de datos mostrado
 10:            string Edad = this.age.Value;
 11:            //Control select por valor 
 12:            int Sexo = Convert.ToInt32(this.gender.Value);
 13:            //control select por datos mostrado
 14:            string Pais = this.country.Value;
 15:
 16:            //envio de Datos a Base de Datos
 17:
 18:            SqlConnection conn = new SqlConnection("Data Source=GIOVANNI-PC;Initial Catalog=DbInscripcion;Integrated Security=true");
 19:            SqlCommand cmd = conn.CreateCommand();
 20:            cmd.CommandText = "paInsertarDatos";
 21:            cmd.CommandType = CommandType.StoredProcedure;
 22:            cmd.Parameters.AddWithValue("@Usuario", Usuario);
 23:            cmd.Parameters.AddWithValue("@Contrasenia", Contrasenia);
 24:            cmd.Parameters.AddWithValue("@Email", Email);
 25:            cmd.Parameters.AddWithValue("@Nombre", Nombre);
 26:            cmd.Parameters.AddWithValue("@Edad", Edad);
 27:            cmd.Parameters.AddWithValue("@Sexo",Sexo);
 28:            cmd.Parameters.AddWithValue("@Pais", Pais);
 29:            conn.Open();
 30:            cmd.ExecuteNonQuery();
 31:            conn.Close();
 32:            Response.Redirect("IndexFormulario.aspx");
 33:
 34:        }

Finalmente tenemos los datos ingresados

clip_image010[7]

Run Code..

Codigo Fuente Aqui

https://skydrive.live.com/?cid=99ed48de740f535f&sc=documents&uc=3&id=99ED48DE740F535F%21549

Permalink 3 comentarios

Tutorial de gridview en Asp.Net

30 agosto, 2011 at 0:18 (Asp.Net, C#)

image

Después de mucho tiempo de no postear nada. (el trabajo me tiene muy ocupado). En mi trabajo usamos mucho el gridview de asp para muchas cosas, mostrar datos, recibir datos, como enlaces a otras páginas de acuerdo al contenido de la fila, además de usarlo como grilla para los A.B.M. Y este control tiene una gran variedad de eventos que realmente lo hace un control muy completo. Pero a la ves ( en lo personal un tanto complejo de entender a la primera) complejo de manejar ya que cuenta con muchas opciones.

Viendo la necesidad de conocer el gridview, me propuse postear en una seria de artículos los mil y un formas de este control (bueno serán los que pueda por que es mucho).

este es mi temario tentativo.

  1. Carga de un gridview
    1.2. Cargar con fuentes de datos
    1.3 Carga con objetos y datatable
  2. Operaciones con gridview
    2.1 altas
    2.2 bajas
    2.3 modificaciones
  3. Propiedades del gridview
  4. Eventos del gridview.
  5. personalización de gridview

Por favor siente en la libertad de adicionar, sugerir temas o preguntar sobre este control, ya que quiero que este tutorial (si puede llamárselo así). sea lo mas completo posible.

Bueno espero sus sugerencias y proximamente publico el primer tutorial.

Run Code…

Permalink 3 comentarios

Mi Primera Aplicación Windows Phone 7 con Silverligth.

2 mayo, 2011 at 14:59 (Windows Phone 7)

Vamos a crear una aplicación en Silverlight para Windows Phone, la cual no permitirá ver la facilidad de desarrollo de aplicaciones para este SO móvil.

Para este ejemplo crearemos un mini navegador, usando los controles que tiene Silverlight para construir aplicaciones.

Código Fuente: Aquí

clip_image002

Empecemos por crear el proyecto de WP en Silverlight.

clip_image004

Si despliéganos el explorador de soluciones encontraremos varios archivos en xaml recordemos que en este lenguaje de definición tenemos que crear nuestras interfaces.

clip_image005

El archivo donde tenemos que empezar a desarrollar es MainPage.xaml, si abrimos este archivo nos encontramos con un diseñador visual y otro del código xaml.

clip_image007

Si observamos este editor es muy útil para poder visualizar lo que hacemos al estilo de Asp.Net.

Tambien tenemos la caja de herramientas o caja de controles (Toolbox).

clip_image008

Con este Tool Box podemos empezar a construir nuestras aplicaciones.

Primero jalamos los controles necesarios para empezar a crear nuestro navegador.

clip_image010

Le damos la forma necesaria para que todos los controles estén en posición.

Generamos el evento del botón GO para agregar código detrás.

clip_image012

Probamos la aplicación para verificar si realmente, conecta la aplicación a internet.

clip_image014

Conclusiones

Las aplicaciones en Windows Phone, no son tan distintas a las aplicaciones Windows Form, pero tenemos la belleza que puede traer Silverlight con Xaml.

Código Fuente Aquí

Permalink 1 comentario

Creación de Reportes con Crystal Report con Visual Studio 2010 en Windows Form.

15 abril, 2011 at 2:48 (C#, Crystal Report, Visual Studio, WindowsForm)

En esta ocasión crearemos un reporte en Windows Form con Crystal Report en Visual Studio 2010 y Net Framework 4. Como vimos en la entrada de instalación de Crystal Report para VS 2010, tenemos que instalar CR for VS 2010, aunque también podemos usar Visual Studio 2005 y 2008 sin instalar nada ya que por defecto CR está en estas ediciones. Código Fuente aquí

Para este ejemplo usaremos la base de datos Northwind en las tablas Productos y Categorías.

El reporte mostrara los productos agrupados por categoría además de un gráfico en forma de torta o circulo para mostrar cuantos productos existen por categoría.

image

Materiales

1.       Base de Datos Northwind

2.       Visual Studio 2010

3.       Crystal Report para Visual Studio 2010

4.       Sql Server 2008 Express o superior

Para realizar un reporte con Crystal Report tenemos muchas formas, usando clases, directamente con la base de datos usando tablas o vistas y usando DataSet tipados. Esta será la forma que usaremos para generar el reporte.

Materiales

1.       Base de Datos Northwind

2.       Visual Studio 2010

3.       Crystal Report para Visual Studio 2010

4.       Sql Server 2008 Express o superior

Para realizar un reporte con Crystal Report tenemos muchas formas, usando clases, directamente con la base de datos usando tablas o vistas y usando DataSet tipados. Esta será la forma que usaremos para generar el reporte.

Creamos un nuevo Proyecto de Windows form con Net 4.0

Por defecto VS 2010 ejecuta el proyecto con Net Framework 4 Client Profile, esto se debe a que el Framework es muy grande y muchas veces no usamos todo el potencial asi que podemos recurrir al Net Framework 4 Client Profile ya que este es una versión reducida del .Net Framework 4 y por ende más fácil de trasportar y de instalar ya que no usa todas la librerías y nuestra aplicación puede ser más liviana para la instalación.

Pero si queremos usar Crystal Report no podemos usar la versión Reducida de .Net Framework 4 asi que nos vamos al MenúàProyectoàPropiedades del Proyecto. Y cambiamos de Motor de Ejecución a .Net Framework 4, Para poder usar CR for VS 2010

image

Creando el Data Set

Crearemos el data set a partir de la base de datos. Para poder realizar esto primero vamos a Explorador de Servidores en cual es muy útil para manejar un servidor de base de datos en este caso SQL SERVER 2008.

Para poder visualizar el explorador de servidores en el Menú VeràExplorador de Servidores o (Ctrl+Alt+S).

Luego presionamos conectar con base de datos y conectamos con la base de datos Northwind

image

Una vez conectada la base de datos podemos ver las tablas que esta BD contiene.

image

Ahora agregamos un Data Set a nuestro proyecto.

image

Colocamos el nombre de dsProductoPorCategoria.xsd. Arrastramos la tabla para que el reporte pueda usarlo como fuente de datos.

image

La relación se construirá automáticamente con esta estructura definida el reporte podrá tomar los datos y ordenarlos de forma que podamos agrupar los productos por categorías.

Creamos el Reporte

Para crear el reportes usaremos el asistente el cual nos permitirá elegir entre varias opciones la más adecuada para nuestro reporte.

Agregamos el reporte de Crystal Report

image

 

Cuando agregamos el reporte usaremos el asistente de informe para ayudarnos en la configuración del reporte.

image

Elegimos la conexión del reporte del cual tomara la estructura para definir el informe, para este paso solo tenemos que elegir el data set tipado que construimos anteriormente

image

Vemos la tablas relacionadas y damos siguiente

image

Seleccionamos los campos a mostrar esto es importante ya que si elegimos muchos campos nuestro informe se verá mu llenos y eso puede provocar que el informe no sea tan legible, así que solo tenemos que usar los campos que realmente necesitemos.

image

Ahora podemos agrupar los datos del informe esto es opcional pero como deseamos tener un informe que muestre los productos por categoría debemos agrupar los datos por la categoría.

image

Luego también podemos insertar a nuestro informe campos de resúmenes (opcional). En estos campos de resumen, indicaremos que calcule el promedio de precios de una categoría y la sumatoria del stock de los productos de esa categoría.

image

En esta sección podemos ordenar por los grupos superiores o inferiores pero por defecto elegimos ninguno.

image

Agregamos el grafico al reporte (grafico circular o de torta)

image

Si deseamos realizar una sub agrupación podemos seleccionar en esta ventana pero para nuestro caso es innecesario.

image

Finalmente nuestro informe está concluido.

image

Si requerimos colocar el informe al último del informe podemos hacerlo con solo arrastra el grafico a la parte inferior de la sección pie de informe (Section 4).

Pero nuestro trabajo no termina ahí tenemos que agregar un visor del reporte al formulario Windows Form.

image

Poblar el Reporte

Ahora que tenemos definida la estructura y tenemos el visor de informe. Esto no significa que el reporte esté listo ya que el reporte por si solo aun no está lleno, si bien usamos el data set para definir la estructura del reporte este dataset no está lleno. Ahora toca llenar el data set con los datos de la base de datos.

Creamos el método PoblarReporte el cual llena el data set con las sentencias SQL que se requieran, como tenemos que llenar dos tablas usaremos dos distintos DataAdpters.

2011-04-15 01h35_08

Ahora llamamos este método en el evento Load del formulario.

image

Finalmente ejecutamos el reporte y vemos como nuestro reporte se generado con éxito.

image

Nota Importante para la ejecución en VS 2010.

Cuando creamos de esta manera el reporte en VS 2010 tendría que agregar automáticamente las librerías necesarias, además configurar el App.Config de manera que la ejecución resulte exitosa. Pero por alguna razón en algunos  VS 2010 no configura de manera correcta el App.config y nuestro reporte no se ejecuta, en otros no existe el problema. Estuve probando en diferentes VS 2010 sobre todo ultimate pero me sale un error, en otros no y todo es normal, tal vez sea porque algunos PC eran de X64 y otros de X32 pero, no hay problema si tenemos este error de ejecución el cual indica que no podemos compilar porque no se reconoce las librerías de CR.

image

Para que se ejecute de manera correcta solo tenemos que configurar el App.Config, agregando esta línea.

<startup useLegacyV2RuntimeActivationPolicy="true">

<supportedRuntime version="v4.0"/>

</startup>

 

 Y comentando  la línea

<!–<startup><supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.0"/></startup>–>

 

Quedando el App.config como sigue:

image

Con esto ya se ejecuta nuestro reporte.

Código Fuente

El código fuente del proyecto con PDF del Articulo mas la base de datos aquí

 

Permalink 73 comentarios

Generación de reporte PDF con ItextSharp en Asp.net usando un GridView

5 abril, 2011 at 4:09 (Ado.Net, Asp.Net, Reportes)

Generación de reporte PDF con ItextSharp en Asp.net usando un GridView

En esta entrada aprenderemos a generar un reporte sencillo en Pdf con la librería ItextSharp a partir de un gridview de cual exportaremos todos los datos a Pdf o solamente uno de los registros.

Este ejemplo esta hecho en Asp.net por lo cual tenemos que tener en cuenta algunos detalles que hacen a una aplicación Asp.net. Una aplicación ASP.net como cualquier aplicación para la Web no puede consumir los recursos del cliente, todos los recursos que puedan usar tienen que estar en el servidor Web. Por ese motivo el Reporte primero lo crearemos en el servidor web y luego enviaremos al cliente el archivo Pdf ya generado.

ItextSharp es una librería OpenSource la cual es original en java pero también tiene una implementación para C# es muy poderosa y sobre todo ayuda a tener reportes fáciles sin costo.

Para este ejemplo usaremos la base de datos Northwind con la tabla Employess

clip_image001

Ejecución del Sistema Terminado

clip_image003

Materiales.

· Visual Studio 2005 o Superior , Visual Web Developer Express o Sharp Develop

· Sql Server 2000 o Superior

· Librería ItextSharp

· Base de Datos Northwind

Manos a la Obra

Primero Arrastramos de la Caja de Herramientas un gridview al cual cambiamos de nombre a dgvDatos

clip_image005

Para este ejemplo seleccionamos algunos datos de la tabla Employees de la base de datos Northwind. Las filas seleccionadas son EmployeeID, LastName, FirstName, Title y Country

Select EmployeeID,LastName,FirstName,Title,Country from Employees

clip_image006

Ahora Agregamos las columnas para ver correctamente los datos, le damos clic al botón como play > y agregamos columnas personalizadas.

clip_image007

Al agregar una nueva columna nos muestra una venta de dialogo donde podemos ingresar el texto de encabezado que es el texto que se visualiza a modo de título en el gridview este puede contener espacios ya que es solo título. En cambio el campo de datos es el nombre de la columna (mejor si es el mismo nombre que el de la tabla) este no puede contener espacios en blanco.

clip_image008

Agregamos todos los datos hasta que la grilla quede con todos los datos a mostrar

clip_image009

Para Borrar las otras columnas que nos genera al principio solo cambiamos la propiedad autogenerar columnas

clip_image011

Ahora en el menú del Gridview seleccionamos editar columnas para agregar la selección.

clip_image012

Agregamos el Comand Field de Selección para que podemos seleccionar el registro de una sola fila y realizar nuestro Pdf de solo esta columna

clip_image014

Seleccionamos el Comand Fiel y editamos algunas de las propiedades para que se vea mejor al momento de la corrida. Si contamos con una imagen podemos que en vez de ver un clásico link de selección se vea con una imagen, claro está decirlo que la imagen debe ser pequeña. En mi caso use una imagen png muy pequeña que está en la carpeta images de mi sitio web.

clip_image016

También podemos jalar una imageButton para que haga de botón del pdf. El resultado final es el siguiente

clip_image018

Crearemos la función para poblar el GridView.

Creamos dos atributos de clase para la cadena de conexión y el DataTable

clip_image019

El método Cargar datos se encarga de cargar el DataTable

clip_image021

Llamamos esta función en el evento PageLoad de la página.

clip_image022

Ahora le decimos a las columnas del GridView cuál es el valor de la tabla que tiene que tomar, para hacer esto solo tenemos que editar las columnas luego en el campo DataField colocamos el nombre del campo al cual esta columnas tiene que enlazarse, como mi tabla esta creada directamente con la base de datos las columnas de la tabla tiene el mismo nombre de las columnas de la base de datos, por lo tanto tenemos que colocar a cada columna del Gridview el respectivo valor de la base de datos.

clip_image024

El resultado es el siguiente cuando todos los datos fueron enlazados la grilla queda llena.

clip_image026

Pero no queremos solo llenar la grilla también queremos que al presionar el botón de pdf genere todos los datos que contenga la grilla para esto Primero creamos una carpeta para almacenar los Pdf que se generar para posteriormente enviar este reporte al usuario.

Solo damos clic derecho al icono del Proyecto y agregamos la carpeta ReportesPdf

clip_image027

Agregamos la librería ItextSharp

clip_image028

Generamos el evento del Botón Imagen para generar el reporte global. clip_image030

Primero Creamos el método para generar el Pdf dentro del Sitio Web

clip_image032

Esta línea es muy importante para que funcione correctamente la aplicación

PdfWriter writerPdf = PdfWriter.GetInstance(documento, new FileStream(@"C:\Users\Giovanni\Documents\visual studio 2010\Projects\WebItextPdf\WebItextPdf\ReportesPdf\"+NombreReporte, FileMode.Create));

En este caso como mi aplicación está en mis Proyectos de visual Studio coloco la ruta completa, esto para que cree el pdf si nuestro proyecto está en otra ruta tenemos que colocar esa ruta. Por ejemplo (D:\MiRutaDeProyecto\ReportesPdf\) este es importante si queremos publicar nuestro sitio ya que la ruta tiene que ser la ruta donde está alojada nuestra aplicación no podemos colocar otra ruta porque la aplicación solo tiene permiso de cambiar los que está dentro del sitio y no en otro lugar.

clip_image033

Metodo para enviar al usuario el pdf que se creó y lo pueda ver

clip_image034

Resultado final

clip_image036

Ahora solo falta que cuando presionen el reporte individual salga el reporte de solo un registro básicamente es lo mismo con la diferencia que ahora envés de enviar un datatable solo enviamos una fila. Sobrecargamos el método GenerarPdf.

clip_image038

clip_image040

Generamos el evento del GridView Select Index Changed y llamamos al método generar pdf

clip_image042

Resultado final

clip_image044

Conclusiones

Generar el reporte de pdf con ItextSharp es muy fácil pero esta librería tiene más utilidades que pueden hacer un reporte más enriquecido la herramienta es una buena alternativa a otros sistemas de reporte que para tareas sencillas son muy pesadas o simplemente tendríamos que pagar una licencia de uso, como Crystal Report u otro proveedor de reportes, mientras con ItextShrap estas tareas básicas las podemos realizar muy fácil y sin coste.

Código Fuente

Carpeta del código y del Pdf del tutorial aquí

Permalink 11 comentarios

Next page »

A %d blogueros les gusta esto: