How to Make Custom Login, Register, and Logout in MVC 4 Using Razor and EF

using System.Web.Security;  
using LoginInMVC4WithEF.Models;  
  
Now add the following functions and methods.  
   
//  
// GET: /User/  
public ActionResult Index()  
{  
    return View();  
}  
         
[HttpGet]         
public ActionResult LogIn()  
{  
    return View();  
}  
         
[HttpPost]         
public ActionResult LogIn(Models.Registration userr)  
{  
//if (ModelState.IsValid)  
//{  
    if (IsValid(userr.Email, userr.Password))  
    {  
        FormsAuthentication.SetAuthCookie(userr.Email, false);  
        return RedirectToAction("Index", "Home");  
    }  
    else  
    {  
        ModelState.AddModelError("", "Login details are wrong.");  
    }  
    return View(userr);  
}  
         
[HttpGet]         
public ActionResult Register()  
{  
    return View();  
}  
   
[HttpPost]        
public ActionResult Register(Models.Registration user)  
{  
    try  
    {  
        if (ModelState.IsValid)  
        {  
            using (var db = new LoginInMVC4WithEF.Models.UserEntities2())  
            {  
                var crypto = new SimpleCrypto.PBKDF2();  
                var encrypPass = crypto.Compute(user.Password);  
                var newUser = db.Registrations.Create();  
                newUser.Email = user.Email;  
                newUser.Password = encrypPass;  
                newUser.PasswordSalt = crypto.Salt;  
                newUser.FirstName = user.FirstName;  
                newUser.LastName = user.LastName;  
                newUser.UserType = "User";  
                newUser.CreatedDate = DateTime.Now;  
                newUser.IsActive = true;  
                newUser.IPAddress = "642 White Hague Avenue";  
                db.Registrations.Add(newUser);  
                db.SaveChanges();  
                return RedirectToAction("Index", "Home");  
            }  
        }  
        else  
        {  
            ModelState.AddModelError("", "Data is not correct");  
        }  
    }  
    catch (DbEntityValidationException e)  
    {  
        foreach (var eve in e.EntityValidationErrors)  
        {  
            Console.WriteLine("Entity of type \"{0}\" in state \"{1}\" has the following validation errors:",  
                eve.Entry.Entity.GetType().Name, eve.Entry.State);  
            foreach (var ve in eve.ValidationErrors)  
            {  
                Console.WriteLine("- Property: \"{0}\", Error: \"{1}\"",  
                    ve.PropertyName, ve.ErrorMessage);  
            }  
        }  
        throw;  
    }  
    return View();  
}  
         
public ActionResult LogOut()  
{  
    FormsAuthentication.SignOut();  
    return RedirectToAction("Index", "Home");  
}  
   
private bool IsValid(string email, string password)  
{  
    var crypto = new SimpleCrypto.PBKDF2();  
    bool IsValid = false;  
   
    using (var db = new LoginInMVC4WithEF.Models.UserEntities2())  
    {  
        var user = db.Registrations.FirstOrDefault(u => u.Email == email);  
        if (user != null)  
        {  
            if (user.Password == crypto.Compute(password, user.PasswordSalt))  
            {  
                IsValid = true;  
            }  
        }  
    }  
    return IsValid;  
}

There I have functions and methods for index page and login, logout, register and isvalid, now let's make some change in "_Layout.vshtml". Add the following div:

<div style="width:auto; background-color:aqua">  
    @if (Request.IsAuthenticated)  
    {  
        <strong>@Html.Encode(User.Identity.Name)</strong>  
        @Html.ActionLink("Log Out", "Logout", "User")  
    }  
    else  
    {  
        @Html.ActionLink("Register", "Register", "User")  
        <span> | </span>  
        @Html.ActionLink("Log In", "Login", "User")  
    }  
</div>

Now let's add views for presentation.

The best way to add a view is to right-click on the controller's method name and then right-click and "Add View" and select the view engine type and select strongly-typed view and use the layout master page and click "Add".

Image 4.

LogIn.cshtml

@model LoginInMVC4WithEF.Models.Registration  
   
@{  
    ViewBag.Title = "LogIn";  
    Layout = "~/Views/Shared/_Layout.cshtml";  
}  
   
<h2>LogIn</h2>  
@using (Html.BeginForm())  
{  
    @Html.ValidationSummary(true, "Login Failed, check details");  
    <div>  
        <fieldset>  
            <legend>Login Form</legend>  
            <div class="editor-label">@Html.LabelFor(u=> u.Email)</div>  
            <div class="editor-field">@Html.TextBoxFor(u=> u.Email)  
                @Html.ValidationMessageFor(u=> u.Email)  
            </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>  
            <input type="submit" value="Log In" />  
        </fieldset>  
    </div>  
}

Register.cshtml

@model LoginInMVC4WithEF.Models.Registration  
@{  
    ViewBag.Title = "Register";  
    Layout = "~/Views/Shared/_Layout.cshtml";  
}  
   
<h2>Register</h2>  
@using (Html.BeginForm())  
{  
    @Html.ValidationSummary(true, "Registeration Failed, fields.");  
    <div>  
        <fieldset>  
            <legend>Register Form</legend>  
            <div class="editor-label">@Html.LabelFor(u => u.Email)</div>  
            <div class="editor-field">@Html.TextBoxFor(u => u.Email)  
                @Html.ValidationMessageFor(u => u.Email)  
            </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.LabelFor(u => u.FirstName)</div>  
            <div class="editor-field">@Html.TextBoxFor(u => u.FirstName)  
                @Html.ValidationMessageFor(u => u.FirstName)  
            </div>  
             <div class="editor-label">@Html.LabelFor(u => u.LastName)</div>  
            <div class="editor-field">@Html.TextBoxFor(u => u.LastName)  
                @Html.ValidationMessageFor(u => u.LastName)  
            </div>  
   
            <input type="submit" value="Register" />  
        </fieldset>  
    </div>  
}

LogOut.cshtml

@{  
    ViewBag.Title = "LogOut";  
    Layout = "~/Views/Shared/_Layout.cshtml";  
}  
   
<h2>LogOut</h2>  
   
public ActionResult LogOut()  
{  
    FormsAuthentication.SignOut();  
    return RedirectToAction("Index", "Home");  
}

Now hit F5 to run the application and click on the "Register" button and don't put anything in the TextBoxes and click the "Register" button.

Image 5.

As you can see in the model class, all fields are required so these messages are displayed.

Image 6.

Now if I put a password value less than 6 characters or more than 150 characters then this message will display:

Image 7.

Now insert all values properly, then you will see it will register and data should inserted into the database, now you can login.

Image 8.

Image 9.

Conclusion

In this article, we have learned the basic concepts of login using Entity Framework with Razor.