ASP.NET Core Razor Pages – Simple Login Using Entity Framework Database First Approach

Introduction

Here, We’ll understand the simple example of implementing login functionality using Razor Pages and Entity Framework in ASP.NET Core with the Database First approach. In this example, we’ll create a Razor Pages application that allows users to log in using their username and password.

Step 1: Create a Database

Assuming you have an existing database with a table named Users that store’s user information, including Username and Password fields.

Step 2: Create a Razor Pages Application

Create a new Razor Pages application using the ASP.NET Core CLI:

dotnet new webapp -n RazorPagesLogin

Step 3: Scaffold Razor Page for Login

Generate a Razor Page for login using the following command:

dotnet aspnet-codegenerator razorpage Login --model ApplicationUser --dataContext YourDbContext

Replace ApplicationUser with the appropriate model class for your user and YourDbContext with your database context.

Step 4: Implement Login Logic

In the generated Login.cshtml.cs file, add the login logic:

using System.ComponentModel.DataAnnotations;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;

namespace RazorPagesLogin.Pages
{
    public class LoginModel : PageModel
    {
        private readonly YourDbContext _dbContext;
        private readonly ILogger<LoginModel> _logger;

        public LoginModel(YourDbContext dbContext, ILogger<LoginModel> logger)
        {
            _dbContext = dbContext;
            _logger = logger;
        }

        [BindProperty]
        public InputModel Input { get; set; }

        public class InputModel
        {
            [Required]
            public string Username { get; set; }

            [Required]
            [DataType(DataType.Password)]
            public string Password { get; set; }
        }

        public IActionResult OnPost()
        {
            if (ModelState.IsValid)
            {
                var user = _dbContext.Users.FirstOrDefault(u => u.Username == Input.Username && u.Password == Input.Password);
                if (user != null)
                {
                    // Successful login logic
                    return RedirectToPage("/Index");
                }
                else
                {
                    ModelState.AddModelError("", "Invalid login attempt.");
                }
            }

            return Page();
        }
    }
}

Step 5: Create Login Razor Page

In the generated Login.cshtml file, customize the login form:

@page
@model LoginModel
@{
    ViewData["Title"] = "Login";
}

<h1>Login</h1>

<div class="row">
    <div class="col-md-4">
        <form method="post">
            <h4>Use a local account to log in.</h4>
            <hr />
            <div asp-validation-summary="All" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Input.Username"></label>
                <input asp-for="Input.Username" class="form-control" />
            </div>
            <div class="form-group">
                <label asp-for="Input.Password"></label>
                <input asp-for="Input.Password" class="form-control" />
            </div>
            <button type="submit" class="btn btn-primary">Log in</button>
        </form>
    </div>
</div>

Step 6: Test the Login Page

Run your application and navigate to the login page (/Login). You should be able to enter your username and password and log in successfully if the credentials match.

Remember that this is a basic example, and you should enhance it with proper security measures, such as password hashing, role-based authentication, and more, to ensure a secure and reliable login system.