Cómo crear una función de inicio de sesión con Bootstrap Modal y jQuery AJAX

Bootstrap Modal es una excelente manera de crear un formulario de inicio de sesión en su sitio web. En este tutorial, aprenderá a crear una función de inicio de sesión utilizando Bootstrap para un sitio web ASP.NET. La función de verificación de inicio de sesión se creará utilizando jQuery AJAX.

Crearé las siguientes características paso a paso:

1. Un Bootstrap Modal que contendrá un formulario de inicio de sesión.

2. El formulario de inicio de sesión contendrá 2 campos, 'Nombre de usuario' y 'Contraseña'. El usuario debe ingresar sus valores en estos campos.

3. Al hacer clic en el botón enviar en el formulario, la entrada del usuario (nombre de usuario y contraseña) se enviará a la función C #.

4. Esta función de C # comprobará si el nombre de usuario y la contraseña son correctos o no.

5. Si son correctos, se redirige al usuario a la página de perfil.

Puedes ver la DEMO en funcionamiento aquí.

Creación de un modal de Bootstrap con un formulario de inicio de sesión

Agregue la referencia de los archivos "bootstrap CSS, jQuery y bootstrap js" en el encabezado de la página.

Siguiente Cree un Bootstrap Modal que contenga el formulario de inicio de sesión:

Try any one of the following three:

1. Username: Ram

Password: admin

2. Username: Shiv

Password: admin

3. Username: Krishna

Password: admin

Open Modal
 × 

Log in with your Username


    
 Close 

Así es como se verá el formulario de inicio de sesión modal de bootstrap.

Agregar el código jQuery en el evento de clic de botón

En el clic del botón, forzaré a los usuarios a ingresar algún valor en los campos de nombre de usuario y contraseña, antes de que envíen el formulario.

Cuando ambos cuadros de texto contienen algún valor, solo entonces llamaré a la función C # usando el método jQuery AJAX. Con este método, podré pasar los valores de los 2 cuadros de texto (nombre de usuario y contraseña) a mi función C #.

Agregue el siguiente código jQuery a su página:

$("#submitButton").click(function (e) {
if ($("#userNameTextBox").val() == "")
$("#userNamSpan").text("Enter Username");
else
$("#userNamSpan").text("");
if ($("#passwordTextBox").val() == "")
$("#passwordSpan").text("Enter Password");
else
$("#passwordSpan").text("");
if (($("#userNameTextBox").val() != "") && ($("#passwordTextBox").val() != ""))
$.ajax({ type: "POST", url: "index.aspx/login", contentType: "application/json; charset=utf-8", data: '{"username":"' + $("#userNameTextBox").val() + '","password":"' + $("#passwordTextBox").val() + '"}', dataType: "json", success: function (result, status, xhr) { if (result.d == "Success") { $("#messageSpan").text("Login Successful, Redireting to your profile page."); setTimeout(function () { window.location = "profile.aspx"; }, 2000); } else $("#messageSpan").text("Login failed, Please try again."); }, error: function (xhr, status, error) { $("#dbData").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText) }});
});
$(document).ajaxStart(function () { $("#loadingImg").show();});
$(document).ajaxStop(function () { $("#loadingImg").hide();});

En el método de devolución de llamada exitosa, puede ver que estoy redirigiendo al usuario a la página profile.aspx si-y-solo-si recibo el mensaje " Éxito ".

El setTimeout () es una función de JavaScript que redirigirá a la página de perfil en 2 segundos.

Las siguientes 2 imágenes explicarán la función de inicio de sesión:

1. Cuando falla el inicio de sesión. 2. Cuando el inicio de sesión es exitoso.

El código C #:

Ahora en su página .aspx.cs , agregue el siguiente código:

[System.Web.Services.WebMethod]
public static string login(string username, string password)
{
var cred = LoadCredential();
var count = (from t in cred
where t.username == username && t.password == password
select t).Count();
if (count == 1)
{
HttpContext.Current.Session["User"] = username;
return "Success";
}
else
return "Failed";
}
class Credential
{
public string username { get; set; }
public string password { get; set; }
}
static List LoadCredential()
{
List credList = new List();
Credential cred = new Credential();
cred.username = "Ram";
cred.password = "admin";
credList.Add(cred);
cred = new Credential();
cred.username = "Shiv";
cred.password = "admin";
credList.Add(cred);
cred = new Credential();
cred.username = "Krishna";
cred.password = "admin";
credList.Add(cred);
return credList;
}

La función login () es la que llama el método jQuery . Comprueba si el nombre de usuario y las contraseñas son correctos y luego devuelve el mensaje correspondiente.

CSS

To style the login form and the bootstrap modal so that they look perfect, add the following CSS to your page:

.btn {
margin: 15px 0;
}
#loadingImg {
display: none;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.validCredential h3 {
float: left;
text-decoration: underline;
}
.validCredential div {
clear: both;
}
.validCredential p {
float: left;
padding-right: 10px;
}
::-webkit-input-placeholder {
color: #ccc;
}
#myModal {
color: #1fa67b;
}
#myModal table {
position: relative;
margin: auto;
}
#myModal table input {
border-radius: 5px;
border: solid 1px #CCC;
margin: 10px;
padding: 3px 10px;
color: #000;
}
#myModal table input[type="button"] {
width: 94%;
background: #1fa67b;
color: #FFF;
}
#myModal table span {
float: left;
font-size: 12px;
color: #f00;
padding-left: 23px;
}

Profile Page

On the profile page, the user will get the welcome message. The code of the profile page is the following:

if (!IsPostBack){ welcomeMessage.InnerHtml = "Welcome " + Session["User"] + " to the profile page.";}
Check out the working demo by clicking the below link:

Working DEMO

Conclusion

I hope you liked this tutorial. Feel free to contact me for any questions. I will be there to help if you need it. If you liked this tutorial, then kindly share it on your social accounts.

I have also published another tutorial on freeCodeCamp, you would like to see it too — Master the art of looping in JavaScript with these incredible tricks