Creating a Simple User Login Form in MVC ~ NEW TECH

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>

<legend>Login</legend>

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

</div>

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

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

</div>

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

</div>

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

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

</div>

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

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

</div>

</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>

<title>@ViewBag.Title</title>

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

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

</head>

<body>

@if (Request.IsAuthenticated) {

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

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

}

else {

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

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

}

</div>

@RenderBody()

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

@RenderSection("scripts", required: false)

</body>

</html>

Thank you for reading the article about Creating a Simple User Login Form in MVC on the blog NEW TECH If you want to disseminate this article on please list the link as the source, and if this article was helpful please bookmark this page in your web browser by pressing Ctrl + D on your keyboard keys.

Creating a Simple User Login Form in MVC

New articles :