Crear una página de Login

Bueno, hemos llegado a un punto en donde es mejor continuar explicando con ejemplos.

Toda aplicación web inicia con una página de login, la cual es muy esencial cuando se desea administrar el contenido de lo que se va a mostrar en dependencia del usuario conectado o lo que el usuario puede hacer en dependencia de sus permisos.

Crearemos una sencilla página de login y conforme vayamos avanzando la iremos modificando.

Damos click derecho sobre la carpeta del proyecto -> Add -> Add New Item...

En la ventana de dialogo de Add New Item, seleccionamos en el panel izquierdo el lenguaje C#. En el panel de la derecha seleccionamos WebForm. Le ponemos un nombre a nuestra página en la parte de abajo. A la derecha del nombre, seleccionamos la opción Select master page, para poder seleccionar el MasterPage que creamos anteriormente. Damos click en el botón Add.

Nos aparecerá la ventana de diálogo Select a Master Page, donde ubicaremos el lugar donde guardamos nuestro MasterPage en el panel de la izquierda, y a la derecha seleccionamos el MasterPage Main.
 

Podemos ver que en la nueva página se crean elementos Content. Estos elementos están asociados directamente a los ContentPlaceHolder que se crean dentro del MasterPage, y como se explicó en su momento, es donde podemos agregar contenido. El resto es heredado del MasterPage y no puede ser modificado.

Claro está, puede crear páginas sin asociarle un MasterPage. Por ejemplo, puede ser una página de información que no necesite mostrar nada del MasterPage.

Ahora veamos la vista Design de la página. Vemos solamente el área de contenido que pusimos en el body, pero la del head no aparece. Esto pasa porque el header no puede contener controles ni nada que se visualice en la páginas. Solamente puede contener referencias a archivos javascript, código javascript, código css, etc.

Vamos a agregar cinco controles a nuestra página. Por el momento no nos vamos a preocupar por el diseño.

Control	Propiedades
Label	ID: lblUserName Text: Usuario
TextBox	ID: txtUserName
Label	ID: lblPassword Text: Contraseña
TextBox	ID: txtPassword TextMode: Password
Button	ID:btnEntrar Text: Entrar
Label	ID:lblMensaje Text:(vacío)

Damos doble click sobre el botón Entrar. Esto nos creará el evento click del lado del servidor para el botón. Dentro del cuerpo del evento escribimos el siguiente código:

    protected void btnEntrar_Click(object sender, EventArgs e)
    {
        if (txtUserName.Text == "admin" && txtPassword.Text == "admin")
        {
            lblMensaje.Text = "Usuario encontrado";
        }
        else
        {
            lblMensaje.Text = "Usuario no encontrado";
        }
    }

Ejecutamos nuestro proyecto y veremos la página Login en nuestro navegador:

Ingresamos la cadena 'admin', tanto en el campo Usuario como en Contraseña, y presionamos el botón Entrar. Veremos el mensaje Usuario encontrado:

La lógica usada en el evento del botón no es muy compleja, por eso no la analizaremos a fondo.

Hemos creado una sencilla página de login y vemos que funciona!!! 

Bueno, hay dos cosas que son importantes y que las veremos en su momento. El diseño de nuestras páginas y las validaciones. Usando MasterPage avanzamos un poco en lo que respecta al diseño. Sin embargo, se necesitan otras cosas más, como CSS, el uso de divs, etc. Las validaciones básicamente la podemos reducir a los controles de validación que trae ASP.NET, sin embargo, el uso de javascript es ampliamente usado, aparte de las validaciones del lado del servidor.