Forms Validation in ASP.NET Core Razor Pages

This project will demonstrate how to use Forms Validation in ASP.NET Core Razor Pages

  • LearnASPNETCoreRazorPagesWithRealApps
    • Pages
      • Index.cshtml
      • Index.cshtml.cs
      • Success.cshtml
      • Success.cshtml.cs
    • Models
      • Account.cs
    • _ViewImports.cshtml
    • Startup.cs
using System.ComponentModel.DataAnnotations;

namespace LearnASPNETCoreRazorPagesWithRealApps.Entities
{
    public class Account
    {
        [Required]
        [MinLength(3)]
        [MaxLength(10)]
        public string Username { get; set; }

        [Required]
        [RegularExpression("((?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{6,20})")]
        public string Password { get; set; }

        [Range(18, 120)]
        public int Age { get; set; }

        [Required]
        [EmailAddress]
        public string Email { get; set; }

        [Url]
        public string Website { get; set; }
    }
}
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using LearnASPNETCoreRazorPagesWithRealApps.Entities;

namespace LearnASPNETCoreRazorPagesWithRealApps.Pages
{
    public class IndexModel : PageModel
    {
        [BindProperty]
        public Account account { get; set; }

        public void OnGet()
        {
            account = new Account();
        }

        public IActionResult OnPost(Account account)
        {
            if (account.Username != null && account.Username.Equals("abc"))
            {
                ModelState.AddModelError("account.Username", "Username Already Exists");
            }

            if (!ModelState.IsValid)
            {
                return Page();
            }
            else
            {
                return RedirectToPage("Success");
            }
        }
    }
}
@page
@model LearnASPNETCoreRazorPagesWithRealApps.Pages.IndexModel
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <form method="post" asp-page="index">
        <table>
            <tr>
                <td>Username</td>
                <td>
                    <input asp-for="@Model.account.Username" />
                </td>
                <td>
                    <span asp-validation-for="@Model.account.Username" class="error"></span>
                </td>
            </tr>
            <tr>
                <td>Password</td>
                <td>
                    <input type="password" asp-for="@Model.account.Password" />
                </td>
                <td>
                    <span asp-validation-for="@Model.account.Password" class="error"></span>
                </td>
            </tr>
            <tr>
                <td>Age</td>
                <td>
                    <input asp-for="@Model.account.Age" />
                </td>
                <td>
                    <span asp-validation-for="@Model.account.Age" class="error"></span>
                </td>
            </tr>
            <tr>
                <td>Email</td>
                <td>
                    <input asp-for="@Model.account.Email" />
                </td>
                <td>
                    <span asp-validation-for="@Model.account.Email" class="error"></span>
                </td>
            </tr>
            <tr>
                <td>Website</td>
                <td>
                    <input asp-for="@Model.account.Website" />
                </td>
                <td>
                    <span asp-validation-for="@Model.account.Website" class="error"></span>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="submit" value="Save" />
                </td>
            </tr>
        </table>
    </form>

</body>
</html>
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace LearnASPNETCoreRazorPagesWithRealApps.Pages
{
    public class SuccessModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}
@page
@model LearnASPNETCoreRazorPagesWithRealApps.Pages.SuccessModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Success</title>
</head>
<body>

    <h3>Success Page</h3>

</body>
</html>
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;

namespace LearnASPNETCoreRazorPagesWithRealApps
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseMvc();
        }
    }
}

Screenshots