Asp.Net MVC’de Ajax.BeginForm ve Jquery Ajax ile Login/Logout İşlemleri

Daha önceki dersimizde ,Asp.Net MVC’de Autherization işlemlerinden bahsetmiştim.O makalede, FormAutherization ile login,logout,controller ve action authorize ve rolleri anlatmıştım.Bu derste ise Jquery Ajax ve Ajax.BeginForm() ile sayfayı postback etmeden,yenilemeden login,logout işlemlerini yapalım.Öncelikle diğer makelede anlattığım modeli tekrar aşağıya yazıyorum.

 

public class UserProfile
    {
        [Display(Name = "Kullanıcı Adı"), Required]       
        public string Username { get; set; }
 
        [Display(Name = "Şifre"), Required, DataType(DataType.Password)]
        public string Password { get; set; }
    }

UserProfile adındaki modelimi LoginAjaxController adında oluşturduğum controller ile Index View’i arasında aracı olarak kullanacağız.Controllerda öncelikle Index View’ini çağıracak actionu ve JsonResult dönderen Login methodunu yazalım.

 

 

 public ActionResult Index()
        {
            return View();
        }
[HttpPost]
        public JsonResult Login(UserProfile userProfile)
        {
            string message = "";
            bool authorized = false;
            string roles = "";
            var userBll = new UserBLL();
            if (ModelState.IsValid)
            {
                var user = userBll.GetirByUsernameAndPassword(userProfile.Username, userProfile.Password);
                if (user != null)
                {
                    if (userBll.GetirRolesByUserName(user.username).Count == 0)
                        message = "Bu kullanıcının yetkileri yok";
                    else
                    {
                        FormsAuthentication.SetAuthCookie(userProfile.Username, false);//set token for user
                        message = "";
                        authorized = true;
                        roles = string.Join(",", user.UserInRoles.Select(s => s.Role.RoleName));
                    }
                    
                }
                else
                {
                    message = "Kullanıcı adı veya şifre hatalı girildi.";
                }
            }
            else
            {
                message = "Lütfen kullanıcı adı ve şifrenizi giriniz.";
            }

            return Json(new
            {
                message = message,
                authorized = authorized,
                roles = roles,
                username = userProfile.Username
            }, JsonRequestBehavior.AllowGet);
        }

Görüldüğü üzere Login Methodumuz HttpPost attribute ile sadece post edilebilir method olduğu belirtilmiş.Daha sonra actiona gelen model nesnesinden kullanıcı adı ve şifre çekilerek veritabanı üzerinde sorgulama yapılıyor.Sorgudan veri gelirse bu kullanıcı authenticate ediliyor.Değilse authenticate edilmetecek.Bunu JsonResult değerine ekleyeceğimiz ve View tarafında kullanacağımız authorized değişkeninden anlayacağız.Extradan ben login olunca ekranda göstermek adına rollerini string.Join ile birleştirip gönderiyorum.Ve Oturum açan kullanıcıya Hoşgeldiniz demek için de ayrıca kullanıcı adını geri gönderiyorum.

Şimdi controllerımda sayfa ön yüklemesinde önceden oturum açmış kullanıcı var mı yok mu diye kontrol etmek için IsAuthorized actionunu ve ayrıca oturumunu sonlandırması için de Logout actionunu yazıyorum.

[HttpPost]
        public JsonResult IsAuthorized()
        {
            bool authorized = false;
            string roles = "";
            var userBll = new UserBLL();
            string username = "";
            if (User.Identity.IsAuthenticated)
            {
                authorized = true;
                var user = userBll.GetirByUsername(User.Identity.Name);
                roles = string.Join(",", user.UserInRoles.Select(s => s.Role.RoleName));
                username = user.username;
            }          
            return Json(new
            {
                authorized = authorized,
                roles = roles,
                username =username
            }, JsonRequestBehavior.AllowGet);
        }

        public JsonResult Logout()
        {
            FormsAuthentication.SignOut();
            return Json(true, JsonRequestBehavior.AllowGet);
        }

IsAuthorized actionunda oturum açmış kullanıcı varsa authorized değişkenini true olarak gönderiyorum.Bunun yanında rol bilgileri ve kullanıcı adı bilgisini de ekranda göstermek için JsonResult içerisine ekledim.

Logout actionunda FormAuthentication SignOut yapılıp geriye true yolluyorum.

Controllerda gerekli ve yeterli actionlarımı tanımladıktan sonra Index View’imi öncelikle şu şekilde tanımlıyorum.

@using (Ajax.BeginForm("Login", "LoginAjax", new AjaxOptions { HttpMethod = "POST", OnSuccess = "Login" }, new { id = "loginForm" }))
{

<table>

<tr>

<td>
                @Html.TextBoxFor(m => m.Username, new { @placeholder = "Kullanıcı Adınız", })
            </td>


<td>
                @Html.ValidationMessageFor(m => m.Username)
            </td>

        </tr>


<tr>

<td>
                @Html.PasswordFor(m => m.Password, new { @placeholder = "Şifreniz" })
            </td>


<td>
                @Html.ValidationMessageFor(m => m.Password)
            </td>

        </tr>


<tr>

<td align="center">
                <input id="btnLogin" type="submit" value="Giriş Yap">
            </td>


<td>
                
            </td>

        </tr>

    </table>

}

<div id="divUser"></div>


<div id="divSonuc"></div>

Bir adet Ajax Formu ekliyorum.LoginAjax controllerında Login actionuna gideceğini söylüyorum.üçüncü parametrede formun post edileceğini ve OnSuccess ‘de Login Script Function’una gideceğini belirtiyorum.Son parametrede form’un id değerini setliyorum.divUser adındaki div oturum açıldığında kullanıcı bilgilerini ,divSonuc ise hata mesajlarını görüntüleyecek.

