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