Как использовать динамические части маршрута в приложении Blazor WASM

#blazor #blazor-webassembly

#blazor #blazor-webassembly

Вопрос:

Я собираюсь внедрить приложение Blazor WASM со следующим требованием: Приложение должно использоваться пользователями, которые могут управлять несколькими организациями и подразделениями.

Поэтому я хочу разделить большинство страниц со следующей структурой URL: myapp.test/[organization]/[sub-organization]/[page] есть ли способ, которым маршрутизация blazor обрабатывает такие запросы, как myapp.test/[page] , но предоставляет мне значения для организации и подорганизации? Я только что видел образцы с пользовательскими реализациями маршрутизаторов, которые обрабатывают области для сопоставления их с пространством имен в папке страниц, но не смог найти информацию о динамических частях маршрута, которые преобразуются в значения.

Поскольку это должно быть приложение на стороне клиента, я думаю, что я не могу использовать прокси, такие как nginx, для преобразования моих URL-адресов в форму, подобную myapp.test/[page]?organization=[organization]amp;amp;sub=[sub-organization] .

Ответ №1:

Создайте свой компонент с маршрутом, подобным

 @page "/{Organization}/{SubOrganization}/{Page:int}"

 

С таким маршрутом Organization теперь это параметр, который вы можете использовать в своем компоненте.

 @code{
    [Parameter]
    public String Organization { get; set; }
}
 

Вы можете ограничить параметры маршрута, например {Page:int} , и, начиная с .NET 5, параметры могут быть необязательными, добавив a ? в конце like {Page:int?} .

Вот краткая демонстрация.

 @page "/{Organization}/{SubOrganization}/{Page:int?}"

<dl>
    <dt>Organization</dt>
    <dd>@Organization</dd>

    <dt>Sub Organization</dt>
    <dd>@SubOrganization</dd>

    <dt>Page</dt>
    <dd>@Page</dd>
</dl>

@code{

    [Parameter]
    public String Organization { get; set; }

    [Parameter]
    public String SubOrganization { get; set; }

    [Parameter]
    public Int32 Page { get; set; } = 1;

}

 

Параметры в URL-адресах

Официальная документация содержит подробное объяснение, и https://blazor-university.com/routing/route-parameters / также имеет хороший учебник.

Комментарии:

1. Это был именно тот подход, который я искал, но вслепую, чтобы найти. Большое спасибо.