RadzenTemplateForm always uses GET method when submits

Radzen.Blazor Components
1

This is my html:

<div class="mt-5" style="height:100%">
    <div class="h-100 d-flex align-items-center justify-content-center">
        <div class="card bg-light">
            <div class="card-body">
                <h5 class="card-title text-center display-6">Sign In</h5>

                <StatusMessage Message="@errorMessage" />

                <RadzenTemplateForm TItem="LoginModel" Data="@Input" Submit="LoginUser">
                    <DataAnnotationsValidator />
                    <hr />
                    <ValidationSummary class="text-danger" role="alert" />
                    <div class="form-floating mb-3">
                        <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Email</RadzenText>
                        <RadzenTextBox Name="@(nameof(LoginModel.Email))" @bind-Value="Input.Email" Style="width: 100%" aria-label="Email" Placeholder="name@example.com" type="Email" />
                        <ValidationMessage For="() => Input.Email" class="text-danger" />
                    </div>
                    <div class="form-floating mb-3">
                        <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Password</RadzenText>
                        <RadzenTextBox Name="@(nameof(LoginModel.Password))" @bind-Value="Input.Password" Style="width: 100%" aria-label="Password" type="Password" />
                        <ValidationMessage For="() => Input.Password" class="text-danger" />
                    </div>
                    <div class="checkbox mb-3">
                        <RadzenCheckBox Name="@(nameof(LoginModel.RememberMe))" @bind-Value="Input.RememberMe" />
                        <RadzenLabel Text="Remember me" Component="RememberMe" class="rz-ms-2" />
                    </div>
                    <div>
                        <RadzenButton Text="Log in" class="w-100" ButtonType="ButtonType.Submit" ButtonStyle="ButtonStyle.Primary" />
                    </div>
                    <div class="row">
                        <div class="col-6 pt-2">
                            <a href="Account/ForgotPassword">Forgot your password?</a>
                        </div>
                        <div class="col-6 pt-2 text-end">
                            <a href="Account/ResendEmailConfirmation">Resend email confirmation</a>
                        </div>
                    </div>
                </RadzenTemplateForm>
                <br />
                <ExternalLoginPicker />
                <hr />
                <p class="text-center mt-2">
                    <small class="text-muted text-center">
                        Don't have an account yet?
                        <a href="@(NavigationManager.GetUriWithQueryParameters("Account/Register", new Dictionary<string, object?> { ["ReturnUrl"] = ReturnUrl }))">Sign up</a>
                    </small>
                </p>
            </div>
        </div>
    </div>
</div>

This is my c# code:

@code {
    private string? errorMessage;

    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;

    public LoginModel Input { get; set; } = new LoginModel();

    [SupplyParameterFromQuery]
    private string? ReturnUrl { get; set; }

    protected override async Task OnInitializedAsync()
    {
        if (HttpMethods.IsGet(HttpContext.Request.Method))
        {
            // Clear the existing external cookie to ensure a clean login process
            await HttpContext.SignOutAsync(IdentityConstants.ExternalScheme);
        }
    }

    public async Task LoginUser()
    {
        // This doesn't count login failures towards account lockout
        // To enable password failures to trigger account lockout, set lockoutOnFailure: true
        var result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
        if (result.Succeeded)
        {
            Logger.LogInformation("User logged in.");
            RedirectManager.RedirectTo(ReturnUrl);
        }
        else if (result.RequiresTwoFactor)
        {
            RedirectManager.RedirectTo(
                "Account/LoginWith2fa",
                new() { ["returnUrl"] = ReturnUrl, ["rememberMe"] = Input.RememberMe });
        }
        else if (result.IsLockedOut)
        {
            Logger.LogWarning("User account locked out.");
            RedirectManager.RedirectTo("Account/Lockout");
        }
        else
        {
            errorMessage = "Error: Invalid login attempt.";
        }
    }

    public sealed class LoginModel
    {
        [Required]
        [EmailAddress]
        public string Email { get; set; } = "";

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; } = "";

        [Display(Name = "Remember me?")]
        public bool RememberMe { get; set; }
    }
}

My form is always executed by a GET method like this

image
image870×122 6.58 KB

2

Yes, the <form> element does that too. You should set the Method property if you want post.

3

Dear @korchev;
I would like to say thanks for your answer quickly. I did it but it's still not working

image
image1605×618 131 KB

4

You seem to expect the submit event to fire. This requires interactivity to be enabled which doesn't seem to be the case for your app.

5

yes, I think that is what I would like. I would like when I click on Login button, my form can be submited and LoginUser method should be called.
I'm using Blazor Server

6

This seems to work just fine when I test it. Not sure why it doesn't work for you - can you reproduce such a problem by editing our online demo?

7

I also tried your online demo. I also copied this code to my project, sometime it works sometime not.

8

I am afraid I can't tell why this doesn't work. If you have a subscription you can send us your app to info@radzen.com and we will troubleshoot.

9

Hi @korchev,
I think I found out the problem, and I think that we cannot use Radzen components with the default identity of blazor.
as you see in my attachment image

image
image650×152 9.1 KB

This line will ignore all Radzen importing. If I remove this line, my radzen components can work fine but my identity pages will not work.