Blazor WASM：显示 MarkupString 的组件实例被其他实例干扰

Question

我的应用程序是一个 blazor Web 程序集托管应用程序。我创建了一个组件DisplayReport，它可以访问服务器项目，并得到一个HTML，由组件显示。

这是组件的剃刀页面：

@inject HttpClient HttpClient

<div style="@Style" class="@Class">
    @HTMLText
</div>

调用服务器的方法如下：

protected override async Task OnParametersSetAsync()
{
    if (!IsSet && Speciality != null)
    {
        IsSet = true;
        IsLoading = true;
        Dashboard.Refresh();

        URL = $"?%2fSSRS%2f{Report}&rc:Section={Section}&rs:Command=Embed&rs:Format=MHTML&HospitalParam={{{Speciality.Service.Site.Hospital.Id.ToString().ToUpper()}}}&SiteParam={{{Speciality.Service.Site.Id.ToString().ToUpper()}}}&ServiceParam={{{Speciality.Service.Id.ToString().ToUpper()}}}&SpecialityParam={{{Speciality.Id.ToString().ToUpper()}}}&Cohort={Cohort}";
        HttpResponseMessage response = await HttpClient.PostAsJsonAsync("Dashboard/GetReport", URL);

        if (response.IsSuccessStatusCode)
        {
            byte[] byteArray = response.Content.ReadAsByteArrayAsync().Result;
            string result_string = Encoding.UTF8.GetString(byteArray, 0, byteArray.Length);
            HTMLText = (MarkupString)result_string;
        }

        IsLoading = false;
        if (!IsLoaded)
            Dashboard.NumberDisplayReportsLoaded += 1;
        IsLoaded = true;
        Dashboard.Refresh();
    }
}

不用多解释，它做一个POST Http请求，然后把HTML作为一个MarkupString存储在变量HTMLText中。

剃须刀主页面中有很多DisplayReports，显示从SSRS 得到的HTML（对SSRS 的调用由服务器中的控制器执行，方法为GetReport）。

单独来看，每个DisplayReport都显示正确，但我发现当它们都在页面中时，显示有错误，像这样：

显示另一个 DisplayReport 时添加蓝色：第二个 DisplayReport(DR) 有错误，没有则没有。很多报道都是同一个案例：显示一个other时显示有bug。我做了一些测试，发现如果另一个 DR 只加载但不显示（with Style="display:none"），错误仍然存在。当第一个有错误的DR在页面的第一个时，问题仍然存在（似乎与顺序无关）。

这是另一个 DR 中的另一个错误（同样的问题）：

世界'TRANSFUSION'应该像'PRATIQUES POST-OPERATOIRES'。

这是 GHM 的 DR 标签 table:

<DisplayReport Dashboard="this" @ref="SyntheseGHM" Report="GHM" Section="1" Speciality="@LocalizationBanner.SelectedSpeciality" Cohort="@Tools.Snapshot" Style="width: 640px; height: 600px"/>

有24个DR同时加载，但显然每个DR都有自己的HTMLText。我看不出为什么会出现这样的问题。

谢谢。

编辑这是 HTMLDR 的文本值：

'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>\n<html>\r\n<head><title>KPIs</title>\r\n<META http-equiv="Content-Type" content="text/html; charset=utf-8"/><META http-equiv="Content-Style-Type" content="text/css"/><META http-equiv="Content-Script-Type" content="text/javascript"/><META HTTP-EQUIV="Location" CONTENT="http://my-pc:80/reports?%2FSSRS%2FKPIs"/><META HTTP-EQUIV="Uri" CONTENT="http://my-pc:80/reports?%2FSSRS%2FKPIs"/><META HTTP-EQUIV="Last-Modified" …OLSPAN="12" style="WIDTH:71.12mm;min-width: 71.12mm;"></TD><TD COLSPAN="17" style="WIDTH:104.10mm;min-width: 104.10mm;"><TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" style="WIDTH:104.28mm;min-width:
104.28mm;HEIGHT:0.26mm;" class="a46"><TR><TD style="HEIGHT:0.26mm;WIDTH:104.28mm;min-width:
104.28mm;font-size:1pt">&nbsp;</TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE></TD><TD WIDTH="100%" HEIGHT="0"></TD></TR><TR><TD WIDTH="0" HEIGHT="100%"></TD></TR></TABLE></DIV></DIV></body></html>'

Answer 1

我认为问题应该出在页面中“直接”插入 SSRS 的 HTML。对于这种情况，当您有一些带有完整声明的 HTML 代码时（就像您报告的那段代码），我认为最好使用 iframe 标记，以便在您的页面中隔离此 HTML。

您可以使用如下 iframe 语法：

<iframe src="some HTTP Url">...

或 HTML 5 srcdoc:

<iframe srcdoc='<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
...

srcdoc 与最新的浏览器完全兼容。
有关完整的兼容性参考，请查看： https://caniuse.com/mdn-html_elements_iframe_srcdoc

Blazor WASM：显示 MarkupString 的组件实例被其他实例干扰

Blazor WASM: component instances displaying MarkupString are disturbed by other instances

html

blazor-webassembly