Mvc ve Ajax ile Login İşlemi Yapma

İbrahim     7 Ekim 2017     2571     6    
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

Mvc ve Ajax ile Login İşlemi Yapma

Eğer kullanıcı adı yada şifre hatalı ise alert ile mesaj verdiriyoruz.

Mvc ve Ajax ile Login İşlemi Yapma

Giriş başarılı ise alert ile mesaj verdirdikten 3 saniye sonra 'AdminPage' sayfasına yönlendirme yapıyoruz.

Mvc ve Ajax ile Login İşlemi Yapma

 

Mvc ve Ajax ile Login İşlemi Yapma


Etiketler:  
jquery
asp-net
mvc
ajax
ajax-ile-login-islemi


Paylaş:  

Bir Cevap Yazın

V

Vedat PALA 8 Ekim 2017
Çok güzel bir çalışma..Birde proje dosyalarını google drive veya diğer bulut depolamalarda indirme imkanı verirseniz çok daha daha iyi olur.. Teşekkürler..

İbrahim Çakal 8 Ekim 2017
Teşekkür ederim Vedat Bey.Elimden geldiğince bildiklerimi aktarmaya çalışıyorum.Paylaşmamı istediğiniz konular olursa iletişimden bana ulaşabilirsiniz. Dediğiniz gibi bugün akşama projeyi makalenin sonuna ekleyeceğim. :)

T

Tahsin Akyol 12 Ekim 2017
Eline sağlık tam aradığım konuydu çok teşekkürler :)

İbrahim Çakal 12 Ekim 2017
Teşekkür ederim :)

M

murat 28 Ocak 2018
Elinize bilginize sağlık tşklr

İbrahim Çakal 2 Şubat 2018
Ben teşekkür ederim ne demek