Blazor-异步呈现大数据

Question

在我的Razor页面上，我有一个svg容器。

在svg里面我画了圆圈
SVG中可能有数千个圆圈。

<svg>
@foreach (var pixel in GetPixels())
{
<circle class="pixel" cx="@pixel.CoordinateX" cy="@pixel.CoordinateY" />                  
}
</svg>

GetPixels是

IEnumerable<Pixel> GetPixels()
{
var progress = 0;
float oldPercent = 0;
foreach (var p in Result.Pixels)
{
yield return p;
var progressPercent = (float)Math.Ceiling(progress * 1F / (Result.TotalItems) * 100F);
if (progressPercent % 1 == 0 && oldPercent != progressPercent)
{
Js.InvokeVoidAsync("updateProgress", progressPercent);
oldPercent = progressPercent;
}
progress++;
}
}

后端迭代工作得很快，当foreach语句完成时，问题就会出现，浏览器正试图渲染数千个这样的圆圈，所以它实际上会挂一段时间。

我想实现一些圆圈的批量加载，在特定数量的圆圈之后，我重新发送svg(比如1000个圆圈-输出到svg并部分显示图片(。

你能建议一下做这件事的更好方法吗？

Answer 1

我无法回答您当前发布版本的正则表达式，但如果您查看.net 5，他们已经解决了这个问题(在即将发布的预览中(。看看这段.net社区站起来的视频，进入50m50，你会看到你的问题使用表格的实现。

因此，如果你可以使用.net5预览版，或者等到年底发布，我建议你使用这种方法。