Ako vytvoriť funkciu prihlásenia pomocou Bootstrap Modal a jQuery AJAX

Bootstrap Modal je vynikajúci spôsob, ako vytvoriť prihlasovací formulár na svojom webe. V tomto tutoriáli sa dozviete, ako vytvoriť funkciu prihlásenia pomocou Bootstrap pre web ASP.NET. Funkcia kontroly prihlásenia sa vytvorí pomocou jQuery AJAX.

Krok za krokom vytvorím nasledujúce funkcie:

1. Bootstrap Modal, ktorý bude obsahovať prihlasovací formulár.

2. Prihlasovací formulár bude obsahovať 2 polia, „Meno používateľa“ a „Heslo“. Používateľ musí do týchto polí zadať svoje hodnoty.

3. Kliknutím na tlačidlo odoslať vo formulári sa vstup používateľa (používateľské meno a heslo) odošle do funkcie C #.

4. Táto funkcia C # skontroluje, či sú používateľské meno a heslo správne alebo nie.

5. Ak sú správne, potom je používateľ presmerovaný na stránku profilu.

Tu si môžete pozrieť funkčné DEMO.

Vytvorenie Bootstrap Modalu s prihlasovacím formulárom

Pridajte odkaz na súbory „bootstrap CSS, jQuery a bootstrap js“ na hlavu stránky.

Ďalej Vytvorte Bootstrap Modal, ktorý obsahuje prihlasovací formulár:

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 

Takto bude vyzerať modálny prihlasovací formulár bootstrap.

Pridanie kódu jQuery k udalosti kliknutia na tlačidlo

Kliknutím na tlačidlo prinútim používateľov, aby pred odoslaním formulára zadali určitú hodnotu do polí používateľské meno a heslo.

Keď obidve textové polia obsahujú určitú hodnotu, až potom budem volať funkciu C # pomocou metódy jQuery AJAX. Pomocou tejto metódy budem môcť odovzdať hodnoty dvoch textových polí (používateľské meno a heslo) mojej funkcii C #.

Pridajte na svoju stránku nasledujúci kód jQuery:

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

V metóde úspešného spätného volania môžete vidieť, že presmerujem používateľa na stránku profile.aspx, ak a len, ak dostanem správu „ Úspech “.

SetTimeout () je funkcia JavaScript, ktorý presmeruje na stránku s profilom 2 sekundách.

Nasledujúce 2 obrázky vysvetlia funkciu prihlásenia:

1. Keď prihlásenie zlyhá. 2. Keď je prihlásenie úspešné.

Kód C #:

Teraz na svoju stránku .aspx.cs pridajte nasledujúci kód:

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

Funkcia login () sa volá metódou jQuery . Skontroluje, či sú používateľské meno a heslo správne, a potom vráti príslušnú správu.

CSS

Ak chcete upraviť prihlasovací formulár a modus bootstrap tak, aby vyzerali perfektne, pridajte na svoju stránku nasledujúci CSS:

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

Stránka profilu

Na stránke profilu dostane používateľ uvítaciu správu. Kód stránky profilu je nasledujúci:

if (!IsPostBack){ welcomeMessage.InnerHtml = "Welcome " + Session["User"] + " to the profile page.";}
Skontrolujte funkčné ukážku kliknutím na nasledujúci odkaz:

Pracovné DEMO

Záver

Dúfam, že sa vám tento návod páčil. V prípade akýchkoľvek otázok ma neváhajte kontaktovať. Budem tu, aby som pomohol, ak to budeš potrebovať. Ak sa vám tento návod páčil, zdieľajte ho so svojimi sociálnymi účtami.

Publikoval som tiež ďalší návod na freeCodeCamp, ktorý by ste tiež radi videli - Osvojte si umenie cyklovania v JavaScripte pomocou týchto neuveriteľných trikov