blazor переход на другую страницу с передачей параметров

Blazor переход на другую страницу с передачей параметров

Определим в компоненте Home.razor:

Вызовем этот компонент в главном компоненте App.razor:

В данном случае допустима и более сокращенная запись:

Таким образом, компонент App в данном случае является родительским и содержит дочерний компонент Home.

Параметры компонентов

Далее изменим вызов компонента Home в родительском компоненте App:

Через атрибуты, названия которых совпадают с названиями параметров компонента, можно передать этим параметрам некоторые данные. Причем можно передать параметру компонента значение некоторого выражения, например, переменной, как в случае с параметром Summary.

Причем можно передавать более сложное содержимое, нежели простые строки. Например, пусть Home.razor принимает список строк:

Теперь компонент получает список и выводит его в коде html. Передадим этот список в родительском компоненте App:

Передача содержимого из родительского в дочерний компонент

С помощью свойства ChildContent в дочерний компонент можно передать из родительского некоторое содержимое. Например, изменим компонент Home.razor следующим образом:

Теперь изменим родительский компонент App:

Все то, что передается между открывающим и закрывающим тегами и и будет представлять свойство ChildContent дочернего компонента

Источник

Перенаправление в blazor с параметром

Здравствуйте, как вы можете перенаправить на другую страницу в Blazor с параметром?

2 ответа

В клиенте Blazor перенаправление может быть достигнуто с помощью using Microsoft.AspNetCore.Blazor.Browser.Services; (. ) BrowserUriHelper.Instance.NavigateTo(/route) Однако это не работает в проекте Blazor Server, так как генерирует следующую ошибку: Невозможно привести объект типа.

Pages/home.cshtml

Надеюсь, это поможет.

В настоящее время вы можете передавать параметры только в URL.

Если вы хотите передать более сложные данные, вам придется подумать о том, чтобы сделать это с помощью какой-то службы.

Вот ссылка на официальные документы по параметрам маршрутизации: https://blazor.net/docs/routing.html#route-parameters

Redirecting in blazor with parameter

Hello how can you redirect to another page in Blazor with a parameter?

In this case i want to navigate to the /home page giving it a string as parameter.

2 Answers 2

Pages/home.cshtml

You can only pass parameters in the URL at present.

So, if your home component was expecting [Parameter] string Name you would need to provide a URL of /home/fred and fred would be passed into the Name parameter of the home component.

If you are looking to pass more complex data then you would have to look at doing it via some kind of service.

Here is the link to the official docs on routing parameters: https://blazor.net/docs/routing.html#route-parameters

Not the answer you’re looking for? Browse other questions tagged c# routing blazor or ask your own question.

Linked

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Страницы, маршрутизация и макеты

Приложения ASP.NET Web Forms состоят из страниц, определенных в ASPX-файлах. Адрес каждой страницы зависит от физического пути к файлу в проекте. Когда браузер выполняет запрос к странице, содержимое страницы динамически отображается на сервере. Рендеринг учитывает как HTML-разметку страницы, так и ее серверные элементы управления.

В Blazor каждая страница в приложении является компонентом, обычно определяемым в RAZOR-файле, с одним или несколькими указанными маршрутами. Маршрутизация, в основном, происходит на стороне клиента без участия конкретного запроса сервера. Сначала браузер выполняет запрос к корневому адресу приложения. Затем корневой компонент Router в приложении Blazor обрабатывает перехват запросов навигации и направляет их в нужный компонент.

Blazor также поддерживает создание глубинных ссылок. Создание глубинных ссылок происходит, когда браузер выполняет запрос к конкретному маршруту, отличному от корневого каталога приложения. Запросы для глубинных ссылок, отправленные на сервер, направляются в приложение Blazor, которое затем направляет клиентский запрос к нужному компоненту.

Простая страница в ASP.NET Web Forms может содержать следующую разметку:

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

Создание страниц

Параметр шаблона маршрута является обязательным. В отличие от ASP.NET Web Forms, маршрут к компоненту Blazor не определяется местоположением файла (хотя эта возможность может быть добавлена в будущем).

