Как вставить модальную форму входа в систему на панели навигации

Question

Я создаю новый веб-сайт, и одно из требований заключается в том, чтобы форма входа была модальным окном.

Я пытаюсь включить его в верхнюю панель навигации, и он отображается только в том случае, если пользователь не вошел в систему.

Если я удаляю модель и оставляю пустой модал, все работает отлично, но когда я добавляю ее снова, она не работает, потому что модель страницы (в данном случае страница индекса) отличается от модели страницы модальный логин.

Как я могу добавить это модальное окно, если оно находится на модели внутри верхней панели навигации? Есть ли альтернативы?

P.S. Я использую Razor Pages и ASP.NET Core 2.2.

Спасибо!

Answer 1

Вам необходимо использовать компонент представления:

public class LoginViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync()
    {
        var model = await GetModelAsync();
        return View(model);
    }

    public Task<LoginViewModel> GetModelAsync() =>
        Task.FromResult(new LoginViewModel());
}

Затем создайте представление Views\Shared\Components\Login\Default.cshtml и добавьте туда свой код формы входа.Наконец, в вашем макете, где вы хотите, чтобы форма входа была:

@await Component.InvokeAsync("Login")

Вам понадобится страница или обработчик, который может ответить на сообщение формы.Вы не можете публиковать в компоненте просмотра;это просто рендеринг частичного представления с его собственной моделью автономным способом, который может быть вставлен. У вас должен быть скрытый ввод в вашей форме входа в систему для «обратного URL», который вы заполните Request.Path.Затем при успешном входе вы перенаправляете пользователя обратно на этот URL.Таким образом, вход в систему будет бесперебойным, как если бы они никогда не позволяли странице, на которой они находились.

В случае сбоя вы должны просто повторно отобразить форму входа в систему, как обычно.Проще и проще передать это как представление.Таким образом, вы можете воспользоваться встроенным обработчиком сообщений на странице входа.Опять же, просто добавьте поле обратного URL-адреса и заполните его обратным URL-адресом из запроса, чтобы в конечном итоге пользователь вернулся на страницу, на которой он изначально находился, при запуске процесса входа в систему.