Paginated report not embedding inside update panel ASP.net

Hi,

I am using the ASP.NET WebForms framework and embedding the report using a JavaScript SDK approach.

The `powerBIReportContainer` div does not display the report when it is placed inside an `<asp:UpdatePanel>`.

Note: using Wizard forms as well. 

When the `powerBIReportContainer` div is positioned outside the `</asp:UpdatePanel>`, the Power BI report renders correctly.

Below is my code snippet. Could you please assist me with what changes I need to make in my JavaScript or any other solutions?

</ContentTemplate>
</asp:UpdatePanel>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/powerbi.js"></script>
<asp:Button ID="btnGenerateReport" runat="server" Text="Generate Report" CssClass="genric_btn green" OnClick="btnGenerateReport_Click" />
<div id="powerBIReportContainer" style="height:600px;width:100%;"></div>
<script type="text/javascript">
var embedUrl = '<%= EmbedUrl %>';
var embedToken = '<%= EmbedToken %>';
var reportId = '<%= ReportId %>';

function embedPowerBIReport() {
if (!embedUrl || !embedToken || !reportId) return;

var models = window['powerbi-client'].models;
var embedConfig = {
type: 'report',
isPaginatedReport: true,
id: reportId,
embedUrl: embedUrl,
accessToken: embedToken,
tokenType: models.TokenType.Embed,
settings: {
panes: {
filters: { visible: false },
pageNavigation: { visible: true }
},
navContentPaneEnabled: true
}
};
var reportContainer = document.getElementById('powerBIReportContainer');
powerbi.reset(reportContainer);
var report = powerbi.embed(reportContainer, embedConfig);

// Show page navigation after report is loaded
report.on("loaded", function () {
report.updateSettings({
panes: {
pageNavigation: { visible: true }
}
});
});
}

window.onload = function () {
embedPowerBIReport();
};
</script>
</div>
</div>

</asp:Content>