Sådan oprettes en loginfunktion med Bootstrap Modal og jQuery AJAX

Bootstrap Modal er en fremragende måde at oprette en loginformular på dit websted. I denne vejledning lærer du, hvordan du opretter en loginfunktion ved hjælp af Bootstrap til et ASP.NET-websted. Login Check-funktionen oprettes ved hjælp af jQuery AJAX.

Jeg opretter følgende funktioner trin for trin:

1. En Bootstrap-modal, der indeholder en loginformular.

2. Loginformularen indeholder 2 felter, 'Brugernavn' og 'Adgangskode'. Brugeren skal indtaste deres værdier i disse felter.

3. Når du klikker på knappen Send på formularen, sendes brugerens input (brugernavn og adgangskode) til C # -funktionen.

4. Denne C #-funktion kontrollerer, om brugernavnet og adgangskoden er korrekte eller ej.

5. Hvis de er korrekte, omdirigeres brugeren til profilsiden.

Du kan tjekke den fungerende DEMO her.

Oprettelse af en Bootstrap-modal med en loginformular

Tilføj referencen til "bootstrap CSS, jQuery og bootstrap js" -filer på sidehovedet.

Næste Opret en Bootstrap Modal, der indeholder loginformularen:

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 

Sådan ser bootstrap-modal loginformularen ud.

Tilføjelse af jQuery-koden på knappen klikhændelse

Ved at klikke på knappen vil jeg tvinge brugerne til at indtaste en værdi i felterne brugernavn og adgangskode, inden de sender formularen.

Når begge tekstfelter indeholder en vis værdi, kalder jeg kun C # -funktionen ved hjælp af jQuery AJAX-metoden. Med denne metode vil jeg være i stand til at videregive værdierne for de 2 tekstfelter (brugernavn og adgangskode) til min C # -funktion.

Tilføj nedenstående jQuery-kode til din side:

$("#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();});

I succes-tilbagekaldsmetoden kan du se, at jeg omdirigerer brugeren til profile.aspx- siden, hvis-og-kun-hvis jeg modtager meddelelsen " Succes ".

Den setTimeout () er en JavaScript-funktion, der vil omdirigere til profilsiden i 2 sekunder.

Følgende 2 billeder forklarer loginfunktionen:

1. Når login mislykkes. 2. Når login er vellykket.

C #-koden:

Tilføj nu følgende kode på din .aspx.cs- side:

[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;
}

Login () -funktionen er den, der kaldes efter jQuery- metoden. Den kontrollerer, om brugernavnet og adgangskoderne er korrekte, og returnerer derefter den relevante meddelelse.

CSS

For at style loginformularen og bootstrap-modalet, så de ser perfekte ud, skal du tilføje følgende CSS til din side:

.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;
}

Profilside

På profilsiden får brugeren velkomstmeddelelsen. Profilsidens kode er følgende:

if (!IsPostBack){ welcomeMessage.InnerHtml = "Welcome " + Session["User"] + " to the profile page.";}
Tjek den fungerende demo ved at klikke på nedenstående link:

Arbejder DEMO

Konklusion

Jeg håber, du kunne lide denne tutorial. Du er velkommen til at kontakte mig for spørgsmål. Jeg vil være der for at hjælpe, hvis du har brug for det. Hvis du kunne lide denne tutorial, så del den venligst på dine sociale konti.

Jeg har også offentliggjort en anden tutorial på freeCodeCamp, du vil også gerne se det - Mestre kunsten at loop i JavaScript med disse utrolige tricks