Синтаксис шаблона маршрута — это тот же базовый синтаксис, который используется для маршрутизации в ASP.NET Web Forms. Параметры маршрута указываются в шаблоне с помощью фигурных скобок. Blazor привязывает значения маршрута к параметрам компонента с тем же именем (без учета регистра).

Вы также можете указать ограничения для значения параметра маршрута. Например, чтобы идентификатор продукта был int :

Полный список ограничений маршрута, поддерживаемых Blazor, см. в разделе Ограничения маршрута.

Компонент маршрутизатора

Компонент LayoutView визуализирует свое дочернее содержимое в указанном макете. Далее в этой главе мы рассмотрим макеты более подробно.

Возврат ответа перенаправления обычно не поддерживается в Blazor. Blazor не использует модель «запрос-ответ». Однако вы можете активировать навигацию в браузере напрямую, как и в случае с JavaScript.

Для перехода к другому адресу используйте метод NavigateTo :

Описание всех элементов NavigationManager см. в разделе Вспомогательные методы состояния URI и навигации.

Базовые URL-адреса

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

Макет страницы

Чтобы применить разметку к странице, используйте директиву @layout :

Вы можете указать макет для всех компонентов в папке и вложенных папках, используя файл _Imports.razor. Вы также можете указать макет по умолчанию для всех страниц с помощью компонента маршрутизатора.

Эталонные страницы в ASP.NET Web Forms могут быть вложенными. То есть эталонная страница может также использовать эталонную страницу. Компоненты макета в Blazor также могут быть вложенными. Компонент макета можно применить к компоненту макета. Содержимое внутреннего макета будет отрисовываться во внешнем макете.

Отрисованные выходные данные для страницы будут выглядеть следующим образом:

Компоненты в Blazor, включая страницы, не могут отрисовывать теги

Источник

Создание повторно используемых компонентов пользовательского интерфейса с помощью Blazor

Одним из преимуществ ASP.NET Web Forms является инкапсуляция многоразовых фрагментов кода пользовательского интерфейса в повторно используемые элементы управления пользовательского интерфейса. Настраиваемые пользовательские элементы управления могут быть определены в разметке с помощью ASCX-файлов. Кроме того, можно создавать сложные серверные элементы управления в коде с полной поддержкой конструктора.

Blazor также поддерживает инкапсуляцию пользовательского интерфейса через компоненты. Особенности компонента:

Введение в Razor

Логика отрисовки компонента создается с помощью обычной разметки HTML с динамической логикой, добавленной с помощью C#. Символ @ используется для перехода на C#. Razor обычно понимает, когда вы переключаетесь на HTML. Например, следующий компонент отрисовывает тег

с текущим временем:

Чтобы явно указать начало и конец выражения C#, используйте круглые скобки:

Razor также упрощает использование потока управления C# в логике отрисовки. Например, можно выполнить условную отрисовку HTML-кода следующим образом:

Также можно создать список элементов с помощью обычного цикла C# foreach следующим образом:

Директивы Razor, такие как директивы в ASP.NET Web Forms, управляют многими аспектами компиляции компонента Razor. Вот несколько примеров:

Директивы Razor начинаются с символа @ и обычно используются в начале новой строки в начале файла. Например, директива @namespace определяет пространство имен компонента:

В следующей таблице перечислены различные директивы Razor, используемые в Blazor, и их эквиваленты ASP.NET Web Forms, если они существуют.

Директива	Описание	Пример	Эквивалент в Web Forms
@attribute	Добавляет атрибут уровня класса в компонент	@attribute [Authorize]	Нет
@code	Добавляет члены класса в компонент	@code
@implements	Реализует заданный интерфейс	@implements IDisposable	Использование кода программной части
@inherits	Наследует от указанного базового класса	@inherits MyComponentBase
@inject	Внедряет службу в компонент	@inject IJSRuntime JS	Нет
@layout	Задает компонент макета для компонента	@layout MainLayout
@namespace	Задает пространство имен для компонента	@namespace MyNamespace	Нет
@page	Указывает маршрут для компонента	@page «/product/«
@typeparam	Указывает параметр универсального типа для компонента	@typeparam TItem	Использование кода программной части
@using	Указывает пространство имен для переноса в область	@using MyComponentNamespace	Добавляет пространство имен в web.config

