How to create a login page using asp.net mvc 4

INTRODUCTION

In this post, I am explain how to create a login page using asp.net mvc 4.

STEPS :

STEP - 1 : CREATE NEW PROJECT.

Go to File > New > Project > Select asp.net MVC4 web application > Entry Application Name > Click OK > Select Internet Application > Select view engine Razor > OK

STEP-2: ADD A DATABASE.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

STEP-3: CREATE TABLE FOR FETCH DATA.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok. 

In this example, I have used one tables as below

STEP-4: ADD ENTITY DATA MODEL.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish. 

STEP-5: APPLY VALIDATION ON MODEL.

Open your model and add validation. Please follow below code 

namespace MVCLogin
{
 using System;
 using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
 
 public partial class User
 {
  public int UserID { get; set; }
  public string FullName { get; set; }
  [Required(ErrorMessage="Please Provide Username", AllowEmptyStrings=false)]
  public string Username { get; set; }
  [Required(ErrorMessage="Please provide password", AllowEmptyStrings=false)]
  [DataType( System.ComponentModel.DataAnnotations.DataType.Password)]
  public string Password { get; set; }
 }
}

STEP-6: CREATE A CONTROLLER .

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Here I have used existing controller "Home Controller" 

STEP-7: ADD NEW ACTION INTO YOUR CONTROLLER FOR GET METHOD

Here I have added "Login" Action into "Home" Controller. Please write this following code 

public class HomeController : Controller
{
 public ActionResult Login()
 {
  return View();
 }
}

STEP-8: ADD VIEW FOR LOGIN ACTION & DESIGN FOR CREATE LOGIN SCREEN.

Right Click on Action Method (here right click on Login action) > Add View... > Enter View Name > Select View Engine (Razor) > Check "Create a strong-typed view" > Select your model class > Add. 
HTML Code 

@model MVCLogin.User
@{
 ViewBag.Title = "Login";
}
 
<h2>Login</h2>
 
@using (Html.BeginForm("Login","Home", FormMethod.Post))
{
 //this  is for create form tag
 @Html.AntiForgeryToken()          // this is for prevent CSRF attack
 @Html.ValidationSummary(true)
 if (@ViewBag.Message != null)
 {
  <div style="border:1px solid red">
   @ViewBag.Message
  </div>
 }
 <table>
  <tr>
   <td>@Html.LabelFor(a=>a.Username)</td>
   <td>@Html.TextBoxFor(a=>a.Username)</td>
   <td>@Html.ValidationMessageFor(a=>a.Username)</td>
  </tr>
  <tr>
   <td>
    @Html.LabelFor(a=>a.Password)
   </td>
   <td>
    @Html.PasswordFor(a=>a.Password)
   </td>
   <td>
    @Html.ValidationMessageFor(a=>a.Password)
   </td>
  </tr>
  <tr>
   <td></td>
   <td>
    <input type="submit" value="Login" />
   </td>
   <td></td>
  </tr>
 </table>
}
 
@* This below line is for create javascript section *@
 
@section Scripts{
 @Scripts.Render("~/bundles/jqueryval")
}

STEP-9: ADD NEW ACTION INTO YOUR CONTROLLER FOR POST METHOD (FOR LOGIN)

Here I have added "Login" Action with Model Parameter (here "User") into "Home" Controller. Please write this following code 

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Login(User u)
{
 // this action is for handle post (login)
 if (ModelState.IsValid) // this is check validity
 {
  using (MyDatabaseEntities dc = new MyDatabaseEntities())
  {
   var v = dc.Users.Where(a => a.Username.Equals(u.Username) && a.Password.Equals(u.Password)).FirstOrDefault();
   if (v != null)
   {
    Session["LogedUserID"] = v.UserID.ToString();
    Session["LogedUserFullname"] = v.FullName.ToString();
    return RedirectToAction("AfterLogin");
   }
  }
 }
 return View(u);
}

STEP-10: ADD ANOTHER NEW ACTION INTO YOUR CONTROLLER FOR SHOW VIEW AFTER LOGIN.

Here I have added "AfterLogin" Action. 

public ActionResult AfterLogin()
{
 if (Session["LogedUserID"] != null)
 {
  return View();
 }
 else
 {
  return RedirectToAction("Index");
 }
}
        

STEP-11: ADD VIEW FOR ACTION "AFTERLOGIN" FOR SHOW VIEW AFTER LOGIN.

Right Click on Action Method (here right click on AfterLogin action) > Add View... > Enter View Name > Select View Engine (Razor) > Add. 

@{
 ViewBag.Title = "AfterLogin";
}
 
<h2>After Login</h2>
@if (Session["LogedUserFullname"] != null)
{
 <text>
  Welcome @Session["LogedUserFullname"].ToString() 
 </text>
}

STEP-12: RUN APPLICATION.