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

я хочу динамически создавать контейнеры 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);
        }

dynamic blazor blazor-webassembly blazor-jsinterop
person Semkado    schedule 26.10.2020    source источник
comment
У вас есть веская причина сделать это в JS? Вместо C #?   -  person Henk Holterman    schedule 26.10.2020

Ответы (2)


arrow_upward
1
arrow_downward

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

person Porkopek    schedule 26.10.2020

arrow_upward
0
arrow_downward

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

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

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

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

person Joey McKenzie    schedule 26.10.2020