ASP.NET中的Reportviewer控件加載指示器

Question

我只是用新主題爲我的站點換膚，是否可以更改ReportViewer控件的加載圖像（具有綠色）？

我嘗試了一些解決方案建議，但它不工作，任何人都可以指導我呢？

Answer 1

您可以隨時使用CSS進行修改。

如果調查是從ReportViewer控件呈現的HTML，應該有一個叫做<div>[ID_of_control]_AsyncWait_Wait

在我的，我有CSS;

<style> 
    /* this will remove the spinner */ 
    div#ReportViewer1_AsyncWait_Wait img{ display: none; } 
    /* this allows you to modify the td that contains the spinner */ 
    div#ReportViewer1_AsyncWait_Wait table tbody tr td:first-child{ background: red; width: 100px; height: 100px; } 
</style> 

所有你需要做的是設置在div#ReportViewer1_AsyncWait_Wait table tbody tr td:first-child的background-image纔能有自己的自定義圖像。

Answer 2

以下解決方案使用jQuery和CSS實現替換加載圖像。環境是Visual Studio 2013，ReportViewer 10.0，.NET 4.0。

該技術使用window.setInterval來替換加載圖像並保持它被替換。在某些情況下，例如選擇級聯參數，ReportViewer會取代其大部分DOM內容，包括加載圖像。因此，使用CSS背景圖像或使用jQuery一次性替換加載圖像的簡單解決方案不起作用。

給定一個ReportViewer控件添加到用戶.ASCX控制：

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %> 

<%-- replace stock SSRS wait control ("green spinner") with our own; execute every 200 milliseconds --%> 
<script type="text/javascript"> 
$(document).ready(function() { 
    OurApp.timeoutID = window.setInterval(OurApp.reportViewerWaitControlSubstitute, 200); 
}); 
</script> 

<rsweb:ReportViewer ID="rvc0" runat="server" ... CssClass="ReportViewerControl" ... > 
</rsweb:ReportViewer> 

JavaScript的：

var OurApp= OurApp|| {}; 

OurApp.reportViewerWaitControlSubstitute = function() { 
    var control = $('.ReportViewerControl div[id$="_AsyncWait_Wait"] img'); 
    var source = control.attr("src"); 
    var path = "/media/images/atom.gif"; 
    var style = "height:48px;width:48px;border-radius:10px;margin-right:10px"; 
    //don't replace if already our image, or it will not animate 
    if (source && (source != path)) { 
     control.attr("src", path); 
     control.attr("style", style); 
    } 
} 

CSS（爲圓角和更均勻的圖像和文字的排列）：

.ReportViewerControl div[id$='_AsyncWait_Wait'] { 
    border-radius:10px; 
    padding:15px 15px 0 !important} 

結果：

特定的.gif是一個動畫原子，當ReportViewer元素加載時看起來非常酷！