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

3 comentarios

  1. Almircar Montilla said,

    Saludos, Te felicito por el excelente articulo.
    Unas preguntas, podrias indicarme la forma de colocar un boton para regresar a la pantalla anterior par corregir algun dato, y lo siguiente tiene relacion con lo anterior, si hago una validación en la base de datos para impedir grabar usuarios duplicados como retorno la excepción al formulario.

    Gracias de antemano por la colaboracion prestada.

  2. Skefannack said,

  3. ericcantonaidelf said,

    name
    Maria Gteendyk

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: