de către Yogi

Bootstrap Modal este un mod excelent de a crea un Formular de autentificare pe site-ul dvs. web. În acest tutorial, veți afla cum să creați o caracteristică de conectare utilizând Bootstrap pentru un site web ASP.NET. Funcția Verificare autentificare va fi creată utilizând jQuery AJAX.

Voi crea următoarele funcții pas cu pas:

1. Un mod Bootstrap care va conține un formular de autentificare.

2. Formularul de autentificare va conține 2 câmpuri, „Nume utilizator” și „Parolă”. Utilizatorul trebuie să introducă valorile sale în aceste câmpuri.

3. Dând clic pe butonul de trimitere din formular, introducerea utilizatorului (numele de utilizator și parola) va fi trimisă funcției C #.

4. Această funcție C # va verifica dacă numele de utilizator și parola sunt corecte sau nu.

5. Dacă sunt corecte, utilizatorul este redirecționat către pagina de profil.

Puteți consulta DEMO de lucru aici.

Crearea unui mod Bootstrap cu un formular de autentificare

Adăugați referința fișierelor „bootstrap CSS, jQuery și bootstrap js” în capul paginii.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Apoi creați un mod Bootstrap care conține formularul de conectare:

<div class="container"><div class="validCredential">
<h3>Try any one of the following three:</h3><div><p>  1. Username: Ram</p><p>  Password: admin</p></div>
<div><p>  2. Username: Shiv</p><p>  Password: admin</p></div>
<div><p>  3. Username: Krishna</p>
<p>  Password: admin</p></div>
</div>
<!-- The button that triggers the Modal --><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Bootstrap Modal --><div id="myModal" class="modal fade" role="dialog">  <div class="modal-dialog">
    <!-- Modal content-->    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal">×</button>        <h4 class="modal-title">Log in with your Username</h4>      </div>
      <div class="modal-body">        <table>          <tbody>            <tr>              <td>                <input type="text" id="userNameTextBox" placeholder="Username" />              </td>            </tr>            <tr>              <td>                <span id="userNamSpan"></span>              </td>            </tr>            <tr>              <td>                <input type="text" id="passwordTextBox" placeholder="Password" />              </td>            </tr>            <tr>              <td>                <span id="passwordSpan"></span>              </td>            </tr>            <tr>              <td>                <input type="button" id="submitButton" value="Login" />              </td>            </tr>            <tr>              <td>                <span id="messageSpan"></span>              </td>            </tr>            <tr>              <td>                <img id="loadingImg" src="https://www.freecodecamp.org/news/how-to-create-a-login-feature-with-bootstrap-modal-and-jquery-ajax-53dc0d281609/loading.gif" />              </td>            </tr>          </tbody>        </table>      </div>
    <div class="modal-footer">      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>    </div>  </div><!-- END Modal content--></div>
</div>
<!-- END Bootstrap Modal --></div>

Așa va arăta formularul de conectare modal bootstrap.

Cum se creeaza o caracteristica de conectare cu Bootstrap Modal
Bootstrap Modal Login Form

Adăugarea codului jQuery la evenimentul cu clic pe buton

În clicul pe buton, voi forța utilizatorii să introducă o anumită valoare în câmpurile de nume de utilizator și parolă, înainte de a trimite formularul.

Când ambele casete de text conțin o anumită valoare, numai atunci voi apela funcția C # folosind Metoda jQuery AJAX. Cu această metodă, voi putea transmite valorile celor 2 casete de text (nume de utilizator și parolă) funcției mele C #.

Adăugați codul jQuery de mai jos pe pagina dvs.:

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

În metoda de apel invers de succes, puteți vedea că redirecționez utilizatorul către profile.aspx pagina dacă-și-numai-dacă primesc „Succes”Mesaj.

setTimeout () este o funcție JavaScript care va redirecționa către pagina de profil în 2 secunde.

Următoarele 2 imagini vor explica caracteristica de conectare:

1. Când conectarea eșuează.

1612011305 651 Cum se creeaza o caracteristica de conectare cu Bootstrap Modal
Autentificare nereușită pentru numele de utilizator și parola greșite

2. Când conectarea are succes.

1612011305 415 Cum se creeaza o caracteristica de conectare cu Bootstrap Modal
Conectare reușită atunci când numele de utilizator și parola sunt corecte

Codul C #:

Acum în .aspx.cs pagina, adăugați următorul cod:

[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<Credential> LoadCredential()
{
List<Credential> credList = new List<Credential>();
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;
}

Funcția login () este cea care este apelată de jQuery metodă. Se verifică dacă numele de utilizator și parolele sunt corecte și apoi returnează mesajul corespunzător.

CSS

Pentru a stiliza formularul de conectare și modalitatea bootstrap astfel încât să arate perfect, adăugați următorul CSS pe pagina dvs.:

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

Pagina de profil

1612011306 273 Cum se creeaza o caracteristica de conectare cu Bootstrap Modal
Mesaj de bun venit pe pagina de profil

Pe pagina de profil, utilizatorul va primi mesajul de întâmpinare. Codul paginii de profil este următorul:

<h1 id="welcomeMessage" runat="server"></h1>
if (!IsPostBack){  welcomeMessage.InnerHtml = "Welcome " + Session["User"] + " to the profile page.";}

Verificați demo-ul de lucru făcând clic pe linkul de mai jos:

Demo de lucru

Concluzie

Sper că ți-a plăcut acest tutorial. Nu ezitați să mă contactați pentru orice întrebări. Voi fi acolo să vă ajut dacă aveți nevoie de el. Dacă ți-a plăcut acest tutorial, atunci împărtășește-l cu amabilitate pe conturile tale sociale.

De asemenea, am publicat un alt tutorial pe Routech, ați dori să-l vedeți și – Stăpânește arta buclării în JavaScript cu aceste trucuri incredibile