You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

.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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.13 06:22:28