Add files to have a simple EditForm and reproduce POST issue (asks for FormName attribute)

Components/Layout/NavMenu.razor

@@ -13,6 +13,12 @@
                 <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
             </NavLink>
         </div>
+        
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="register">
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Register
+            </NavLink>
+        </div>
 
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="counter">

Components/Pages/Account/Register.razor

@@ -0,0 +1,62 @@
+@page "/register"
+@using Sandbox.Models.ViewModels
+@using Sandbox.Services.AuthService
+
+@* @inject AuthenticationStateProvider AuthenticationStateProvider *@
+@* @inject NavigationManager NavigationManager *@
+@inject IAuthService AuthService
+
+<title>Register</title>
+
+<EditForm Model="user" OnValidSubmit="HandleRegistration">
+    <DataAnnotationsValidator/>
+    <div class="d-flex justify-content-center align-items-center">
+        <div class="col-md-4 p-5 shadow-sm border rounded-3">
+            <h2 class="text-center mb-4 text-primary">Register Form</h2>
+            <div class="mb-3">
+                <label for="email" class="form-label">Email address</label>
+                <InputText type="email" @bind-Value="user.Email" class="form-control border border-primary" id="email" aria-describedby="email"/>
+                <ValidationMessage For="@(() => user.Email)"/>
+            </div>
+            <div class="mb-3">
+                <label for="password" class="form-label">Password</label>
+                <InputText type="password" @bind-Value="user.Password" class="form-control border border-primary" id="password" aria-describedby="password"/>
+                <ValidationMessage For="@(() => user.Password)"/>
+            </div>
+            <div class="mb-3">
+                <label for="confirmPassword" class="form-label">Confirm password</label>
+                <InputText type="password" @bind-Value="user.ConfirmPassword" class="form-control border border-primary" id="confirmPassword" aria-describedby="confirmPassword"/>
+                <ValidationMessage For="@(() => user.ConfirmPassword)"/>
+            </div>
+            <div class="d-grid">
+                <button class="btn btn-primary" type="submit">Register</button>
+            </div>
+            <div class="mt-3">
+                <p class="mb-0 text-center">You have an account? <a href="login" class="text-primary fw-bold">Sign In</a></p>
+            </div>
+        </div>
+    </div>
+</EditForm>
+
+<div class="text-danger">
+    <span>@errorMessage</span>
+</div>
+
+<div class="@messageCssClass">
+    <span>@message</span>
+</div>
+
+@code {
+    UserRegister user = new();
+
+    private string message = string.Empty;
+    private string messageCssClass = string.Empty;
+    private string errorMessage = string.Empty;
+
+    async void HandleRegistration()
+    {
+        var result = await AuthService.Register(user.Email, user.Password);
+        message = result.Message;
+        messageCssClass = result.Success ? "text-success" : "text-danger";
+    }
+}

Components/_Imports.razor

@@ -6,6 +6,6 @@
 @using static Microsoft.AspNetCore.Components.Web.RenderMode
 @using Microsoft.AspNetCore.Components.Web.Virtualization
 @using Microsoft.JSInterop
-@using blazor_server_mini_sandbox
+@using Sandbox
-@using blazor_server_mini_sandbox.Components
+@using Sandbox.Components
-@using blazor_server_mini_sandbox.Components.Layout
+@using Sandbox.Components.Layout

Models/ViewModels/ServiceResponse.cs

@@ -0,0 +1,8 @@
+namespace Sandbox.Models.ViewModels;
+
+public class ServiceResponse<T>
+{
+    public T? Data { get; set; }
+    public bool Success { get; set; } = true;
+    public string Message { get; set; } = string.Empty;
+}

Models/ViewModels/UserRegister.cs

@@ -0,0 +1,12 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Sandbox.Models.ViewModels;
+
+public class UserRegister
+{
+    public string Email { get; set; } = string.Empty;
+    [Required, StringLength(100, MinimumLength = 5)]
+    public string Password { get; set; } = string.Empty;
+    [Compare("Password", ErrorMessage = "The password do not match.")]
+    public string ConfirmPassword { get; set; } = string.Empty;
+}

Program.cs

@@ -1,4 +1,5 @@
-using blazor_server_mini_sandbox.Components;
+using Sandbox.Components;
+using Sandbox.Services.AuthService;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -6,6 +7,8 @@ var builder = WebApplication.CreateBuilder(args);
 builder.Services.AddRazorComponents()
     .AddInteractiveServerComponents();
 
+builder.Services.AddScoped<IAuthService, AuthService>();
+
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.

Services/AuthService/AuthService.cs

@@ -0,0 +1,16 @@
+using Sandbox.Models.ViewModels;
+
+namespace Sandbox.Services.AuthService;
+
+public class AuthService : IAuthService
+{
+    public async Task<ServiceResponse<int>> Register(string userName, string password)
+    {
+        return new ServiceResponse<int>
+        {
+            Data = 1,
+            Message = $"Got register request with user name {userName}",
+            Success = true
+        };
+    }
+}

Services/AuthService/IAuthService.cs

@@ -0,0 +1,8 @@
+using Sandbox.Models.ViewModels;
+
+namespace Sandbox.Services.AuthService;
+
+public interface IAuthService
+{
+    Task<ServiceResponse<int>> Register(string userName, string password);
+}

blazor-server-mini-sandbox.csproj

@@ -4,7 +4,7 @@
     <TargetFramework>net10.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <RootNamespace>blazor_server_mini_sandbox</RootNamespace>
+    <RootNamespace>Sandbox</RootNamespace>
     <AssemblyName>$(AssemblyName.Replace(' ', '_'))</AssemblyName>
     <BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
   </PropertyGroup>