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
    12 окт 2022 в 20:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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