Blazor динамически создает элемент и дочерний элемент приложения

#dynamic #blazor #blazor-webassembly #blazor-jsinterop

#динамический #blazor #blazor-webassembly #blazor-jsinterop

Вопрос:

я хочу динамически создавать контейнеры DIV через JsInterop в Blazor Webassembly. Мой подход заключался в создании метода createElement в C #, который вызывает createElement в javascript и возвращает ссылку на элемент в качестве результата. Но когда я запускаю следующий код, я просто получаю пустой объект.

Код на C #:

 public object CreateElement(ElementReference elementReference)
{
    return JsRuntime.Invoke<object>("createElement",
        elementReference,
        DotNetObjectReference.Create(this));
}

Код Javascript:

 createElement(element, objectReference) {
            const newDiv = document.createElement("div");
            return element.appendChild(newDiv);
        }

Ответ №1:

Для этого вам не нужен JS. Blazor был создан, чтобы вам не приходилось манипулировать DOM. Создание компонентов. Манипулирование DOM таким образом сводит на нет цель, для которой был создан Blazor. Возможно, вы захотите начать с некоторых основ на https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1

1. Этот ответ бесполезен. Он просто связал документ длиной в тысячу строк, не сообщая, какая конкретная часть решает эту проблему. Я мог бы просто связать индексную страницу . Веб-сайт документации NET на каждый вопрос .NET и скажите «изучите основы».

2. @DamnVegetables Я не думаю, что это бесполезно. По сути, в нем говорится, что подход OP не подходит для Blazor, и что он должен сначала узнать, что это такое: создание компонентов. Он ссылается на документы 2020 года, которые они ссылаются на netcore 3.1., состояние фреймворка в 2020 году

3. @DamnVegetables хотя в SO есть много общих ответов, я думаю, что этот достаточно справедлив. В OP не упоминался какой-либо особый случай, который требует динамического создания элементов с помощью JS interop, поэтому вполне логичным ответом является направление OP на создание компонентов внутри самого Blazor. Если вы посмотрите на комментарии, Хенк даже сказал то же самое — и это ТАКОЙ серьезный большой нападающий. В результате я поддержал этот ответ.

Ответ №2:

Как упоминал @Porkopek, на самом деле нет веской причины для этого, поскольку это более или менее противоречит цели использования Blazor для динамического отображения разметки.

Если вам абсолютно необходимо использовать createElement , вы должны привязать свой код взаимодействия JS к window вызываемому объекту:

 window.createDivElement = createElement(element, objectReference) {
  const newDiv = document.createElement("div");
  return element.appendChild(newDiv);
}

Примечание сбоку, DotNetObjectReference.Create(this) предназначено для обратного вызова методов компонента C # через [JSInvokable] атрибут и, вероятно, здесь не требуется.