Download Project

Step-1

Follow the previous video and articles to complete the POS tutorials

• Please go to Home controller
• Create Login Method inside Home Controller

  public ActionResult Login()

        {

            return View();

        }

Step-2

• Create Login View

• Paste below code to Login view.

<div class="bg-gradient-primary">

    <div class="container">

        <!-- Outer Row -->

        <div class="row justify-content-center">

            <div class="col-xl-10 col-lg-12 col-md-9">

                <div class="card o-hidden border-0 shadow-lg my-5">

                    <div class="card-body p-0">

                        <!-- Nested Row within Card Body -->

                        <div class="row">

                            <div class="col-lg-6 d-none d-lg-block bg-login-image"></div>

                            <div class="col-lg-6">

                                <div class="p-5">

                                    <div class="text-center">

                                        <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>

                                    </div>

                                    <form class="user">

                                        <div class="form-group">

                                            <input type="text" class="form-control form-control-user" id="exampleInputUser" aria-describedby="emailHelp" placeholder="Username">

                                        </div>

                                        <div class="form-group">

                                            <input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password">

                                        </div>

                                        <div class="form-group">

                                            <div class="custom-control custom-checkbox small">

                                                <input type="checkbox" class="custom-control-input" id="customCheck">

                                                <label class="custom-control-label" for="customCheck">Remember Me</label>

                                            </div>

                                        </div>

                                        <a href="#" onclick="checkLogin()" class="btn btn-primary btn-user btn-block">

                                            Login

                                        </a>

                                        <hr>

                                    </form>

                                    <hr>

                                    <div class="text-center">

                                        <a class="small" href="forgot-password.html">Forgot Password?</a>

                                    </div>

                                    <div class="text-center">

                                        <a class="small" href="register.html">Create an Account!</a>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>



</div>

• Add below method to Home controller

        public JsonResult CheckLogin(string username,string password)

        {

            POS_TutorialEntities db = new POS_TutorialEntities();

            var dataItem = db.Users.Where(x => x.Username == username && x.Password == password).SingleOrDefault();

            bool isLogged = true;

            if (dataItem != null)

            {

                FormsAuthentication.SetAuthCookie(dataItem.Username, true);

                var mdl = System.Web.HttpContext.Current.User.Identity.Name;

                isLogged = true;

            }

            else

            {

                isLogged = false;

            }

            return Json(isLogged, JsonRequestBehavior.AllowGet);

        }

• Add this JavaScript code to bottom side of Login View

<script>

    function checkLogin() {

        var data = JSON.stringify({

            username: $("#exampleInputUser").val(),

            password: $("#exampleInputPassword").val()

        });

        return $.ajax({

            contentType: 'application/json; charset=utf-8',

            dataType: 'json',

            type: 'POST',

            url: "/Home/CheckLogin",

            data: data,

            success: function (result) {

                if (result == true) {

                    window.location.href = "/Home/Index";

                }

                else {

                    window.location.href = "/Home/Login";

                }

            },

            error: function () {

                alert("Error!")

            }

        });

    }

</script>

• Now run the project
• Please see next video and articles to complete the login