همه دسته بندی ها

دوره های در حال ثبت نام آکادمی برنامه نویسان

ایجاد فرم ورود به سایت با Modal و Bootstrap

چهارشنبه 7 مرداد 1394

در این مقاله با نحوه ایجاد یک صفحه ورود زیبا و روان برای ورود کاربران در وبسایت با استفاده از Component زیبای Modal در Bootstrap آشنا می شویم و میتوانیم از آن در وب سایت های خود به سادگی استفاده کنیم.

ایجاد فرم ورود به سایت با Modal و Bootstrap

بدین منظور ابتدا فایل های Bootstrap را به صورت External StyleSheet به صفحه اضافه می کنیم.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


// کد های برنامه



<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

سپس یک Layout برای استفاده از Modal در Bootstrap استفاده می کنیم تا در این صورت هر گاه خواستیم از Modal استفاده کنیم کافی باشد از آن View یا Partial View استفاده کنیم.

 @* Layout Page for Twitter Bootstrap Modal Dialogs *@
    <div class='modal fade' id='@ViewBag.ModalId' tabindex='-1' role='dialog' 
     aria-labelledby='@ViewBag.ModalId@Html.Raw(' label')' aria-hidden='true'>
        <div class='modal-dialog'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='button' class='close' data-dismiss='modal' 
                     aria-label='Close'><span aria-hidden='true'>&times;</span></button>
                    <h4 class='modal-title' id='@ViewBag.ModalId@Html.Raw(' label')'>
                     @ViewBag.ModalTitle</h4>
                </div>
                <div class='modal-body'>
                        @RenderBody()
                </div>
                <div class='modal-footer'>
                    <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
                </div>
            </div>
        </div>
    </div>


سپس کد های فرم ورود را در یک Partial View جدا می کنیم.مانند زیر : 

@using Sample.Web.ModalLogin.Models
@model LoginViewModel
<div class='row'>
    <div class='col-md-8'>
        <section id='loginForm'>
            @using (Html.BeginForm('Login', 'Account', new { ReturnUrl = ViewBag.ReturnUrl }, 
            FormMethod.Post, new { @class = 'form-horizontal', role = 'form' }))
            {
                @Html.AntiForgeryToken()
                <h4>Use a local account to log in.</h4>
                <hr />
<div class='alert alert-danger' role='alert' style='display: none' id='alertBox'></div>
                @Html.ValidationSummary(true, '', new { @class = 'text-danger' })
                <div class='form-group'>
                ...
            }
        </section>
    </div>
</div>

حال اقدام به ایجاد یک View با نام Login.cshtml می کنیم و کد های زیر را که برای استفاده یک Modal است در آن قرار می دهیم.

@using Forloop.HtmlHelpers
@using (Html.BeginScriptContext()){
    Html.AddScriptFile("~/Scripts/app/views/LoginModal.js");
}
@{
    Layout = "~/Views/Shared/_LayoutModal.cshtml";
    ViewBag.ModalTitle = "Login";
    ViewBag.ModalId = "ModalLogin";
}
   
@Html.Partial("_LoginPartialForm")

دقت داشته باشید که در کد های فوق دو View Bag به ترتیب به نام های : ModalTitle و ModalId وجود دارد که به ترتیب برای عنوان Modal و ویژگی Id در Modal اشاره می کند.

در آخر هم که دستور زیر باعث می شود که Partial View در صفحه Load شود.

@Html.Partial("_LoginPartialForm")

دقت داشته باشید نکته حائز اهمیت در این است که فرم ورود باید به افرادی که وارد نشده اند و تصدیق هویت نشده اند نمایش داده شود. پس کد زیر را در بالاترین قسمت Layout قرار می دهیم.

<body>
@if (!Request.IsAuthenticated)
{
    @Html.Partial("LoginModal")
}
   ...


سپس به وسیله کد JQuery در زیر ویژگی های Modal را قرار می دهیم.

