Я использую библиотеку Mudblazor для создания клиентского веб-приложения Blazor. Но всякий раз, когда я нажимаю кнопку формы, созданной с помощью библиотеки Mudblazor, форма не отвечает ни завершением запроса, ни какой-либо ошибкой.
@page "/login"
@using AutoCRMClinet.Services.UserService
@using Models.User
@inject IUserService _userService
<PageTitle>Landing Page</PageTitle>
<div class = "centered-container">
<MudCard Class = "pa-4" Style = "min-width: 300px; max-width: 400px;">
<MudCardContent>
<MudText Typo = "Typo.h5" Align = "Align.Center">Login</MudText>
<MudTextField T = "string" Label = "Email" @bind-Value = "email" InputType = "InputType.Email" Required = "true" Immediate = "true" />
<MudTextField T = "string" Label = "Password" @bind-Value = "password" InputType = "InputType.Password" Required = "true" Immediate = "true" />
<MudButton Variant = "Variant.Filled" Color = "Color.Primary" OnClick = "HandleValidSubmit" Class = "mt-4" FullWidth = "true">Login</MudButton>
<MudText Typo = "Typo.body2">Email: @email</MudText>
<MudText Typo = "Typo.body2">Password: @password</MudText>
</MudCardContent>
<MudCardActions>
</MudCardActions>
</MudCard>
</div>
@code {
private string email;
private string password;
[Parameter]
public bool IsLoggedIn { get; set; }
[Parameter]
public EventCallback<bool> IsLoggedInChanged { get; set; }
private async Task HandleValidSubmit()
{
bool loginSuccessful = await HandleLogin();
if (loginSuccessful)
{
// Update the IsLoggedIn parameter and notify the parent component
IsLoggedIn = true;
await IsLoggedInChanged.InvokeAsync(IsLoggedIn);
// Redirect or perform any action upon successful login
}
else
{
// Display an error message or handle login failure
Console.WriteLine("Login failed");
StateHasChanged(); // Ensure UI updates if necessary
}
}
private async Task<bool> HandleLogin()
{
Console.WriteLine($"Submitted Email: {email}");
Console.WriteLine($"Submitted Password: {password}");
UserCredential loginCred = new() { Email = email, Password = password };
var response = await _userService.Login(loginCred);
// Assuming response contains the login status, adjust accordingly
return response.IsSuccessStatusCode; // Adjust this based on your response
}
}
Вот форма, которую я создал, и IUserService отправляет запрос в веб-API. Но всякий раз, когда я нажимаю кнопку входа в систему, точка отладчика, установленная в функции HandleValidSubmit, не затрагивается. Кроме того, все, что я печатаю в текстовом поле, не отображается должным образом (в основном это текст, который я написал, и адрес электронной почты/пароль перекрываются), но всякий раз, когда я вижу пример в библиотеке Mudblazor поведение текста правильное. Также я использую шаблон веб-приложения Mudblazor и поэтому предполагаю, что мои библиотеки настроены правильно.
Вот код файла MainLayout:
@inherits LayoutComponentBase
<MudThemingProvider />
@if (!isLoggedIn)
{
<AutoCrmClinet.Components.LoginComps.LoginComponent IsLoggedIn = "isLoggedIn" IsLoggedInChanged = "HandleIsLoggedInChanged" />
}
else
{
<MudLayout>
<MudAppBar Elevation = "1">
<MudText Typo = "Typo.h5" Class = "ml-3">Application</MudText>
</MudAppBar>
<MudDrawer @bind-Open = "_drawerOpen" ClipMode = "DrawerClipMode.Always" Elevation = "2">
<NavMenu />
</MudDrawer>
<MudMainContent Class = "mt-16 pa-4">
@Body
</MudMainContent>
</MudLayout>
}
@code {
private bool _drawerOpen = true;
private void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
}
private bool isLoggedIn = false;
private void HandleIsLoggedInChanged(bool value)
{
isLoggedIn = value;
StateHasChanged();
}
}
Я предполагаю, что вы используете .NET 8. Тогда это, скорее всего, связано с выбранным режимом рендеринга и не имеет ничего общего с MudBlazor. По умолчанию это статический сервер, что означает, что вы не получаете никакой интерактивности, вам нужно согласиться на это, изменив режим рендеринга глобально, для каждой страницы или для каждого компонента. Это непростая тема, которую вам обязательно нужно понять, потому что вам нужно знать, когда и где выполняется какой код, и особенно в режиме интерактивного автоматического рендеринга, который не всегда тривиален.
Поддерживаемые режимы рендеринга (цитата из MS Docs):
Поэтому в зависимости от вашего варианта использования вам нужно выбрать один из режимов рендеринга, поддерживающий интерактивность. На мой взгляд, самый простой вариант для начала — это интерактивный сервер, но, опять же, учтите плюсы и минусы каждого режима рендеринга и выбирайте с умом.
Чтобы узнать, как переключать режимы рендеринга, обратитесь к документации Microsoft, поскольку существует множество способов сделать это, опять же, в зависимости от вашего варианта использования для каждой страницы, для каждого компонента или глобально для всего приложения.
MS Docs — режимы рендеринга Blazor.
Если вы предпочитаете видео, я рекомендую посмотреть Полноценный веб-интерфейс с Blazor в .NET 8 | .NET Conf 2023, которая представляет собой официальное представление всех этих режимов рендеринга в .NET 8 на .NET Conf 2023. С тех пор в Интернете появилось множество видеороликов и других ресурсов, объясняющих режимы рендеринга.
если вы используете .NET 8, используйте приведенный ниже код в файле App.razor.
<Маршруты @rendermode="InteractiveServer" />