Formulario de Registro Web con Jquery y Asp.Net
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.
Si es que falla en la contraseña o no ingresa usuario, las cajas de texto se pintaran de rojo
También se valida campos con expresiones regulares el correo electrónico
Resumen de los Datos
Finalmente se envía los datos al servidor.
En el proyecto de Asp.Net tenemos la siguiente estructura. En la cual tenemos archivos js, css, fonts para lograr el estilo visual atractivo.
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]](http://giovannidotnet.files.wordpress.com/2011/09/clip_image0107.jpg "clip_image010[7]")
Run Code..
Codigo Fuente Aqui
https://skydrive.live.com/?cid=99ed48de740f535f&sc=documents&uc=3&id=99ED48DE740F535F%21549
Tutorial de gridview en Asp.Net
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.
- Carga de un gridview
1.2. Cargar con fuentes de datos
1.3 Carga con objetos y datatable - Operaciones con gridview
2.1 altas
2.2 bajas
2.3 modificaciones - Propiedades del gridview
- Eventos del gridview.
- 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…
Mi Primera Aplicación Windows Phone 7 con Silverligth.
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í
Empecemos por crear el proyecto de WP en Silverlight.
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.
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.
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).
Con este Tool Box podemos empezar a construir nuestras aplicaciones.
Primero jalamos los controles necesarios para empezar a crear nuestro navegador.
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.
Probamos la aplicación para verificar si realmente, conecta la aplicación a internet.
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í
Creación de Reportes con Crystal Report con Visual Studio 2010 en Windows Form.
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.
Materiales
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
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
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
Una vez conectada la base de datos podemos ver las tablas que esta BD contiene.
Ahora agregamos un Data Set a nuestro proyecto.
Colocamos el nombre de dsProductoPorCategoria.xsd. Arrastramos la tabla para que el reporte pueda usarlo como fuente de datos.
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
Cuando agregamos el reporte usaremos el asistente de informe para ayudarnos en la configuración del reporte.
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
Vemos la tablas relacionadas y damos siguiente
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.
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.
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.
En esta sección podemos ordenar por los grupos superiores o inferiores pero por defecto elegimos ninguno.
Agregamos el grafico al reporte (grafico circular o de torta)
Si deseamos realizar una sub agrupación podemos seleccionar en esta ventana pero para nuestro caso es innecesario.
Finalmente nuestro informe está concluido.
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.
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.
Ahora llamamos este método en el evento Load del formulario.
Finalmente ejecutamos el reporte y vemos como nuestro reporte se generado con éxito.
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.
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:
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í
Generación de reporte PDF con ItextSharp en Asp.net usando un GridView
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
Ejecución del Sistema Terminado
Materiales.
· Visual Studio 2005 o Superior , Visual Web Developer Express o Sharp Develop
Manos a la Obra
Primero Arrastramos de la Caja de Herramientas un gridview al cual cambiamos de nombre a dgvDatos
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
Ahora Agregamos las columnas para ver correctamente los datos, le damos clic al botón como play > y agregamos columnas personalizadas.
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.
Agregamos todos los datos hasta que la grilla quede con todos los datos a mostrar
Para Borrar las otras columnas que nos genera al principio solo cambiamos la propiedad autogenerar columnas
Ahora en el menú del Gridview seleccionamos editar columnas para agregar la selección.
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
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.
También podemos jalar una imageButton para que haga de botón del pdf. El resultado final es el siguiente
Crearemos la función para poblar el GridView.
Creamos dos atributos de clase para la cadena de conexión y el DataTable
El método Cargar datos se encarga de cargar el DataTable
Llamamos esta función en el evento PageLoad de la página.
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.
El resultado es el siguiente cuando todos los datos fueron enlazados la grilla queda llena.
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
Agregamos la librería ItextSharp
Generamos el evento del Botón Imagen para generar el reporte global. 
Primero Creamos el método para generar el Pdf dentro del Sitio Web
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.
Metodo para enviar al usuario el pdf que se creó y lo pueda ver
Resultado final
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.
Generamos el evento del GridView Select Index Changed y llamamos al método generar pdf
Resultado final
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í
