Aspnetcore: [Blazor] Direct DOM Manipulation with C#

Created on 22 Jan 2019  ·  3Comments  ·  Source: dotnet/aspnetcore

Is your feature request related to a problem? Please describe.

Will it be possible to manipulate DOM from C# code directly without invoking javascript functions?

I thought about basics like that

var elem = document.getElementById("123");

elem.AddOrUpdateStyle("background-color", "red");
elem.AddOrUpdateStyle("height", "150px");
elem.Remove("height");

var boxes = document.getElementsByClassName("box");

foreach (var box in boxes)
{
   if (box.Classes.Contains("hidden"))
   {
      box.AddOrUpdateStyle("display", "none");
      continue;
   }

   box.Value = "";
   box.SetAttribute("placeholder", "Type here...");
}

Is it even achievable?

area-blazor

Most helpful comment

I think this issue should be reopened. Razor components should have this ability, even if its done with JS interop under the hood. ElementRef should be extended to support most basic JS functions.

All 3 comments

DOM manipulation si currently not supported by web assembly (https://github.com/WebAssembly/proposals/issues/16 , https://github.com/WebAssembly/design/blob/master/Web.md), so it won't be supported by mono wasm soon. You can do that only using the current state of Blazor : custom component and JS interop.

I think this issue should be reopened. Razor components should have this ability, even if its done with JS interop under the hood. ElementRef should be extended to support most basic JS functions.

Direct DOM access will be the reason for me to try out Blazor.
This is mandatory for the break-thru of Blazor.

Was this page helpful?
0 / 5 - 0 ratings