Библиотека Mudblazor не может обработать мой запрос на вход в систему

Я использую библиотеку 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();
    }
}
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
94
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я предполагаю, что вы используете .NET 8. Тогда это, скорее всего, связано с выбранным режимом рендеринга и не имеет ничего общего с MudBlazor. По умолчанию это статический сервер, что означает, что вы не получаете никакой интерактивности, вам нужно согласиться на это, изменив режим рендеринга глобально, для каждой страницы или для каждого компонента. Это непростая тема, которую вам обязательно нужно понять, потому что вам нужно знать, когда и где выполняется какой код, и особенно в режиме интерактивного автоматического рендеринга, который не всегда тривиален.

Поддерживаемые режимы рендеринга (цитата из MS Docs):

Имя Описание Место рендеринга Интерактивный Статический сервер Статический рендеринг на стороне сервера (статический SSR) Сервер ❌Нет Интерактивный сервер Интерактивный рендеринг на стороне сервера (интерактивный SSR) с использованием Blazor Server. Сервер ✔️Да Интерактивная веб-сборка Рендеринг на стороне клиента (CSR) с использованием Blazor WebAssembly†. Клиент ✔️Да Интерактивное авто Первоначально интерактивный SSR с использованием Blazor Server, а затем CSR при последующих посещениях после загрузки пакета Blazor. Сервер, затем клиент ✔️Да

Поэтому в зависимости от вашего варианта использования вам нужно выбрать один из режимов рендеринга, поддерживающий интерактивность. На мой взгляд, самый простой вариант для начала — это интерактивный сервер, но, опять же, учтите плюсы и минусы каждого режима рендеринга и выбирайте с умом.

Чтобы узнать, как переключать режимы рендеринга, обратитесь к документации Microsoft, поскольку существует множество способов сделать это, опять же, в зависимости от вашего варианта использования для каждой страницы, для каждого компонента или глобально для всего приложения.

MS Docs — режимы рендеринга Blazor.

Если вы предпочитаете видео, я рекомендую посмотреть Полноценный веб-интерфейс с Blazor в .NET 8 | .NET Conf 2023, которая представляет собой официальное представление всех этих режимов рендеринга в .NET 8 на .NET Conf 2023. С тех пор в Интернете появилось множество видеороликов и других ресурсов, объясняющих режимы рендеринга.

если вы используете .NET 8, используйте приведенный ниже код в файле App.razor.

<Маршруты @rendermode="InteractiveServer" />

Другие вопросы по теме