使用SVG将web组件从MVC/Javascript升级到Blazor

Question

我需要一条建议。我们有一个基于的现有系统。Net核心/MVC。我们正在将所有前端部件转移到Blazor。目前，我们有一部分不确定如何更好地解决任务。

我们有一个控制房间的模块。这是一个从数据库中加载楼层SVG方案的网页。SVG中的每个房间都是<G>元素具有ID。类似于<G房间id＝"；15〃>。。。

在现有的应用程序中，我们有一个javascript代码，它在页面加载后运行，这个脚本会在每个元素后面添加一个"；onclick"；带有"；房间id"；参数如果不存在"填充颜色"，则该脚本也改变元素的填充颜色；房间id"；以显示不活动的房间。

现在，我们必须将这些函数转移到Blazor。但是Blazor不能直接操作DOM。当然，我们可以保留Javascript。但这将是最糟糕的解决方案。

我们也准备好更新后端。例如，我们的想法之一是使用HtmlAgility包，解析SVG(实际上是XML(，并将CSS类插入到非活动房间中。通过这种方式，我们可以解决我们的第二个问题(也许(。对于OnClick事件，唯一的想法是在Blazor组件中解析SVG，然后用代码重建图片并添加所需的事件。

但也许有人能找到更好的方法来完成这些任务。

非常感谢！

德米特里

Answer 1

最后，我是如何解决任务的。SVG elemen具有诸如"；"鼠标悬停"onClick"等等所以，无法完全避免Javascript。但它现在是最小的，易于维护。

xScheme = XDocument.Parse(roomScheme);
elements = xScheme.Descendants("{http://www.w3.org/2000/svg}g");
foreach (var el in elements)
{
var roomId= el.Attribute("data-room-id")?.Value;
if (roomId!= null)
{
Guid.TryParse(roomId, out var roomGuid);
var room = allRooms.FirstOrDefault(s => s.Id == roomGuid);
if (room != null)
{
el.SetAttributeValue("class", "thover");                   
el.SetAttributeValue("title", $" ...Hint details ...");
el.SetAttributeValue("data-placement", "top");
el.SetAttributeValue("data-html", "true");
var attr = new XAttribute("onClick", $"window.location.href = '/RoomDetails/{roomGuid}'");
el.Add(attr);
attr = new XAttribute("onMouseover", " $(function() {$('.thover').tooltip();});");
el.Add(attr);
}
else
{
el.SetAttributeValue("class", "inactive");
}
}
}

然后在Razor内部：

@((MarkupString)xScheme.ToString())