Captcha does'nt redraw also refresh button is not showed

[MG1376]

I have this code to redraw your captcha:

else if (!string.IsNullOrWhiteSpace(dntModel.CaptchaText)
    && dntModel.CaptchaText == dntModel.EnteredCaptchaText)
{
    await LoginUser();
    if (!auth.CurrentUser.IsAuthenticated)
    {
        dntModel = new DNTCaptchaModel();
        dntModel.CaptchaText = string.Empty;
        dntCaptcha.Value = "";
        model.Password = "";                    
    }
}

And I have this model:

DNTCaptchaModel dntModel = new DNTCaptchaModel();
public class DNTCaptchaModel
{
    [Required]
    [Compare(nameof(CaptchaText), ErrorMessage = "The entered `Security Number` is not correct.")]
    public string EnteredCaptchaText { set; get; }

    public string CaptchaText { set; get; }
}

No refresh occures after executing these codes, I have debugged the codes ans see these codes are executed. Also no refresh button shows beside this captcha. I use .Net 8 and Blazor webassembly.

[VahidN]

How did you define your page in .NET 8?

[MG1376]

This is the Markup part:

@if (firstSignIn == false) // second and above sign in try
{
<MudBlazor.MudStack Row="true" AlignItems="MudBlazor.AlignItems.Center"
                     Justify="MudBlazor.Justify.FlexStart" Spacing="3">
     <MudBlazor.MudTextField T="string" Label="کد امنیتی" Required="true"
                             @bind-Value="dntModel.EnteredCaptchaText" Immediate="false">
     </MudBlazor.MudTextField>
     <DntInputCaptcha @bind-Value="dntModel.CaptchaText" DisplayMode="DisplayMode.ShowDigits"
                      Min="10000" Max="99999"
                      @ref="dntCaptcha">
     </DntInputCaptcha>
 </MudBlazor.MudStack>
}

When submit button is clicked, the above codes inside 'else if' executes. The captcha is at first invisible and if user enters invalid password, in the second try, the captcha becomes visible. model is there at first but only the captcha on page load is invisible and after users first login try becomes visible.

[VahidN]

Have you tried setting the RefreshButtonClass and ShowRefreshButton parameters? It uses bootstrap's icons by default. It's defined here. You can change it to any other font-icon library if you want and then set the RefreshButtonClass parameter.

[MG1376]

yes. I tried these two classes, refresh button is not showing, but is hidden and when I click on its place it works, but is hidden. The main problem I have is: the captcha does not refresh when I do this:

 dntModel = new DNTCaptchaModel();
 dntModel.CaptchaText = string.Empty;

I think, since the captcha is invisible at first load, and becomes visible after an interaction, this problem occurs.

[VahidN]

I can't reproduce your problem. I added a new sample called InvisibleCaptchaAtFirst.razor and it works fine. You can see and run it here. About .NET 8x: There are @rendermodes and interactivity that you should be aware of. Yes, It's a bit different (All components use the Static render mode as default, that's why interactive render mode must be specified explicitly.) and that's why I asked, how did you define your page in .NET8x, because I wanted to know, have you added a correct @rendermode? You can read more about it here in Persian.