JQuery Ajax ve MVC ile en güzel ve etkili şeylerden bir tanesi elbette formlar ve kontrolleri. Evet itiraf etmeliyim ki yazılımcı için biraz sinir bozucu olsa da aslında kullanım esnasında da bir o kadar fonksiyonel güzellikler sunmaktadır.
Neyse hemen konuya gelelim. 🙂
Login.cshtml sayfamızda aşağıdaki gibi bir form oluşturalım;
<form>
<h1>@LoginTR.LoginTitle</h1>
<div>
<input id="usernamex" type="text" class="form-control" placeholder="Kullanıcı adınız" required="" />
</div>
<div>
<input id="passwordx" type="password" class="form-control" placeholder="Şifreniz" required="" />
</div>
<div>
<a id="btnLogin" class="btn btn-default submit">Giriş</a>
<a class="reset_pass" href="#">@LoginTR.LostYourPassword</a>
</div>
<div class="clearfix"></div>
<div class="separator">
<p style="display: none;" class="change_link">
@LoginTR.NewToSite
<a href="#toregister" class="to_register">@LoginTR.CreateAccount </a>
</p>
<div class="clearfix"></div>
<br />
<div>
<h1><i class="fa fa-paw" style="font-size: 26px;"></i>ExpoAjans</h1>
<p>ExpoAjans © 2016 Tüm Hakları Saklıdır.</p>
</div>
</div>
</form><script type="text/javascript">
$(function () {
var isSuccess = false;
$("#btnLogin").click(function () {
var userName = $("#usernamex").val();
var password = $("#passwordx").val();
if (userName == "" || password == "") {
alert("lütfen kullanıcı adı ve şifrenizi boş geçmeyin!")
return;
}
var data = { username: userName, password: password };
$.ajax({
type: 'POST',
url: "/Account/Login",
data: JSON.stringify(data),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (gData) {
if (gData != "") {
isSuccess = true;
}
},
complete: function () {
if (isSuccess) {
alert("başarılı giriş yaptınız...")
} else {
alert("hata oluştu. bilgilerinizi kontrol ederek tekrar deneyiniz!")
}
isSuccess = false;
}
});
})
});
</script>Ve son olarak gelelim Controller’daki kodlarımıza. Aslında bir bakıma codebehind kısmına 😉
[HttpPost]
public ActionResult Login(string username, string password)
{
//username ve password sorgumuz bu alanda olacak. Artık mimariniz nasılsa ona göre size bırakıyorum bu alanı :) Ancak geri dönecek değeri bir string NameSurname isminde bir değişkende yapacağız. Aman boş bırakmayın diyeyim.
return Json(new { gData = NameSurname });
}İşte işlemimiz bu kadar. ActionResult kısmında gelen değerleri kontrol ediyoruz ve geriye ben kullanıcını adını soyadını döndüm.
Artık geliştirme kısmı size kalmış. Eğer sormak istediğiniz sorular olursa lütfen yorum kısmında iletmekten çekinmeyin. Elimden geldiğince hızlı şekilde yanıt vermeye çalışacağım.
İyi çalışmalar dilerim 🙂