0

В стандартной программе MainLayout.razor .....

<div class="page">
<div class="sidebar">
    <NavMenu />
</div>

<main>
    <div class="top-row px-4">
        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

    <article class="content px-4">
        @Body
    </article>
</main>

и NavMenu.razor ....

<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
    <a class="navbar-brand" href="">BlazorApp4</a>
    <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<nav class="flex-column">
    <div class="nav-item px-3">
        <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
            <span class="oi oi-home" aria-hidden="true"></span> Home
        </NavLink>
    </div>
    <div class="nav-item px-3">
        <NavLink class="nav-link" href="counter">
            <span class="oi oi-plus" aria-hidden="true"></span> Counter
        </NavLink>
    </div>
    <div class="nav-item px-3">
        <NavLink class="nav-link" href="fetchdata">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
        </NavLink>
    </div>
</nav>
@code {
private bool collapseNavMenu = true;

private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

private void ToggleNavMenu()
{
    collapseNavMenu = !collapseNavMenu;
}

}

В NavMenu.razor нет никаких "ссылок" на @Body. Как Blazor понимает что компоненты, ссылки на которые в NavLink, надо отображать в @Body? Как работает этот механизм? Есть какие-то соглашения?

Спасибо!

1 ответ 1

1

Примерный порядок исполнения кода для Blazor-Serever .NET 6.

  1. В файле Program.cs в конвейре определяется конечная точка, и это именно Blazor - app.MapBlazorHub();, с SignalR.

  2. Далее в app.MapFallbackToPage, указывается на какую страницу нужно будет перейти, по умолчанию это страница _Host.cshtml.

  3. Далее в _Host, указывается маска, по умолчанию это файл _Layout, которая загружается по умолчанию. В _Host также указывается что будет отрисовываться в основной динамически изменяемой части, это визуальный компонент, тип которого - App.razor, и указан способ прорисовки, для Blazor-Server, это предварительный рендеринг на стороне сервера.

  4. Далее в App.razor, есть ссылка на компонент MainLayout, и есть ссылка на routeData, в котором и будет находиться маршрут для искомой страницы.

  5. Далее, внутри стандартной страницы или комомпонента Razor, в вверху находится директива @page, и маршрут к ней.

  6. Ниже директивы @page и до блока с кодом на C# @code, все пространство будет содержать разметку и ссылки на другие, встраиваемые компоненты Razor, это есть основное содержание страницы.

  7. _Layout, загружается по умолчанию при поиске любой страницы, если для этого не заданы иные настройки. Так что сначала загружаются данные из маски, а потом грузятся данные для конкретной страницы. И отвечая на ваш вопрос, в _Layout в блоке , есть директива @RenderBody, с помощью которой и происходит собственно отрисовка содержимого страницы согласно конкретного маршрута. То есть сама искомая страница, является встроенным компонентом в страницу _Layout.

  8. Ссылка на NavMenu, содержится в компоненте MainLayout, и компонент NavMenu, может содержать ссылки, на маршрут для отрисовки конкретной страницы, при переходе по которым, будет запущен весь процесс отрисовки страницы заново, включая как специфическое содержимое этой страницы, так и панель навигации.

P.S. Можете более детально посмотреть инфу в этом видео.

1
  • Спасибо!!!!!!!!
    – Andrey
    Commented 12 окт. 2022 в 20:20

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.