Ive got a Blazor/.NET8 webapp and I am struggling with a user registration Component. The issue is that I cant seem to create a way to conditionally either prevent the task from running nor disable the button from subsequent clicks.

I have tried adding a private bool and conditionally running the task based on its value but it appears as though the submit was somehow resetting the bool back to false. At this point I have extended this theory and created a “StateService” thinking that this would persist the value, but its acting the same:

namespace TripSuite.Service
{
    public interface IStateService
    {
        bool IsSubmitting { get; set; }
    }
    public class StateService : IStateService
    {
        public bool IsSubmitting { get; set; } = false;
    }
}

In the program.cs:

builder.Services.AddSingleton<IStateService, StateService>();

the component:

<EditForm Model="Input" asp-route-returnUrl="@ReturnUrl" method="post" OnValidSubmit="HandleSubmit" FormName="register">
            <DataAnnotationsValidator />
            <hr />
            <ValidationSummary class="text-danger" role="alert" />
            <div class="form-floating mb-3">
                <InputText @bind-Value="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="[email protected]" />
                <label for="email">Email</label>
                <ValidationMessage For="() => Input.Email" class="text-danger" />
            </div>
            <div class="form-floating mb-3">
                <InputText type="password" @bind-Value="Input.Password" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
                <label for="password">Password</label>
                <ValidationMessage For="() => Input.Password" class="text-danger" />
            </div>
            <div class="form-floating mb-3">
                <InputText type="password" @bind-Value="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
                <label for="confirm-password">Confirm Password</label>
                <ValidationMessage For="() => Input.ConfirmPassword" class="text-danger" />
            </div>


    <MudButton ButtonType="ButtonType.Submit" Disabled="@stateService.IsSubmitting">Register</MudButton>
  
   


        </EditForm>

the CS:

    private async void HandleSubmit()
    {
        if (!stateService.IsSubmitting)
        {

            stateService.IsSubmitting = true;

            StateHasChanged();

            await RegisterUser();
        }
      
    }

what I dont quite understand is that if i comment out the “await RegisterUser();” then the UI acts as expected where the submit buttons becomes disabled.

I dont think its all that relevent but this is the RegisterUser method which creates the user and sets up some defaults.

public async Task RegisterUser()
{
             
        var user = CreateUser();
        await UserStore.SetUserNameAsync(user, Input.Email, CancellationToken.None);
        var emailStore = GetEmailStore();
        await emailStore.SetEmailAsync(user, Input.Email, CancellationToken.None);
        var result = await UserManager.CreateAsync(user, Input.Password);



        if (!result.Succeeded)
        {
            identityErrors = result.Errors;

            return;

        }




        var userId = await UserManager.GetUserIdAsync(user);
        var code = await UserManager.GenerateEmailConfirmationTokenAsync(user);
        code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
        var callbackUrl = NavigationManager.GetUriWithQueryParameters(
            NavigationManager.ToAbsoluteUri("Account/ConfirmEmail").AbsoluteUri,
            new Dictionary<string, object?> { ["userId"] = userId, ["code"] = code, ["returnUrl"] = ReturnUrl });

    await EmailSender.SendConfirmationLinkAsync(user, Input.Email, HtmlEncoder.Default.Encode(callbackUrl));


   
    var usersCount = await UserManager.Users.CountAsync();
    if (usersCount == 1) // The first user has just been created.
    {

        
        var adminRoleExists = await RoleManager.RoleExistsAsync("Admin");
        if (!adminRoleExists)
        {
            await RoleManager.CreateAsync(new IdentityRole("Admin"));
        }

        
        await UserManager.AddToRoleAsync(user, "Admin");

       
        await UserManager.AddClaimAsync(user, new Claim("Permission", "CanAccessEverything"));

    }

       
        var newUserSettings = new UserSettings
            {

                UserID = userId,
                SelectedTheme = "Dark"
            };

        var newEntity = new Entities
            {
                Email = user.Email,
                UserID = userId,
                EntityType = Enums.EntityTypes.WebUser
            };

        DB.Entities.Add(newEntity);
        DB.UserSettings.Add(newUserSettings);
        await DB.SaveChangesAsync();

        if (UserManager.Options.SignIn.RequireConfirmedAccount)
        {
            RedirectManager.RedirectTo(
                "Account/RegisterConfirmation",
                new() { ["email"] = Input.Email, ["returnUrl"] = ReturnUrl });
        }
        await SignInManager.SignInAsync(user, isPersistent: false);
             
        RedirectManager.RedirectTo(ReturnUrl);
}

Im at a loss here, seems like this should be a simple thing