This is the Contact component of my Blazor WebApp project in Dotnet 8.
The MailSender is a service outside the component. The problem is that when I click the Send button, it does not hit the 'CallForm' method, instead it gives me a blank page with this message: 'A valid antiforgery token was not provided with the request. Add an antiforgery token, or disable antiforgery validation for this endpoint.'
When I check the Network activity on the Browser, it made a POST call to localhost and got a BadRequest, but in the payload of the call you can see that the antiforgery token is sent twice:
Payload:
_handler=testForm&__RequestVerificationToken=CfDJ8PrBKUcP_2BApN476NPsIEP8rTXN_zrI4-5nDXMWjirv5ixEAyUkXxxnaXkIwaBbTxESiX9LLr_KiAweW-QhJ4E2DGNYJLBJaLQ__SOz9NIRMR_tl7zCnamZONe7bOcy3e__EaqW4rTDkL-C3VbsFEQ&__RequestVerificationToken=CfDJ8PrBKUcP_2BApN476NPsIEP8rTXN_zrI4-5nDXMWjirv5ixEAyUkXxxnaXkIwaBbTxESiX9LLr_KiAweW-QhJ4E2DGNYJLBJaLQ__SOz9NIRMR_tl7zCnamZONe7bOcy3e__EaqW4rTDkL-C3VbsFEQ
Any idea of what I am doing wrong?
@using System.ComponentModel.DataAnnotations@using System.Net.Mail;@using System.Net;@using Microsoft.AspNetCore.Antiforgery@using Microsoft.AspNetCore.Mvc@using OneManArmyBlazorWeb.Models@using OneManArmyBlazorWeb.Services@using OneManArmyBlazorWeb.Settings@namespace OneManArmyBlazorWeb.Components.Sections@inject ILogger<Contact> _logger @inject IMailSender _mailSender<!-- Contact Section --><section id="contact" class="contact section"><!-- Section Title --><div class="container section-title" data-aos="fade-up"><h2>Get in Touch</h2><p> Whether you have a question, a project idea, or just want to connect, I’d love to hear from you!</p></div><!-- End Section Title --><div class="container" data-aos="fade-up" data-aos-delay="100"><EditForm method="post" Model="Model" OnInvalidSubmit="CallForm" FormName="testForm" Enhance action="" class="php-email-form" data-aos="fade-up" data-aos-delay="200"> @* <DataAnnotationsValidator /> *@ @* <ValidationSummary /> *@<div class="row gy-4"><div class="col-md-6"><label for="name-field" class="pb-2">Your Name</label><input type="text" id="name-field" class="form-control" @bind-value="Model.Name"> @* <ValidationMessage For="@(() => Model.Name)" /> *@</div><div class="col-md-6"><label for="email-field" class="pb-2">Your Email</label><input type="email" class="form-control" @bind-value="Model.Email"> @* <ValidationMessage For="@(() => Model.Email)" /> *@</div><div class="col-md-12"><label for="subject-field" class="pb-2">Subject</label><input type="text" class="form-control" @bind-value="Model.Subject"> @* <ValidationMessage For="@(() => Model.Subject)" /> *@</div><div class="col-md-12"><label for="message-field" class="pb-2">Message</label><textarea class="form-control" @bind="Model.Message" rows="10" id="message-field"></textarea> @* <ValidationMessage For="@(() => Model.Message)" /> *@</div><div class="col-md-12 text-center"><div class="loading">Loading</div><div class="error-message @errorShowClass">@errorMessage</div><div class="sent-message @successShowClass">Your message was sent successfully!</div><button type="submit" style="@sendButtonBackgroundColor" disabled=@sendButtonDisabled>@sendButtonMessage</button></div></div><AntiforgeryToken /></EditForm></div></section><!-- /Contact Section -->@code { [SupplyParameterFromForm] public ContactModel Model { get; set; } = new (); public async Task CallForm() { try { await _mailSender.SendEmailAsync(Model); _logger.LogInformation("Email sent successfully!\nSubject: {Subject}\nName: {Name}\nEmail: {Email}\nMessage: {Message} ", Model.Subject, Model.Name, Model.Email, Model.Message); } catch (Exception e) { _logger.LogError("There was an error sending the email: {Error}\nSubject: {Subject}\nName: {Name}\nEmail: {Email}\nMessage: {Message} ", e.Message, Model.Subject, Model.Name, Model.Email, Model.Message); } }}