Компоненты Razor также активно используют атрибуты директивы в элементах для управления различными аспектами компиляции компонентов (обработка событий, привязка данных, ссылки на компоненты и элементы и т. д.). Все атрибуты директивы следуют общему универсальному синтаксису, в котором значения в круглых скобках являются необязательными:

В следующей таблице перечислены различные атрибуты директив Razor, используемые в Blazor.

attribute	Описание	Пример
@attributes	Преобразует для просмотра словарь атрибутов
@bind	Создает двустороннюю привязку данных
@on	Добавляет обработчик событий для указанного события	Click me!
@key	Задает ключ, используемый алгоритмом сравнения для сохранения элементов в коллекции
@ref	Получает ссылку на компонент или HTML-элемент

Многие из синтаксисов, используемые в ASPX и ASCX-файлах имеют параллельные синтаксисы в Razor. Ниже приведено простое сравнение синтаксиса для ASP.NET Web Forms и Razor.

Компонент	веб-формы	Синтаксис
Директивы	@[directive]	@page
Блоки кода	@	@
Выражения (В кодировке HTML)	Неявно: @ Явно: @()	@DateTime.Now @(DateTime.Now)
Комментарии	@* *@	@* Commented *@
привязка данных,	@bind

Поскольку Razor основан на C#, он должен быть скомпилирован из проекта C# ( .csproj). RAZOR-файлы нельзя компилировать из проекта Visual Basic ( .vbproj). Однако вы можете ссылаться на проекты Visual Basic из проекта Blazor. Верно и обратное.

Полный справочник по синтаксису Razor см. в статье Справочник по синтаксису Razor для ASP.NET Core.

Использование компонентов

Помимо обычного HTML, компоненты также могут использовать другие компоненты как часть логики отрисовки. Синтаксис использования компонента в Razor подобен использованию пользовательского элемента управления в приложении ASP.NET Web Forms. Компоненты указываются с помощью тега элемента, соответствующего имени типа компонента. Например, вы можете добавить компонент Counter :

В отличие от ASP.NET Web Forms, компоненты в Blazor:

Как видно в проектах по умолчанию Blazor, директивы @using можно размещать в файле _Imports.razor, чтобы импортировать их во все RAZOR-файлы в одном и том же каталоге и в дочерних каталогах.

Если пространство имен для компонента не находится в области, можно указать компонент, используя его полное имя типа, как в C#:

Параметры компонентов

Чтобы указать параметр компонента в Blazor, используйте атрибут, как в ASP.NET Web Forms:

Обработчики событий

ASP.NET Web Forms и Blazor предоставляют модель программирования на основе событий для обработки событий пользовательского интерфейса. Примеры таких событий включают нажатие кнопок и ввод текста. В ASP.NET Web Forms используются серверные элементы управления HTML для работы с событиями пользовательского интерфейса, предоставляемыми моделью DOM. Или вы можете обрабатывать события, предоставляемые элементами управления веб-сервера. События поступают на сервер посредством запросов обратной передачи. Рассмотрим следующие примеры кнопок Web Forms:

В Blazor можно зарегистрировать обработчики для событий пользовательского интерфейса DOM напрямую с помощью атрибутов директивы в форме @on . Заполнитель представляет имя события. Например, можно ожидать нажатие кнопок следующим образом:

Вместо ссылки на группу методов для обработчика событий можно использовать лямбда-выражение. Лямбда-выражение позволяет закрывать другие значения в области.

Обработчики событий могут выполняться синхронно или асинхронно. Например, следующий обработчик событий OnClick выполняется асинхронно:

