لاگین ایجکسی در Asp.net core

با سلام و خسته نباشید به همه کاربران عزیز وب سایت کلیک سایت
نام مقاله : لاگین ایجکسی در Asp.net core

قبل از شروع به مقاله خدمتتون عرض کنیم این مبحث در دوره آموزش Asp.net Core به صورت پروژه محور و در قالب پیاده سازی یک سیستم کتابخانه به صورت کامل آموزش داده شده است.
همونطوری که می دونید مدتی هست مایکروسافت از تکنولوژی جدید خودش یعنی Core رونمایی کرده و مزایای بسیار زیاد اون مثل سرعت بالاتر، امنیت بهتر و سازگاری بهتر اون با سایر سیستم عامل ها باعث شده تا دل هر برنامه نویسی رو ببره و اکثر برنامه نویس های Asp به سرعت به سمت Asp.net Core کوچ کنن.
اما اگر یه سرچ ساده در اینترنت و توی گوگل بزنید متوجه می شید که منابع برای یادگیری Asp.net Core خیلی محدود هست و حتی خود مایکروسافت هم هنوز داکیومنت و راهنمای کاملی رو ارائه نداده. بنابراین ما سعی می کنیم توی این مقالات تا اونجایی که برامون مقدور هست مباحث مختلف رو به بحث بذاریم و در موردشون به صورت عملی صحبت کنیم.
قبل از اینکه وارد بحث این مقاله یعنی لاگین ایجکسی در Asp.net core بشیم بهتون توصیه میکنم حتما از دوره آموزشی Asp.net Core به صورت کاملا پروژه محور رو که در قالب فیلم های آموزشی و در قالب پیاده سازی یک پروژه کتابخانه طراحی کردیم رو حتما مشاهده بفرمایید چرا که به جرات میشه گفت این دوره یک منبع بسیار عالی برای یادگیری Asp.net Core هست.
اما بریم ببینیم چجوری میتونیم یک لاگین ایجکسی در Asp.net Core داشته باشیم.
در ابتدای کار و بعد از ایجاد پروژه و ساختن دیتابیس به صورت Code First قطعا شما باید در پوشه Model کلاس خودتون رو برای ایجاد جدول User ایجاد کنید که این مباحث رو فعلا مطرح نمی کنیم چون مطمئنم دیگه اینها رو بلد هستید.
بنابراین در ابتدا یک PartialView رو به نام _PartialViewایجاد می کنید و کدهای زیر رو داخلش می نویسید :

@model RegistratiotnMvcCore_g.Model.UserAccount

<div id="mainlogindiv">

   
    <form asp-controller="Home" asp-action="Login" method="post" id="myform">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>

        <div class="form-group">
            <label asp-for="UserName"></label>
            <div>
                <input asp-for="UserName" class="form-control" placeholder="نام کاربری" id="txtUsername" />
                <span asp-validation-for="UserName" class="text-danger"></span>
            </div>
        </div>

        <div class="form-group">
            <label asp-for="Password"></label>
            <div>
                <input asp-for="Password" class="form-control" placeholder="رمز عبور" id="txtPassword" />
                <span asp-validation-for="Password" class="text-danger"></span>
            </div>
        </div>

        <div class="text-center">

            <button type="button" class="btn btn-success" style="width:70px; margin-left:30px;" id="btn_login">ورود</button>

            <a class="btn btn-danger" asp-area="" asp-controller="Home" asp-action="Register" style="width:70px; margin-left:30px;">ثبت نام</a>

        </div>

    </form>

</div>

در بخش کنترلر هم دستورات زیر می نویسیم

    [HttpGet]
        public IActionResult Login()
        {
            return PartialView();
        }

        [HttpPost]

 
        [ValidateAntiForgeryToken]
        public PartialViewResult Login(UserAccount user)
        {
            var accout = _context.userAccount.Where(u => u.UserName == user.UserName && u.Password == user.Password).FirstOrDefault();
     

            if (accout != null)
            {
                //اگر مشخصات صحیح بود باید کاربر را به سشن جاری که در ابتدای اجرای برنامه ایجاد کردیم، اضافه کنیم
                HttpContext.Session.SetString("UserID", accout.UserID.ToString());
                HttpContext.Session.SetString("UserName", accout.UserName);       

                ViewBag.UserName = HttpContext.Session.GetString("UserName");

                return PartialView("_welcome");

            }
            else
            {

        
                ViewBag.Message = "اطلاعات ورود اشتباه است";
                return PartialView("_ErrorMessage");
            }

            return null;

        }

در نهایت برای داشتن یک لاگین ایجکسی در Asp.net core در View مربوط به ایندکس کدهای زیر رو می نویسیم:

<script>

   // $("#btn_login").on("click", function (event) {
    $(document).on("click", "#btn_login", function (event) {
        
        if ($("#txtUsername").val().length == 0) {
            alert("نام کاربری را وارد نمایید");
            //   $("#txtUsername").css("background-color","lightcoral");

        }
        else {

            var data = $("#myform").serialize();
            $.ajax({
                type: "Post",
                url: "/Home/Login",
                data: data,
                dataType: "html",
                //     dataType: "json",
                success: function (response) {

                    //hide Register menu after Login
                    $('#mainMenu li').each(function () {
                        var text = $(this).text();
                        if (text.match("ثبت نام")) {
                            $(this).hide();
                        }
                    });
                    //insert Logout menu
                    $('#mainlogindiv').empty().html(response);
                    var menu = $('#logoutMenu').removeClass('.hidden').html();
                    $('#mainMenu').append(menu);
                }
            })
        }
    });

</script>

به این ترتیب می تونیم بدون رفرش شدن صفحه لاگین رو انجام بدیم.