26- . Aplicaciones web.Creando un formulario de registro
- En este capítulo del curso de programación en c# con visual studio 2017,vamos a practicar el uso de algunos de los controles web vistos en las entradas anteriores del blog. Para ello nos crearemos una página web donde simularemos el alta en un servicio.En este formulario de registro practicamos el uso de estos controles:- Dropdownlist: Cargamos el combo con algunos paises.
- Validadores: Utilizamos los validadores vistos en el capítulo anterior (RequiredFieldValidator, RegularExpressionValidator y CompareValidator) para controlar que el usuario introduzca todos los datos necesarios para darse de alta.
- CheckBox: Forzamos que el usuario sólo pueda continuar en el caso que que este control este seleccionado.
- TextBox:Campos que el usuario debe rellenar.
- HyperLink: Link que redirige a una página de condiciones de servicio que nos hemos inventado.
- En el siguente cápitulo del cuso empezaremos con un poco de SQL.Asi que dejo el enlace donde podréis descargaros la versión express de forma gratuita:
https://www.microsoft.com/es-es/sql-server/sql-server-editions-express
- También os dejo el código del ejemplo:
* Parte cliente:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AltaUsuario.aspx.cs" Inherits="GestionVarios.AltaUsuario" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<table width="700px" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="700px" style="height: 40px; vertical-align: middle;" colspan="2" align="left">
<h1>Datos de acceso</h1>
<br />
</td>
</tr>
<tr>
<td width="250px" height="22px" align="left" style="vertical-align: top">Nombre usuario:</td>
<td width="450px" align="left" style="vertical-align: top">
<asp:TextBox ID="txtnombre" runat="server" Width="300px" ForeColor="Black" ></asp:TextBox>
<asp:RequiredFieldValidator ID="reqNombre" runat="server" ControlToValidate="txtnombre" ErrorMessage="*" Display="Dynamic" ForeColor="Red" ></asp:RequiredFieldValidator><br />
</td>
</tr>
<tr>
<td width="250px" height="22px" align="left" style="vertical-align: top">Pais:</td>
<td width="450px" align="left" style="vertical-align: top">
<asp:DropDownList runat="server" id="cmbPaises" AppendDataBoundItems="True" Width="311px" DataSourceID="SqlDataSource1" DataTextField="Pais" DataValueField="CodPais">
<asp:ListItem Text="Seleccione un pais" Value="-1">-SELECCIONAR-</asp:ListItem>
<asp:ListItem Text="España" Value="1"></asp:ListItem>
<asp:ListItem Text="Portugal" Value="2"></asp:ListItem>
<asp:ListItem Text="Francia" Value="3"></asp:ListItem>
<asp:ListItem Text="Italia" Value="4"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator id="reqPais" ControlToValidate="cmbPaises" ErrorMessage="* Seleccione pais" Display="Dynamic" InitialValue="-1" runat="server" ForeColor="Red" />
</td>
</tr>
<tr>
<td width="250px" height="22px" align="left" style="vertical-align: top">Dirección de E-Mail:
</td>
<td width="450px" align="left" style="vertical-align: top">
<asp:TextBox ID="mtxtEMail" runat="server" Width="300px" ForeColor="Black" ></asp:TextBox>
<asp:RequiredFieldValidator ID="mreqEMail" runat="server" ControlToValidate="mtxtEMail" ErrorMessage="*" Display="Dynamic" ForeColor="Red" ></asp:RequiredFieldValidator><br />
<asp:RegularExpressionValidator ID="mregEMail" runat="server" ControlToValidate="mtxtEMail" ErrorMessage="La Dirección de E-Mail especificada no es válida.<br>" ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" Display="Dynamic" ForeColor="Red"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td width="250px" height="22px" align="left" style="vertical-align: top">Contraseña:
</td>
<td width="450px" align="left" style="vertical-align: top">
<asp:TextBox ID="mtxtPassword" runat="server" Width="150px" MaxLength="20" TextMode="Password"></asp:TextBox>
<br />
<asp:RequiredFieldValidator ID="mreqPassword" runat="server" ControlToValidate="mtxtPassword" ErrorMessage="Debe especificar una contraseña de al menos 6 caracteres.<br>" Display="Dynamic" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="mregPassword" runat="server" ControlToValidate="mtxtPassword" ErrorMessage="La contraseña no es correcta (min. 6 cars)." ValidationExpression="\w+.{5,}" Display="Dynamic" ForeColor="Red"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td width="250px" height="22px" align="left" style="vertical-align: top">Confirmar Contraseña:
</td>
<td width="450px" align="left" style="vertical-align: top">
<asp:TextBox ID="mtxtPassword2" runat="server" Width="150px" MaxLength="20" TextMode="Password" ></asp:TextBox>
<br />
<asp:RequiredFieldValidator ID="mreqPassword2" runat="server" ControlToValidate="mtxtPassword2" ErrorMessage="Debe confirmar la contraseña.<br>" Display="Dynamic" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:CompareValidator ID="mcomPasswords" runat="server" ErrorMessage="Las contraseñas no son iguales." Display="Dynamic" ControlToCompare="mtxtPassword" ControlToValidate="mtxtPassword2" ForeColor="Red"></asp:CompareValidator>
</td>
</tr>
<tr>
<td> </td>
<td width="250px" height="22px" align="left" style="vertical-align: top">
<asp:CheckBox ID="chkCondiciones" runat="server"/><asp:HyperLink ID="linkCondiciones" runat="server" Text="Condiciones servicio" NavigateUrl="~/CondicionesServicio.aspx"></asp:HyperLink><br />
</td>
</tr>
<tr>
<td width="700px" style="height: 40px; vertical-align: middle;" colspan="2" align="center" colspan="2">
<asp:Button ID="mbtnRegistrar" runat="server" Text="ALTA" OnClick="mbtnRegistrar_Click" />
<asp:Label runat="server" ID="lblError" Visible="false" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
</form>
</body>
</html>
*Parte servidor:
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace GestionVarios
{
public partial class AltaUsuario : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void mbtnRegistrar_Click(object sender, EventArgs e)
{
lblError.Visible = true;
if (chkCondiciones.Checked == false)
{
lblError.Text = "Debes aceptar los términos y condiciones del servicio.";
}
else
{
lblError.Text = "Usuario dado de alta correctamente";
lblError.ForeColor = Color.Green;
}
}
}
}
