Bu makalede mvc ve ajax ile login işlemi nasıl yapılır onu göreceğiz.
Bir mvc projesi oluşturalım.Controllers klasörü içerisinde 'HomeController' adlı bir controller oluşturalım.
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}View'imizi ve layout'umuzu oluşturalım.
Layout.cs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
<style type="text/css">
* {
color: #000000;
font-family: Calibri;
font-size: 14px;
padding: 0;
}
body {
background-color: #808080;
}
.kutu {
margin: 0 auto;
width: 24%;
height: 170px;
padding: 4%;
background-color: #ffffff;
}
label, input {
display: block;
}
input[type="text"], input[type="password"] {
width: 100%;
height: 30px;
margin-bottom: 15px;
}
#login {
width: 80px;
height: 27px;
}
</style>
</head>
<body>
<div class="kutu">
@RenderBody()
</div>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/LoginControl.js"></script>
</body>
</html>
Index.cs
@{
ViewBag.Title = "Giriş Paneli";
}
<label>Kullanıcı Adı</label>
<input class="kAd" type="text" placeholder=" Kullanıcı Adını Giriniz" />
<label>Şifre</label>
<input class="sifre" type="password" placeholder=" Şifreyi Giriniz" />
<button id="login">Giriş</button>Şimdi Scripts klasöründe 'LoginControl' adlı bir script dosyası oluşturalım ve kodları yazalım.
$("#login").click(function () {
var degerler = {
kAd: $(".kAd").val(),
sifre: $(".sifre").val()
};
$.ajax({
type: 'POST',
url: '/Home/LoginControl',
data: JSON.stringify(degerler),
dataType: 'JSON',
contentType: "application/json;charset=utf-8",
success: function (gelenDeg) {
if (gelenDeg === "1") {
alert("Giriş Başarılı! Yönlendiriliyorsunuz..");
setTimeout(function () { window.location.href = '/Home/AdminPage' }, 2000);
}
else if (gelenDeg === "2") {
alert("Kullanıcı adı yada şifre alanı boş olamaz!");
}
else if (gelenDeg === "0") {
alert("Kullanıcı adı yada şifre hatalı!");
$(".kAd").val("");
$(".sifre").val("");
}
},
error: function () {
alert("Bir hata oluştu");
$(".kAd").text("");
$(".sifre").text("");
}
});
});HomeController'ımızı geçelim ve kodlarımızı yazalım.
using System;
using System.Web.Mvc;
namespace LoginControllers.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult LoginControl(string kAd, string sifre)
{
string kullaniciAd = "admin";
string kullaniciSifre = "123456";
if (String.IsNullOrEmpty(kAd) || String.IsNullOrEmpty(sifre)) return Json("2");
if (kullaniciAd == kAd && kullaniciSifre == sifre)
return Json("1");
else
return Json("0");
}
public ActionResult AdminPage()
{
return View();
}
}
}LoginController'ımızı yazdık ve giriş başarılı ise AdminPage sayfasına gitmesini sağlayacağız.Bunun için AdminPage sayfasınıda oluşturalım.
@{
ViewBag.Title = "Admin Page";
}
<h2>AdminPage Sayfası</h2>
Yapılacak işlemler bu kadar arkadaşlar.
Programdan görüntüler
Eğer kullanıcı adı yada şifre hatalı ise alert ile mesaj verdiriyoruz.
Giriş başarılı ise alert ile mesaj verdirdikten 3 saniye sonra 'AdminPage' sayfasına yönlendirme yapıyoruz.
0 Comments
EmoticonEmoticon