Привязка данных Blazor к веб-компоненту javascript со сложным объектом из C# - PullRequest
Новая
       32

Привязка данных Blazor к веб-компоненту javascript со сложным объектом из C#

0 голосов
/ 14 февраля 2020

У меня есть приложение Blazor, которое ссылается на пользовательский веб-компонент (<omnibar-navigation>).

Этот компонент имеет свойство items, которое должно быть json объектом, который выглядит примерно так: 

[{'title':'Home','icon':'places-home-1','url':'/','metadata':null,'items':null}, ...]

Мне интересно, как связать сложный объект C# с этим свойством items. 

var options = new List<Nav> { new Nav { Title = "Home", Icon = "places-home-1", Url = "/" } };

Тогда привязка будет выглядеть примерно так (не работает ): 

<omnibar-navigation items="@options">...</omnibar-navigation>

Код репозитория для этой проблемы здесь: https://github.com/dahlsailrunner/blazor-oidc.

Страница с точной проблемой находится здесь: https://github.com/dahlsailrunner/blazor-oidc/blob/master/Sample.Blazor/Pages/Stencil.razor

Компонент импортируется в файл Pages / _Host.cs html. enter image description here

Ответы [ 2 ]

1 голос
/ 14 февраля 2020

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

Но самое замечательное:

Если что-то в Blazor не работает, вы всегда можете использовать JavaScript Interop, чтобы заставить его работать!

Я создал для вас пост в блоге, в котором показано, как интегрировать веб-компонент с помощью JS Взаимодействие с таким свойством / атрибутом, которое принимает сложный объект: https://www.thomasclaudiushuber.com/2020/02/14/initializing-web-components-in-blazor-via-js-interop/

Здесь также показано, как обернуть веб-компонент собственным компонентом Blazor, чтобы его можно было связать просто с помощью C#. : -)

Вот репо git со всем кодом: https://github.com/thomasclaudiushuber/Blazor-Using-Custom-Web-Component

Счастливого кодирования, Томас

1 голос
/ 14 февраля 2020

Вы собираетесь построить компонент со свойством Parameter, которое получает IEnumerable вашего типа Nav. Вам просто нужно десериализовать ваш JSON и связать его с этой коллекцией.

Проверьте эту суть, чтобы узнать, как можно десериализовать JSON и выполнить привязку к коллекции в файле index.razor

https://gist.github.com/csharpfritz/c4dcfcc731826822e0764728bbd9d88c

...