Create a custom login page in MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Create a custom login page in MVC

Introduction: In this article today I am going to explain how to create a custom login page in MVC
Create a custom login page in MVC

Description:

To create a login page follow the below given steps:


Step 1: Models Class
I have a UserRegistration.cs class file in Models. Validations are applied to class. See the below given code of class:
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
public class User_Registration
    {
        [Key]
        public int Id { get; set; }
       [Required(ErrorMessage="Please Enter UserName")]
        public string User_Name { get; set; }
          [Required(ErrorMessage = "Please Enter First Name")]
        public string First_Name { get; set; }
      [Required(ErrorMessage = "Please Enter Last Name")]
        public string Last_Name { get; set; }
       [DataType(DataType.Upload)]
        public string Profile_Image { get; set; }
    [Required(ErrorMessage = "Please Enter Password")]
        public string Password { get; set; }
        [RegularExpression(@"^([0-9a-zA-Z]([\+\-_\.][0-9a-zA-Z]+)*)+@(([0-9a-zA-Z][-\w]*[0-9a-zA-Z]*\.)+[a-zA-Z0-9]{2,3})$",ErrorMessage = "Please Enter Email ID")]
        public string EmailId { get; set; }
       [Required(ErrorMessage = "Please Enter Gender")]
        public string Sex { get; set; }
        [Required(ErrorMessage = "Please Select Qualification")]
        [ForeignKey("Master_Qualification")]
        public int EducationId { get; set; }
       [Required(ErrorMessage = "Please Select Country")]
        [ForeignKey("Master_Country")]
        public int CountryId { get; set; }
       [Required(ErrorMessage = "Please Enter Phone No")]
        public int Phone_No { get; set; }
     [Required(ErrorMessage = "Please Select the terma & Conditions")]
        public bool Terms { get; set; }

        public virtual Master_Country Master_Country { get; set; }
        public virtual Master_Qualification Master_Qualification { get; set; }
    }

Step 2: Add a Controller
Add a controller to Controllers folder. I add an empty LoginController.cs and add new actions for Login, Welcome and Logout to Controller. Write the code as shown below:
using UserRegistration.Models;
public class LoginController : Controller
    {
        //
        // GET: /Login/
        private ProjectContext db = new ProjectContext();
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult UserLogin()
        {
            return View();
        }
        [HttpPost]
        public ActionResult UserLogin(User_Registration user)
        {
            if (ModelState.IsValidField("Username") && ModelState.IsValidField("Password"))
            {
                var login = db.User_Registrations.Where(u => u.User_Name.Equals(user.User_Name) && u.Password.Equals(user.Password)).FirstOrDefault();
                if (login != null)
                {
                    Session["UserID"] = login.Id.ToString();
                    Session["UserName"] = login.User_Name.ToString();
                    return RedirectToAction("WelcomeUser");
                }
                else
                {
                    ModelState.AddModelError("", "Username and Password does not match");
                }
            }
            return View(user);
        }
        public ActionResult WelcomeUser()
        {
            if (Session["UserID"] != null)
            {
                return View();
            }
            else
            {
                return RedirectToAction("UserLogin");
            }
        }
        public ActionResult LogOut()
        {
            Session.Abandon();
            return RedirectToAction("UserLogin", "UserRegistration");
        }
    }

Step 3: Add view
Add view for Login and Welcome actions.

UserLogin.cshtml
@model UserRegistration.Models.User_Registration

@{
    ViewBag.Title = "Login Page";
}
<style>
    .login-btn
    {
       background-color:#808080;
       width:100px;
       height:36px;
       color:#fff;
       border-radius:5px;
       font-weight:bold;
       font-size:15px;
    }
</style>
<fieldset>
    <legend>Login</legend>


@using (Html.BeginForm("Userlogin", "Login", FormMethod.Post))
{
   @Html.ValidationSummary(true)
<table>
  <tr>
   <td><b>UserName :-</b></td>
   <td>@Html.TextBoxFor(a=>a.User_Name)</td>
   <td>@Html.ValidationMessageFor(a=>a.User_Name)</td>
  </tr>
  <tr>
   <td>
   <b>Password :-</b>
   </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" class="login-btn" />
   </td>
   <td></td>
  </tr>
 </table>
    }
    </fieldset>

WelcomeUser.cshtml
@model UserRegistration.Models.User_Registration

@{
    ViewBag.Title = "Welcome Page ";
}

<table style="width:100%">   
<tr><td style="width:80%"></td><td style="width:20%">
@if (Session["UserName"] != null)
{
 <text>
  Welcome <b>@Session["UserName"].ToString() </b>
 </text>
}
@Html.ActionLink("Logout", "LogOut", "UserRegistration")</td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>

</table>
Now build the project and run. Check the result.

Download


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon