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>

您需要做的就是在background-image上设置div#ReportViewer1_AsyncWait_Wait table tbody tr td:first-child，以便拥有自己的自定义图片。

Answer 2

以下解决方案使用jQuery和CSS实现替换加载映像。环境是Visual Studio 2013，ReportViewer 10.0，.NET 4.0。

该技术使用 window.setInterval 替换加载图像并保持替换。在某些情况下，例如选择级联参数，ReportViewer会替换其大部分DOM内容，包括加载图像。因此，使用CSS背景图像或使用jQuery一次性替换加载图像的简单解决方案不起作用。

给定添加到.ASCX用户控件的ReportViewer控件：

<%@ 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元素时看起来很酷！