ASP.NET MVC: Create Login Form
By FoxLearn 5/30/2017 5:54:36 AM 15.34K
How to Create a Login page with ASP.NET Identity MVC 5 using C# Entity Framework Code First
Step 1: Open Login view, then change code as below
@using MvcDemo.Models @model LoginViewModel @{ ViewBag.Title = "Log in"; Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AdminLTE 2 | Log in</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <!-- Bootstrap 3.3.6 --> <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> <!-- Ionicons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"> <!-- Theme style --> <link rel="stylesheet" href="/dist/css/AdminLTE.min.css"> <!-- iCheck --> <link rel="stylesheet" href="/plugins/iCheck/square/blue.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body class="hold-transition login-page"> <div class="login-box"> <div class="login-logo"> <a href="../../index2.html"><b>Fox</b>Learn</a> </div> <!-- /.login-logo --> <div class="login-box-body"> <p class="login-box-msg">Sign in to start your session</p> <section id="loginForm"> @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" })) { @Html.AntiForgeryToken() @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group has-feedback"> @Html.TextBoxFor(m => m.UserName, new { @class = "form-control", @placeholder = "User name" }) @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" }) <span class="glyphicon glyphicon-user form-control-feedback"></span> </div> <div class="form-group has-feedback"> @Html.PasswordFor(m => m.Password, new { @class = "form-control", @placeholder = "Password" }) @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" }) <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-8"> <div class="checkbox icheck"> <label> @Html.CheckBoxFor(m => m.RememberMe) @Html.LabelFor(m => m.RememberMe) </label> </div> </div> <!-- /.col --> <div class="col-xs-4"> <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button> </div> <!-- /.col --> </div> <p> @Html.ActionLink("Register as a new user", "Register") </p> //Enable this once you have account confirmation enabled for password reset functionality <p> @Html.ActionLink("Forgot your password?", "ForgotPassword") </p> } </section> <section id="socialLoginForm"> @Html.Partial("_ExternalLoginsListPartial", new ExternalLoginListViewModel { ReturnUrl = ViewBag.ReturnUrl }) </section> </div> <!-- /.login-box-body --> </div> <!-- /.login-box --> <!-- jQuery 2.2.3 --> <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script> <!-- Bootstrap 3.3.6 --> <script src="/bootstrap/js/bootstrap.min.js"></script> <!-- iCheck --> <script src="/plugins/iCheck/icheck.min.js"></script> <script> $(function () { $('input').iCheck({ checkboxClass: 'icheckbox_square-blue', radioClass: 'iradio_square-blue', increaseArea: '20%' // optional }); }); </script> </body> </html>
VIDEO TUTORIALS
- ASP.NET MVC Responsive Templates Free Download
- How to upload file in ASP.NET MVC
- How to Create Contact Form Flat Responsive in ASP.NET MVC
- How to check if HttpPostedFileBase is an image
- How to upload Multiple File in ASP.NET MVC
- ASP.NET MVC: Implement Password Reset with ASP NET Identity
- ASP.NET MVC: Getting Started
- ASP.NET MVC: Create Custom Routes
Categories
Popular Posts
Material Lite Admin Template
11/14/2024
Freedash bootstrap lite
11/13/2024
RuangAdmin Template
11/17/2024
Responsive Animated Login Form
11/11/2024