$(document).ready(function () {
    var loginLink = $("a[id='loginLink']");
    loginLink.attr({ "href": "#", "data-toggle": "modal", "data-target": "#ModalLogin" })
});

سپس کد زیر در اکشن هنگامی که کاربر بر روی Login کلیک می کند یک درخواست به وسیله ی Ajax می فرستد و خروجی هم از نوع JasonResult است.

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<jsonresult> LoginJson(string username, string password, bool rememberme)
{
    var result = await SignInManager.PasswordSignInAsync
                 (username, password, rememberme, shouldLockout: false);
    switch (result)
    {
        case SignInStatus.Success:
            return Json(true);
        case SignInStatus.LockedOut:
        case SignInStatus.RequiresVerification:
        case SignInStatus.Failure:
            return Json(false);
        default:
            break;
    }
    return Json(false);
}

در آخر برای Modal به وسیله جاوا اسکریپت 2 رویداد را در نظر می گیریم ، رویداد اول برای بستن Modal و رویداد دوم برای باز شدن Modal که کد های جاوا اسکریپت زیر بدین منظور در نظر گرفته شده است.

$(document).ready(function () {
    var loginLink = $("a[id='loginLink']");
    loginLink.attr({ "href": "#", "data-toggle": "modal", "data-target": "#ModalLogin" });
    $("#loginform").submit(function (event) {
        if ($("#loginform").valid()) {
            var username = $("#Email").val();
            var password = $("#Password").val();
            var rememberme = $("#RememberMe").val();
            var antiForgeryToken = Sample.Web.ModalLogin.Views.Common.getAntiForgeryValue();
            Sample.Web.ModalLogin.Identity.LoginIntoStd
            (username, password, rememberme, antiForgeryToken, 
            Sample.Web.ModalLogin.Views.LoginModal.loginSuccess, 
            Sample.Web.ModalLogin.Views.LoginModal.loginFailure);
        }
        return false;
    });
    $("#ModalLogin").on("hidden.bs.modal", function (e) {
        Sample.Web.ModalLogin.Views.LoginModal.resetLoginForm();
    });
    $("#ModalLogin").on("shown.bs.modal", function (e) {
        $("#Email").focus();
    });
});
var Sample = Sample || {};
Sample.Web = Sample.Web || {};
Sample.Web.ModalLogin = Sample.Web.ModalLogin || {};
Sample.Web.ModalLogin.Views = Sample.Web.ModalLogin.Views || {}
Sample.Web.ModalLogin.Views.Common = {
    getAntiForgeryValue: function () {
        return $('input[name="__RequestVerificationToken"]').val();
    }
}
Sample.Web.ModalLogin.Views.LoginModal = {
    resetLoginForm: function () {
        $("#loginform").get(0).reset();
        $("#alertBox").css("display", "none");
    },
    loginFailure: function (message) {
        var alertBox = $("#alertBox");
        alertBox.html(message);
        alertBox.css("display", "block");
    },
    loginSuccess: function () {
        window.location.href = window.location.href;
    }
}
Sample.Web.ModalLogin.Identity = {
    LoginIntoStd: function (username, password, rememberme, antiForgeryToken, 
                            successCallback, failureCallback) {
        var data = { "__RequestVerificationToken": antiForgeryToken, 
                     "username": username, "password": password, "rememberme": rememberme };
        $.ajax({
            url: "/Account/LoginJson",
            type: "POST",
            data: data
        })
        .done(function (loginSuccessful) {
            if (loginSuccessful) {
                successCallback();
            }
            else {
                failureCallback("Invalid login attempt.");
            }
        })
        .fail(function (jqxhr, textStatus, errorThrown) {
            failureCallback(errorThrown);
        });
    }
}

آموزش بوت استرپ

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید

ایجاد فرم ورود به سایت با Modal فرم ورود به سایت Bootstrap آموزش ایجاد فرم لاگین به سایت با Modal و Bootstrap