Creating a Simple User Login Form in MVC

Step 1. Creating a project.

Then select that you are using Razor engine. Check create Tests if you are planning to use it later in your project. If not - leave it unchecked.

Right click on App_Data -> Add -> New item ->Data -> SQL Server Database -> OK.
Now we need a users table.
Right click on Tables and open New Query window.

Now paste code below to that query window and click execute (shortcut CTRL+SHIFT+E)

CREATE TABLE [dbo].[System_Users]

(
[Id] INT NOT NULL IDENTITY ,
[Username] NVARCHAR(50) NOT NULL,
[Password] NVARCHAR(50) NOT NULL,
[RegDate] DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
[Email] NVARCHAR(50) NOT NULL,
PRIMARY KEY ([Id])
)
GO
CREATE INDEX [IX_System_Users_Username] ON [dbo].[System_Users] ([Username])
GO
INSERT INTO [dbo].[System_Users]
([Username], [Password], [Email])
VALUES
('admin', '123456', 'admin@test.com')
GO

Step 3. Creating a HomeController 

OK. Now we need a home controller which will be our first page.

Step 4. Creating a Home view.

Right click on method name -> Create view.

Call it Index (The same as method name) and select to use layout.

Step 5. Creating a User model

User model is required to handle user information and for form creation.

Right click on Models -> Add -> New item -> Code -> Class; Name it User.cs.

In User class code should look like this:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient;

using System.ComponentModel.DataAnnotations;

namespace GDDonSimpleLogin.Models

{

    public class User

    {

        [Required]

        [Display(Name = "User name")]

        public string UserName { get; set; }

        [Required]

        [DataType(DataType.Password)]

        [Display(Name = "Password")]

        public string Password { get; set; }

        [Display(Name = "Remember on this computer")]

        public bool RememberMe { get; set; }

        /// <summary>

        /// Checks if user with given password exists in the database

        /// </summary>

        /// <param name="_username">User name</param>

        /// <param name="_password">User password</param>

        /// <returns>True if user exist and password is correct</returns>

        public bool IsValid(string _username, string _password)

        {

            using (var cn = new SqlConnection(@"Data Source=(LocalDB)\v11.0;Initial Catalog=D:\GDDON\WORK\DEMO\GDDONSIMPLELOGIN\GDDONSIMPLELOGIN\APP_DATA\DATABASE1.MDF;Integrated Security=True;Connect Timeout=15;Encrypt=False;TrustServerCertificate=False"))

            {

                string _sql = @"SELECT [Username] FROM [dbo].[System_Users] WHERE [Username] = @u AND [Password] = @p";

                var cmd = new SqlCommand(_sql, cn);

                cmd.Parameters.Add(new SqlParameter("@u", SqlDbType.NVarChar)).Value = _username;

                cmd.Parameters.Add(new SqlParameter("@p", SqlDbType.NVarChar)).Value = _password;

                cn.Open();

                var reader = cmd.ExecuteReader();

                if (reader.HasRows)

                {

                    reader.Dispose();

                    cmd.Dispose();

                    return true;

                }

                else

                {

                    reader.Dispose();

                    cmd.Dispose();

                    return false;

                }

            }

        }

    }

}

Step 6. Creating User Controller  

We need a user controller to manage user who's about to log in or log out. Create controller as you did previous and name it UserController. I preffer naming it User (not Users) becouse it stands for ONE user.

This is code which should appear in it.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Security;

namespace GDDonSimpleLogin.Controllers

{

    public class UserLoginController : Controller

    {

        //

        // GET: /UserLogin/

        public ActionResult Index()

        {

            return View();

        }

        [HttpGet]

        public ActionResult Login()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Login(Models.User user)

        {

            if (ModelState.IsValid)

            {

                if (user.IsValid(user.UserName, user.Password))

                {

                    FormsAuthentication.SetAuthCookie(user.UserName, user.RememberMe);

                    return RedirectToAction("Index", "Home");

                }

                else

                {

                    ModelState.AddModelError("", "Login data is incorrect!");

                }

            }

            return View(user);

        }

        public ActionResult Logout()

        {

            FormsAuthentication.SignOut();

            return RedirectToAction("Index", "Home");

        }

    }

}

Step 7. Creating a login view 

Right click on Login method name and create view.

Use layout template as previously.

Step 8. Making login form

Code should look like this:

@model GDDonSimpleLogin.Models.User

@{

    ViewBag.Title = "Login";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

@using (Html.BeginForm())

{

    @Html.ValidationSummary(true, "Login failed. Check your login details.");

    <div>

        <fieldset>

            <legend>Login</legend>

            <div class="editor-label">

                @Html.LabelFor(u => u.UserName)

            </div>

            <div class="editor-field">

                @Html.TextBoxFor(u => u.UserName)

                @Html.ValidationMessageFor(u => u.UserName)

            </div>

            <div class="editor-label">

                @Html.LabelFor(u => u.Password)

            </div>

            <div class="editor-field">

                @Html.PasswordFor(u => u.Password)

                @Html.ValidationMessageFor(u => u.Password)

            </div>

            <div class="editor-label">

                @Html.CheckBoxFor(u => u.RememberMe)

                @Html.LabelFor(u => u.RememberMe)

            </div>

            <input type="submit" value="Log In" />

        </fieldset>

    </div>

}

Here we create our form, add labels and validators.

Step 9. Editing _Layout.cshtml page (add login button)

This file is in Views -> Shared folder.

We are going to add this code so it will allow us to login, log out and displays our name.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</head>

<body>

    <div style="width: auto; background-color: #728ea7;">

        @if (Request.IsAuthenticated) {

            <strong>@Html.Encode(User.Identity.Name)</strong>

            @Html.ActionLink("Sign Out", "Logout", "User")

        }

        else {

            @Html.ActionLink("Register", "Register", "User")

            <span> | </span>

            @Html.ActionLink("Sign In", "Login", "User")

        }

    </div>

    @RenderBody()

    @Scripts.Render("~/bundles/jquery")

    @RenderSection("scripts", required: false)

</body>

</html>