需要使用 Mudblazor 解决 Blazor SSR 页面在表单提交时出错

Question

我正在尝试使用 Microsoft 身份验证构建 Blazor 服务器端应用程序。我也使用 Mudblazor 作为 UI，因为我不了解 Css。登录页面需要是 SSR，Blazor SSR 应用程序上的 Identity 才能正常工作。这就是我正在努力做的事情。我的登录页面代码

@layout EmptyLayout
@page "/Account/login"
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Authentication
@using Microsoft.AspNetCore.Identity

@inject UserManager<User> UserManager
@inject SignInManager<User> SignInManager
@inject ISnackbar _snackbar
@inject NavigationManager _navigation
@inject IdentityRedirectManager RedirectManager

<PageTitle>Log in</PageTitle>

<div Class=" d-flex flex-grow-1 mud-width-full  align-center justify-center " 
style="min-height:100vh" >
<EditForm Model="Input" method="post" OnInvalidSubmit="SubmitDetails" FormName="login" >
    <DataAnnotationsValidator />
    <MudText Typo="Typo.h2" Align="Align.Center" Class="mb-3" 
    Color="Color.Primary">Rosui</MudText>
    <MudStack Spacing="3" AlignItems="AlignItems.Center" Justify="Justify.Center">
       
        <MudTextField   @bind-Value="Input.Email"  Variant="Variant.Outlined" For=" 
(()=>Input.Email)"  Style="min-width:300px"></MudTextField>

         <MudStack Spacing="0" Justify="Justify.Center" AlignItems="AlignItems.End">

             <MudTextField  @bind-Value="Input.Password"  For="(()=>Input.Password)" 
 Variant="Variant.Outlined" Style="min-width:300px"
                            ></MudTextField>

             <MudButton Variant="Variant.Text" Color="Color.Dark" Size="Size.Small" 
  Class="pa-0 ma-0">
                 <MudText Typo="Typo.caption">
                     Forgot Password?
                 </MudText>
             </MudButton>
         </MudStack>

         <MudButton Variant="Variant.Filled" Color="Color.Primary" 
 Disabled="@_processing" ButtonType="ButtonType.Submit" Style="width:200px" Class="mb-6">
             @if (_processing)
            {
                <MudProgressCircular Class="ms-n1" Size="Size.Small" 
   Indeterminate="true"></MudProgressCircular>
            }
            else
            {
                <MudText>Login</MudText>
            }

        </MudButton>
    </MudStack>
   
</EditForm>  
   

</div>

@code {

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

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);
    }
}

InputType PasswordInput = InputType.Password;
string PasswordInputIcon = Icons.Material.Filled.VisibilityOff;
bool isShow;
void ButtonTestclick()
{
    @if (isShow)
    {
        isShow = false;
        PasswordInputIcon = Icons.Material.Filled.VisibilityOff;
        PasswordInput = InputType.Password;
    }
    else
    {
        isShow = true;
        PasswordInputIcon = Icons.Material.Filled.Visibility;
        PasswordInput = InputType.Text;
    }
}

[SupplyParameterFromQuery]
private string? ReturnUrl { get; set; }
[SupplyParameterFromForm]
private InputModel Input { get; set; } = new();   
bool _processing = false;

async Task SubmitDetails()
{
    try
    {
        _processing = true;
        var user = await UserManager.FindByEmailAsync(Input.Email)?? throw new 
   Exception("Login Credentianls Not Found");
        var result = await SignInManager.PasswordSignInAsync(user, "admin@123", true, 
      lockoutOnFailure: false)?? throw new Exception("Login Credentials Are Wrong");
        RedirectManager.RedirectTo(ReturnUrl);
    }
    catch(Exception ex)
    {
        _snackbar.Add(ex.Message, Severity.Error);
    }
    finally
    {
        _processing = false;
    }
}


public async Task Enter(KeyboardEventArgs e)
{
    if (e.Key == "Enter" || e.Key == "NumpadEnter")
    {
        await SubmitDetails();
    }
}

private sealed class InputModel
{
    [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; }
}
}

当我运行应用程序并单击登录按钮时，出现以下错误：

“EditForm 需要 Model 参数或 EditContext 参数，请提供其中之一。”

如何解决这个问题？

Answer 1

我找到了答案https://github.com/MudBlazor/MudBlazor/issues/7950 不使用交互服务器模式则需要添加

name="Input.Password" @bind-Value="Input.Password" For="(()=>Input.Password)" Variant="Variant.Outlined" Style="min-width:300px" >

我不需要使用 @rendermode InteractiveServer 来执行此操作