Form içerisinde model’den gelen Username ve Password propertylerinin Html Helperlarını ve validation mesajlarını ekliyorum.Validation Mesajları Ajax.BeginForm ‘da çalışması için ve tabiki Ajax.BeginForm’un düzgün çalışması için aşağıdaki script kütüphanelerini çağırıyorum:

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Şimdi Sayfa ilk açıldığında çalışacak kodu yazalım:

 $(document).ready(function() {
        $.ajax({
            url: '/LoginAjax/IsAuthorized',
            type:'POST',
            success: function (result) {
                if (result.authorized) {
                    $("#loginForm").css("display","none")
                    $("#divSonuc").append("
<b>Rolleri:</b>" + result.roles);
                    $("#divUser").html("Welcome <b>" + result.username + "</b>, <input type='button' id='btnLogout' value='Logout'/>");
                }
               
            }
        });
});

Document Load edildiğinde IsAutherized actionuna ajax ile istekde bulunuyoruz.Bize dönen JsonResult nesnesindeki authorized değeri true ise ,yani oturum açılmış ise,loginform’un gözükmesini engelliyoruz,divSonuc divine kullanıcı Rollerini,divUser divine de kullanıcıya hoşgeldin mesajını kullanıcı adıyla birlikte ve tabiki logout butonunu da en sonuna ekliyoruz.

Daha sonra,Logout butonunun click eventini ekliyorum.Normal click() şeklinde çağırırsak hata alırız.Çünkü btnLogout butonu dinamik olarak eklendiği için Jquery “on” veya “live” methodlarından click eventini çağırmamız gerekir.

  $(document).ready(function() {
        $.ajax({
            url: '/LoginAjax/IsAuthorized',
            type:'POST',
            success: function (result) {
                if (result.authorized) {
                    $("#loginForm").css("display","none")
                    $("#divSonuc").append("
<b>Rolleri:</b>" + result.roles);
                    $("#divUser").html("Welcome <b>" + result.username + "</b>, <input type='button' id='btnLogout' value='Logout'/>");
                }
               
            }
        });


        $(document).on('click', '#btnLogout', function() {
            $.ajax({
                url: '/LoginAjax/Logout',
                type: 'POST',
                success:function(result) {
                   if (result) {
                       $("#loginForm")[0].reset();
                       $("#loginForm").css("display", "inline");
                       $("#divSonuc").html("");
                       $("#divUser").html("");
                   }
                }
            });
        });
    });

btnLogout butonuna tıklandığında LoginAjax controllerındaki Logout actionuna istekte bulunuyoruz.Geri dönen değer true olunca loginform tekrar görüntüleniyor.divSonuc ve divUser içerikleri siliniyor.

En son,Ajax.BeginForm da tanımladığımız Form Submit İşlemi Başarılı olunca gitmesini İstediğimiz Login functionunu yazıyorum.

 function Login(result) {
        $("#divSonuc").html("<span style='color:red'><b>"+result.message+"</b></span>");
        if (result.authorized) {
            $("#loginForm").css("display", "none");
            $("#divSonuc").append("
<b>Rolleri:</b>" + result.roles);
            $("#divUser").html("Welcome <b>" + result.username+"</b>, <input type='button' id='btnLogout' value='Logout'/>");          
        }
    }

Önce geri dönen JsonResult nesnesindeki message değeri divSonuc içerisine ekleniyor.Daha sonra Ajax.BeginForma gelen JsonResult nesnesindeki authorized değeri true ise loginForm kapatılıyor.divSonuc içerisine kullanıcı rolleri ekleniyor.En son divUser içerisine kullanıcı adı hoşgeldiniz mesajı ile verilip,ardından btnLogout adındaki oturum kapama butonu ekranda görüntüleniyor.

Asp.Net MVC’de Ajax.BeginForm Kullanımı

Asp.Net Mvc’de Html.BeginForm dışında bir de Ajax.BeginForm vardır.Bunu kullanabilmek için  jquery.js ve unobtrusive-ajax.js kütüphanelerini sayfaya eklemek gerekir.unobtrusive-ajax.js i Visual Studio üzerinden Package Manager Console a aşağıdaki kodu yazarak indirebilirsiniz:

PM>Install-Package Microsoft.jQuery.Unobtrusive.Ajax

Daha sonra sayfama Ajax.BeginForm ile form ekliyorum:

 

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

@using (Ajax.BeginForm("Login", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divSonuc" }, new { id = "loginForm" }))
{
    @Html.TextBox("Mail", null, new { @placeholder = "E-Posta Adresiniz" })
    @Html.Password("Password", null, new { @placeholder = "Şifreniz" })

    <input id="btnUyeOl" type="submit" value="Üye Ol">
    <div id="divSonuc"></div>
}

Yukarıda görüldüğü gibi Form etiketi ile Home controllerı altındaki Login actionu çağrılmak istenmiş.Dönen değer divSonuc etiketi altına yazılmak ya da güncellenmek istenmiş.

Login Actionu da test amaçlı şu şekilde kodlayalım:

      [HttpPost]
        public string Login(string Mail, string Password)
        {
            if (String.IsNullOrEmpty(Mail) && String.IsNullOrEmpty(Password))
            {
                return "E-Posta adresinizi ve şifrenizi girmediniz.";
            }
            else if (String.IsNullOrEmpty(Mail))
            {
                return "E-posta adresinizi girmediniz.";
            }
            else if (string.IsNullOrEmpty(Password))
            {
                return "Şifrenizi girmediniz.";
            }
            else
            {
                return "Sisteme, başarıyla giriş yaptınız.";
            }
        }

Görüldüğü üzere bu actionu sayfayı postback yapmadan Ajax.BeginForm ile çağırabiliyoruz.