Login and Registration page in ASP.NET Core

shubham kumar 12/4/2021 7:40:43 PM ASP.NET Core MVC Create Login and Registration page in ASP.NET Core ASP.NET Core MVC 5.0 0

Share us on:

Download Compleate Solution from here.

Hi, I am Shubham Kumar, I will explain and implement how to create a Login and Registration page in ASP.NET Core MVC .

I will create a Login and registration page step by step for a project.

Nowadays user login and signup pages are very important for any project, it's used to we can keep user data further(future) work like sending mail regarding some change, Query-related problems, etc.

Here, I will create a Registration and login page, If the user is already registered then can Login and open the application for further work, otherwise must register first then can log in and access the application.

Here, the Process for creating a login and registration page in .NET 5 Core MVC web application.

1. open visual studio 2019 or 2017

2. Create a new project

3. select option ASP.NET Core Web App(Model-View-Controller) and then click next

4. Configure settings for a project

5. Add Aditional Info for a project

6. Project folder Structure

7. Add Some important packages from the NuGet package manager

8. create database and table for project

9. Add Controller for login and Sign Up Page and write code

10. Create Model for Login and Sign Up page

11. Create View for Login and Sign Up page

12. Final Output for Login and Sign Up Application

Now, I am going to implement the logic for the login and registration page step by step.

Step 1: Open VS 2019

Open-VisualStudio

Step 2: Create a new project

There are multiple options, If you want to create a new application then click on Create a New Project.

Create-a-New-project

Step 3: select option ASP.NET Core Web App(Model-View-Controller) and then click next

There are multiple given options, If you want to create an application in ASP.NET Core then click on ASP.NET Core Web App(Model-View-Controller).

ASP-NET-Core-MVC

Step 4: Configure settings for a project

Configure-Settings

Step 5: Add Aditional Info for a project

There are multiple framework options given but I select .NET 5.0(latest) framework for the project.

Add-Additional-info

Step 6: Project folder Structure

You can see the folder structure of the application in ASP.NET Core 5.0, there is wwwroot, we can put the only static files in this folder like CSS, HTML, js, image. etc.

There is an AppSettings.json file, where you can put a connection string for the project.

Project-folder-structure

Step 7: Add Some important packages from the NuGet package manager

If you want to create an application in ASP.NET Core then you need to add some important packages from the NuGet Package manager.

NuGet-Package

You need to add connection string in appsettings.json for database connecton.

appsettings.json


{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "ConnectionDb": "Server=DESKTOP-JAQ7AQ2\\SQLEXPRESS;Database=DemoDb;User Id=sa;Password=master1;Trusted_Connection=True;MultipleActiveResultSets=true"
  }
}

You need to create IdentityModel.cs(DbContext) file for geting data using EntityFramework.

IdentityModel.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using LoginAndRegistrationApp.Models;
using Microsoft.EntityFrameworkCore;

namespace LoginAndRegistrationApps.Models
{
    public class IdentityModel: DbContext
    {
        public IdentityModel(DbContextOptions options): base(options)
        {
        }
        public DbSet login { get; set; }
    }
}

Step 8: Create database and table for the project

I have created Database(DemoDb), there is Table(tblLogin)

LoginTbl


 CREATE TABLE [dbo].[tblLogin](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[Email] [nvarchar](50) NULL,
	[Password] [nvarchar](50) NULL,
	[userName] [nvarchar](50) NULL
) ON [PRIMARY]

Step 9: Add Controller for login and Sign Up Page and write code

I have created Controller HomeController, There are some ActionResult for Login and Signup Page.

I have used three ActionResult Index, Login, Registration for Login, and registration page.

We are getting data from the Database using EntityFramework and returning it to view.


using LoginAndRegistrationApp.Models;
using LoginAndRegistrationApps.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;

namespace LoginAndRegistrationApps.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger _logger;
        private readonly IdentityModel db;
        public HomeController(ILogger logger, IdentityModel context)
        {
            _logger = logger;
            db = context;
        }
        public IActionResult Index()
        {
            return View();
        }
        public IActionResult Login()
        {
            return View();
        }
        [HttpPost]
        public IActionResult Login(Login obj)
        {
            try
            {
                if (db.login.Any(a => a.Email == obj.Email && a.Password == obj.Password))
                {
                    TempData["user"] = obj.Email;
                    return RedirectToAction("Index");
                }

                else {
                    ViewBag.error = "!!Please Enter valid login credentials.";
                }
                db.SaveChanges();
            }
            catch (Exception ex)
            {
                ViewBag.error = "!!There is some error.";
            }
            return View();
        }

        public IActionResult Registration()
        {
            return View();
        }
        [HttpPost]
        public IActionResult Registration(Login obj)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    db.login.Add(obj);
                    db.SaveChanges();
                    ViewBag.success = "Sign Up successfully.";
                    return View();
                }
                else
                {
                    ViewBag.error = "!!There is some error.";
                }
                db.SaveChanges();
            }
            catch (Exception ex)
            {
                ViewBag.error = "!!There is some error.";
            }
            return View();
        }      
    }
}

Step 10: Create Model for Login and Sign Up page

You can see, I have added Model(Login), there are four fields Id, Email, Password, userName


using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Threading.Tasks;

namespace LoginAndRegistrationApp.Models
{
    [Table("tblLogin")]
    public class Login
    {
        public int Id { get; set; }
        [Required]
        public string Email { get; set; }
        [Required]
        public string Password { get; set; }
        [Required]
        [DisplayName("User Name")]
        public string userName { get; set; }
    }
}

Step 11: Create View for Login and Sign Up page

You can see in view folder there are Three View Login.cshtml, Registration.cshtml, Index.cshtml.

