.NET 8 + MudBlazor 8.6.0中LoginForm功能异常求助
MudBlazor LoginForm 故障排查求助
我是.NET/C#新手,正在搭建一个连接数据库的简单Web应用,目前遇到MudBlazor LoginForm的两个问题:
问题1:输入框标签与内容重叠
在LoginForm中输入文本时,用户输入的内容会和输入框的标签重叠。
问题2:登录按钮无响应,SubmitForm()未触发
点击登录按钮后没有任何反应,绑定的SubmitForm()方法完全没被调用。
LoginForm组件代码片段:
@page "/Account/Login" @inject NavigationManager NavigationManager @inject IUserLoginService UserLoginService @inject CustomAuthenticationStateProvider AuthStateProvider @inject ILogger<Login> Logger <MudCard Elevation="8"> <MudCardContent> <MudForm @ref="loginForm" Model="@loginModel" OnValidSubmit="@SubmitForm"> <MudTextField @bind-Value="loginModel.Email" Label="Email" Variant="Variant.Outlined" Required="true" Email="true" /> <MudTextField @bind-Value="loginModel.Password" Label="Password" Variant="Variant.Outlined" Required="true" InputType="InputType.Password" /> <MudButton Type="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" FullWidth="true" Class="mt-4">Login</MudButton> </MudForm> </MudCardContent> </MudCard> @code { private MudForm loginForm; private LoginModel loginModel = new LoginModel(); private async Task SubmitForm() { Logger.LogInformation("SubmitForm called"); var result = await UserLoginService.LoginAsync(loginModel.Email, loginModel.Password); if (result.Success) { await AuthStateProvider.UpdateAuthenticationState(result.UserId); NavigationManager.NavigateTo("/Home"); } else { Logger.LogError("Login failed: {Message}", result.Message); await loginForm.AddError(result.Message); } } public class LoginModel { public string Email { get; set; } public string Password { get; set; } } }
怀疑Program.cs存在问题,代码如下:
using Microsoft.AspNetCore.Authentication.Cookies; using Microsoft.AspNetCore.Authorization; using Microsoft.AspNetCore.Components.Authorization; using Microsoft.EntityFrameworkCore; using MudBlazor.Services; using PortfolioWebApp.Components; using PortfolioWebApp.Models; using PortfolioWebApp.Services; var builder = WebApplication.CreateBuilder(args); builder.Services.AddRazorComponents() .AddInteractiveServerComponents(); builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme) .AddCookie(options => { options.Cookie.Name = "auth_cookie"; options.LoginPath = "/Account/Login"; options.AccessDeniedPath = "/Error/Forbidden"; options.ExpireTimeSpan = TimeSpan.FromMinutes(30); options.Cookie.SecurePolicy = CookieSecurePolicy.Always; options.Cookie.SameSite = SameSiteMode.Strict; }); builder.Services.AddAuthorization(options => { options.FallbackPolicy = new AuthorizationPolicyBuilder() .RequireAuthenticatedUser() .Build(); }); builder.Services.AddHttpContextAccessor(); builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthenticationStateProvider>(); builder.Services.AddScoped<CustomAuthenticationStateProvider>(); builder.Services.AddCascadingAuthenticationState(); builder.Services.AddMudServices(); builder.Services.AddDbContext<AppDbContext>(options => options.UseNpgsql(builder.Configuration.GetConnectionString("DefaultConnection"))); builder.Services.AddScoped<IPasswordHashingService, PasswordHashingService>(); builder.Services.AddScoped<IUserRegistrationService, UserRegistrationService>(); builder.Services.AddScoped<IUserLoginService, UserLoginService>(); /* builder.Services.AddAntiforgery(options => { options.HeaderName = "X-CSRF-TOKEN"; options.Cookie.Name = "X-CSRF-TOKEN"; options.SuppressXFrameOptionsHeader = false; }); */ var app = builder.Build(); app.UseExceptionHandler("/Error/ServerError"); app.UseStatusCodePagesWithReExecute("/error/{0}"); if (!app.Environment.IsDevelopment()) { app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseAuthentication(); app.UseAuthorization(); app.UseAntiforgery(); app.MapGet("/", context => { context.Response.Redirect("/Home"); return Task.CompletedTask; }); app.MapRazorComponents<App>().AddInteractiveServerRenderMode(); app.Run();
我已经尝试调整多项配置但未解决问题,项目可通过build_and_deploy脚本在Docker容器中运行。
内容的提问来源于stack exchange,提问作者derpascal
相关产品推荐
相关产品推荐

