Blazor динамически createElement и appendChild

Question

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

Код 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);
        }

Answer 1

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

Answer 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] атрибут и, вероятно, здесь не нужен.