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]](https://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
Blog de Giovanni Callisaya 