привязка данных,

Blazor предоставляет простой механизм привязки данных из компонента пользовательского интерфейса к состоянию компонента. Этот подход отличается от функций в ASP.NET Web Forms для привязки данных из источников данных к элементам управления пользовательского интерфейса. Мы обсудим обработку данных из различных источников данных в разделе Работа с данными.

Компоненты также могут поддерживать привязку данных к параметрам. Для привязки данных определите параметр обратного вызова события с тем же именем, что и у привязываемого параметра. К имени добавляется суффикс «Changed».

Для привязки к параметру компонента используйте атрибут @bind- , чтобы указать параметр, с которым необходимо выполнить привязку.

Изменения состояния

Если состояние компонента изменилось за пределами обычного пользовательского интерфейса или обратного вызова события, компонент должен вручную сообщить о необходимости повторной отрисовки. Чтобы сообщить о том, что состояние компонента изменилось, вызовите метод StateHasChanged для компонента.

Жизненный цикл компонента

Компоненты Blazor также имеют четко определенный жизненный цикл. Жизненный цикл компонента можно использовать для инициализации состояния компонента и реализации дополнительного поведения компонентов.

OnInitialized

Методы OnInitialized и OnInitializedAsync используются для инициализации компонента. Обычно компонент инициализируется после первой отрисовки. После инициализации компонента он может быть отрисован несколько раз, прежде чем будет удален в конечном итоге. Метод OnInitialized аналогичен событию Page_Load на страницах и в элементах управления ASP.NET Web Forms.

OnParametersSet

Методы OnParametersSet и OnParametersSetAsync вызываются, когда компонент получил параметры от своего родительского элемента, и значение присваивается свойствам. Эти методы выполняются после инициализации компонента и при каждой отрисовке компонента.

OnAfterRender

Методы OnAfterRender и OnAfterRenderAsync вызываются после завершения отрисовки компонента. Ссылки на элементы и компоненты заполняются на этом этапе (подробнее об этих концепциях см. ниже). На этом этапе включается интерактивное взаимодействие с браузером. Может происходить взаимодействие с моделью DOM и выполнение JavaScript.

OnAfterRender и OnAfterRenderAsync не вызываются при предварительной отрисовке на сервере.

IDisposable

Компоненты Blazor могут реализовать IDisposable для удаления ресурсов при удалении компонента из пользовательского интерфейса. Компонент Razor может реализовать IDispose с помощью директивы @implements :

Сбор ссылок на компонент

В ASP.NET Web Forms можно управлять экземпляром элемента управления непосредственно в коде, ссылаясь на его идентификатор. В Blazor также можно получить ссылку на компонент и использовать ее, хотя это происходит реже.

При отрисовке родительского компонента поле заполняется экземпляром дочернего компонента. Затем можно вызывать методы в экземпляре компонента или иным образом использовать его.

Не рекомендуется напрямую обрабатывать состояние компонента с помощью ссылок на компоненты. Это помешает автоматической отрисовке компонента в нужное время.

Запись ссылок на элементы

Компоненты Blazor могут записывать ссылки на элемент. В отличие от серверных элементов управления HTML в ASP.NET Web Forms, с моделью DOM нельзя работать напрямую с помощью ссылки на элемент в Blazor. Blazor обрабатывает большинство взаимодействий DOM с помощью алгоритма сравнения DOM. Записанные ссылки на элементы в Blazor являются непрозрачными. Однако они используются для передачи определенной ссылки на элемент в вызове взаимодействия JavaScript. Дополнительные сведения о взаимодействии JavaScript см. в разделе Взаимодействие ASP.NET Core Blazor JavaScript.

Шаблонные компоненты

Дочернее содержимое

После этого родительский компонент может предоставить дочернее содержимое, используя обычный синтаксис Razor.

Параметры шаблона

Выходные данные этого компонента имеют следующий вид:

Файл с кодом программной части

Источник

Читайте также: Tptc кабель что это

blazor переход на другую страницу с передачей параметров