Login.cshtml contains HTML, CSS for Login, User must be Enter Email and password then can access the application, If user will not have Login credential then can not access the application.

Login.cshtml


@model LoginAndRegistrationApp.Models.Login
@{
    ViewData["Title"] = "Login Page";
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container login-container">
    <div class="row">
        
        <div class="col-md-6 login-form">
            <span style="color:red">@ViewBag.error</span>
            <h4>User Login Form</h4>
            <form asp-action="Login">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-group">
                    <input type="text" asp-for="Email" class="form-control" placeholder="Your Email *" value="" />
                    <span asp-validation-for="Email" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <input type="password" asp-for="Password" class="form-control" placeholder="Your Password *" value="" />
                    <span asp-validation-for="Password" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <input type="submit" class="btnSubmit" value="Login" />
                </div>
                <div class="form-group">
                    <a href="#" class="ForgetPsd">Forget Password?</a>
                </div>
            </form>
        </div>
    </div>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}


<style>

    .login-container {
        margin-top: 4%;
        margin-bottom: 4%;
    }

    .login-form {
        padding: 4%;
        border-radius: 8px;
        box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
    }

        .login-form h3 {
            text-align: center;
            color: #333;
        }

    .login-container form {
        padding: 9%;
    }

    .btnSubmit {
        width: 51%;
        border-radius: 1rem;
        padding: 1.5%;
        cursor: pointer;
        border: none;
    }

    .login-form .btnSubmit {
        font-weight: 600;
        color: #fff;
        background-color: #0062cc;
    }

    .login-form .ForgetPsd {
        color: #0062cc;
        font-weight: 600;
        text-decoration: none;
    }
</style>

Registration.cshtml


@model LoginAndRegistrationApp.Models.Login
@{
    ViewData["Title"] = "Registration";
}

<div class="bodycontainer">

    <form id="signup" asp-action="Registration">

        <div class="header">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <h3>Sign Up</h3>

            <p style="color:red">@ViewBag.success</p>
            <p style="color:red">@ViewBag.error</p>
        </div>

        <div class="sep"></div>
        <div class="inputs">
            <input type="text" asp-for="Email" placeholder="mail" autofocus />
            <span asp-validation-for="Email" class="text-danger"></span>
            <input type="password" asp-for="Password" placeholder="Password" />
            <span asp-validation-for="Password" class="text-danger"></span>
            <input type="text" asp-for="userName" placeholder="UserName" autofocus />
            <span asp-validation-for="userName" class="text-danger"></span>
            <div class="checkboxy">
                <input name="cecky" id="checky" value="1" type="checkbox" /><label class="terms">I accept the terms of use</label>
            </div>
            <input type="submit" id="submit" value="SIGN UP FOR Application" />

        </div>

    </form>

</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

<style>
    body {
        font-family: "Helvetica Neue", Helvetica, Arial;
        padding-top: 20px;
    }

    .bodycontainer {
        width: 406px;
        max-width: 406px;
    }

    #signup {
        padding: 0px 25px 25px;
        background: #fff;
        box-shadow: 0px 0px 0px 5px rgba( 255,255,255,0.4 ), 0px 4px 20px rgba( 0,0,0,0.33 );
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        display: table;
        position: static;
    }

        #signup .header {
            margin-bottom: 20px;
        }

            #signup .header h3 {
                color: #333333;
                font-size: 24px;
                font-weight: bold;
                margin-bottom: 5px;
                margin-top: 25px;
            }

            #signup .header p {
                color: #8f8f8f;
                font-size: 14px;
                font-weight: 300;
            }

        #signup .sep {
            height: 1px;
            background: #e8e8e8;
            width: 406px;
            margin: 0px -25px;
        }

        #signup .inputs {
            margin-top: 25px;
        }

            #signup .inputs label {
                color: #8f8f8f;
                font-size: 12px;
                font-weight: 300;
                letter-spacing: 1px;
                margin-bottom: 7px;
                display: block;
            }

    input::-webkit-input-placeholder {
        color: #b5b5b5;
    }

    input:-moz-placeholder {
        color: #b5b5b5;
    }

    #signup .inputs input[type=text], input[type=password] {
        background: #f5f5f5;
        font-size: 0.8rem;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        border: none;
        padding: 13px 10px;
        width: 330px;
        margin-bottom: 20px;
        box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
        clear: both;
    }

        #signup .inputs input[type=email]:focus, input[type=password]:focus {
            background: #fff;
            box-shadow: 0px 0px 0px 3px #fff38e, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 );
            outline: none;
        }

    #signup .inputs .checkboxy {
        display: block;
        position: static;
        height: 25px;
        margin-top: 10px;
        clear: both;
    }

    #signup .inputs input[type=checkbox] {
        float: left;
        margin-right: 10px;
        margin-top: 3px;
    }

    #signup .inputs label.terms {
        float: left;
        font-size: 14px;
        font-style: italic;
    }

    #signup .inputs #submit {
        width: 100%;
        margin-top: 20px;
        padding: 15px 0;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
        text-align: center;
        text-decoration: none;
        background: -moz-linear-gradient( top, #b9c5dd 0%, #a4b0cb);
        background: -webkit-gradient( linear, left top, left bottom, from(#b9c5dd), to(#a4b0cb));
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #737b8d;
        -moz-box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
        -webkit-box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
        box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
        text-shadow: 0px 1px 3px rgba(000,000,000,0.3), 0px 0px 0px rgba(255,255,255,0);
        display: table;
        position: static;
        clear: both;
    }

        #signup .inputs #submit:hover {
            background: -moz-linear-gradient( top, #a4b0cb 0%, #b9c5dd);
            background: -webkit-gradient( linear, left top, left bottom, from(#a4b0cb), to(#b9c5dd));
        }
</style>

Step 12: Output Screen for Login and Sign Up Application