Навигация без перезагрузки с использованием модальных окон на стороне сервера Blazor - PullRequest
Новая
       42

Навигация без перезагрузки с использованием модальных окон на стороне сервера Blazor

0 голосов
/ 12 июля 2020

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

Если пользователь попадает прямо на www.host.com/login , загрузится главная страница и откроется модальное окно входа, а URL-адрес будет www.host.com/login. Если пользователь закрывает модальное окно, URL-адрес обновляется, модальное окно закрывается, но перезагрузки не должно происходить.

Возможно ли это в Blazor? Насколько я понимаю, модальные окна должны быть на той же странице, что и вызывающий. Из того, что мне удалось сделать с модальными окнами с модальными окнами Blazorstrap , у меня есть: 

<BSNavLink Href="javascript:void(0);" id="username" @onclick="@(() => LoginRegisterModal.Show())">
    <i class="fas fa-user icon-padding-right" />
    USERNAME
</BSNavLink>

<BSModal @ref="LoginRegisterModal">
    <BSModalHeader OnClick="@(() => LoginRegisterModal.Hide())">Login - Register</BSModalHeader>
    <BSModalBody><p>Login / Register form goes here</p></BSModalBody>
</BSModal>

, который открывает модальное окно, но не обновляет URL-адрес и не открывается, когда пользователь попадает на него.

Я попытался поместить свой модальный файл в отдельный файл и установить на нем @ page "/ login" , но мне это не удалось. Также я проверил, как я могу изменить App.razor по умолчанию, чтобы добиться этого, но опять же не удалось.

Есть ли способ добиться такой навигации в Blazor?

Ответы [ 3 ]

1 голос
/ 13 июля 2020

Я думаю, у вас есть небольшое неверное представление о том, что такое серверное приложение Blazor ... Как только вы получаете доступ к точке маршрута, которую вы определили для файла "_Host.cs html", и приложение загружается в клиентский браузер, оно ведет себя как SPA (одностраничное приложение), и с этого момента маршруты, которые вы наблюдаете в браузере, не являются настоящими HTTP-запросами, и перезагрузка не происходит при переходе с одной страницы на другую.

Тем не менее, управление модальными окнами будет вашей самой маленькой проблемой. Вы собираетесь возиться с системами аутентификации и авторизации, которые сложно настроить на Blazor, потому что после проверки учетных данных на странице входа вы должны NavigateTo Home или root страницу, не должен быть доступен для неаутентифицированных / авторизованных пользователей. Удачи!

Согласно комментариям

Нет, я пытаюсь сказать, что вы не можете управлять URL-адресами прямо в браузере. Если единственная проблема заключается в том, что вы хотите, чтобы модальное окно открывалось с самого начала, создайте его уже открытым. Вы можете использовать bootstrap для этой или любой другой библиотеки css, которую хотите для этого, но вы также можете сделать это, создав наложенный слой и обернув остальное содержимое в div и поместив все это в блок if, состояние которого - это логическая переменная, которую вы можете переключать, когда хотите (инициализируется значением true), вот и все.

0 голосов
/ 15 июля 2020

Я обнаружил, как изменить URL-адрес без перезагрузки страницы при открытии или закрытии модального окна. Как я уже сказал в вопросе, я использовал BlazorStrap для создания модальных окон. Вот шаги для воспроизведения:

  • Добавьте @page "/yourmodal" для каждого желаемого модального окна в любом файле .razor

  • Добавьте Href="/yourmodal" на NavLink или на кнопке, открывающей модальное окно. Это изменит URL-адрес при открытии модального . Например: 

    <BSNavLink Href="/login" @onclick="@(() => LoginRegisterModal.Show())">
USERNAME
</BSNavLink>

  • Добавьте функцию в атрибут IsOpenChanged элемента BSModal. Эта функция будет вызываться каждый раз, когда модальное окно открывается или закрывается любым способом (закрытие с помощью кнопки, нажатие на фон или нажатие кнопки выхода). Он будет запускаться с логическим параметром as, сообщающим, закрыто или открыто модальное окно. 

    <BSModal @ref="LoginRegisterModal" IsOpenChanged="@((e) => ModalIsOpenChanged(e))">

  • В этой функции проверьте, закрыто ли модальное окно, если оно , позвоните NavigationManager.NavigateTo("/", false) на go, чтобы вернуться на предыдущую страницу. Это изменит URL-адрес при закрытии модального .

Теперь любое открывающееся или закрывающееся модальное окно обновит URL-адрес без перезагрузки страницы. Чего все еще не хватает в исходном вопросе, так это при приземлении на модальный. Например, переход к https://localhost/login вручную не приведет к открытию модального окна входа. Я обновлю этот ответ, когда у меня будет решение.

0 голосов
/ 13 июля 2020
• 1000 выбрал «Запомнить пароль»):

Это часть Index.razor от BlazorChat. Верхняя часть проверяет, вошел ли пользователь в систему, если да, отображается имя пользователя и кнопка «Выйти». Если нет, то отображаются кнопки «Войти» и «Присоединиться».

В нижнем разделе используется созданное мной перечисление ScreenTypeEnum: 

/// <summary>
/// This enum is used to determine which part of the screen is visible at any time
/// </summary>
public enum ScreenTypeEnum : int
{
    Main = 0,
    Join = 1,
    Login = 2
}

@if (HasLoggedInUser)
{
    <div class="welcome">Welcome @LoggedInUser.UserName</div>
    <button class="greenbutton2">
        <span class="moveup4" @onclick="SignOutButton_Click">Sign Out</span>
    </button>
}
else
{ 
    <button class="greenbutton2">
        <span class="moveup4" @onclick="LoginButton_Click">Login</span>
    </button>
    <button class="greenbutton3">
        <span class="moveup4" @onclick="SignUpButton_Click">Join Free</span>
    </button>
}

@if (ScreenType == ScreenTypeEnum.Join)
{ 
    <Join Parent=this></Join>
}
else if (ScreenType == ScreenTypeEnum.Login)
{
    <Login Parent=this></Login>
}
else
{
    <Chat Parent=this></Chat>
    @if (TextHelper.Exists(Message))
    {  
        <div class="message">
            @Message
        </div>
    }
}

Не говорю, что это единственный способ, но это сработало для меня сейчас на паре сайтов.

enter image description here

Sample Uses SQL Server Express https://github.com/DataJuggler/BlazorChat

Живой сайт, мало людей: https://blazorchat.com

Я работаю над компонентом для чата, поэтому любой сайт Blazor может добавить его.

...