Blazor WASM: экземпляры компонентов, отображающие строку разметки, нарушаются другими экземплярами

#html #blazor-webassembly

Вопрос:

Мое приложение-это приложение, размещенное на веб-сборке blazor. Я создал компонент DisplayReport, который может получить доступ к серверному проекту и получить HTML-код, отображаемый компонентом.

Вот страница razor компонента:

 @inject HttpClient HttpClient

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

Вот метод, который вызывает сервер:

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

        URL = $"?/SSRS/{Report}amp;rc:Section={Section}amp;rs:Command=Embedamp;rs:Format=MHTMLamp;HospitalParam={{{Speciality.Service.Site.Hospital.Id.ToString().ToUpper()}}}amp;SiteParam={{{Speciality.Service.Site.Id.ToString().ToUpper()}}}amp;ServiceParam={{{Speciality.Service.Id.ToString().ToUpper()}}}amp;SpecialityParam={{{Speciality.Id.ToString().ToUpper()}}}amp;Cohort={Cohort}";
        HttpResponseMessage response = await HttpClient.PostAsJsonAsync("Dashboard/GetReport", URL);

        if (response.IsSuccessStatusCode)
        {
            byte[] byteArray = response.Content.ReadAsByteArrayAsync().Resu<
            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();
    }
}
 

Не нужно много его эксплицировать, он выполняет Http-запрос POST и сохраняет HTML в переменной htmlText в виде строки разметки.

На главной странице razor есть много отчетов, которые отображают HTML, полученный от SSRS(вызовы SSRS выполняются контроллером на сервере, метод GetReport).

По отдельности каждый отчет отображается правильно, но я заметил, что, когда все они находятся на странице, на дисплее появляются ошибки, такие как это:

жучок

Синий цвет добавляется при отображении другого отчета дисплея: со вторым отчетом дисплея(DR) есть ошибка, без нее ее нет. Многие отчеты находятся в одном и том же случае: на дисплее появляются ошибки, когда отображается другой. Я провел несколько тестов и увидел, что если другой DR только загружен, но не отображается(со стилем=»дисплей:нет»), ошибка остается. Когда первый DR, тот, в котором есть ошибки, находится на первой странице, проблема остается(кажется, она не зависит от порядка).

Вот еще одна ошибка в другом докторе(та же проблема): другая ошибка, та же причина

Мировое «ПЕРЕЛИВАНИЕ крови» должно быть похоже на «ПРАКТИЧЕСКИЕ ПОСЛЕОПЕРАЦИОННЫЕ».

Вот тег DR для таблицы GHM:

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

Одновременно загружается 24 DR, но, очевидно, каждый DR имеет свой собственный htmlтекст.
Я не понимаю, почему возникают такие проблемы.

Спасибо.

ИЗМЕНИТЬ Вот значение htmlText DR:

 '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>n<html>rn<head><title>KPIs</title>rn<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?/SSRS/KPIs"/><META HTTP-EQUIV="Uri" CONTENT="http://my-pc:80/reports?/SSRS/KPIs"/><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">amp;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>'
 

Комментарии:

1. Как объявляется » htmlText` ? Вообще говоря, я заметил, что лучше использовать двигатель razor, например: @((MarkupString)HTMLText) .

2. в коде DR, стоящем за: private MarkupString htmlText; Я попытался привести строку в движок razor, но безуспешно

3. Не могли бы вы поделиться HTML-кодом, сгенерированным в строке с неправильным форматом, и строкой с хорошим форматом? Для того, чтобы сравнить и проанализировать ошибку.

4. Я просто смотрю

5. К сожалению, и то, и другое-одно и то же! Оба они представляют собой html-текст с вызовами SSRS. Я вставлю в свой вопрос текст в качестве правки.

Ответ №1:

Я думаю, что проблема должна заключаться в HTML-файле из SSRS, вставленном «непосредственно» на страницу. Для такого рода ситуаций, когда у вас есть какой-то 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

Комментарии:

1. с srcdoc это идеально. Я надеюсь, что проблем с совместимостью браузеров не возникнет. Спасибо

2. Я добавил некоторую информацию о совместимости srcodc в ответ