UpdateProgress中的随机图像

Question

我在updatepanel中有一个向导控件。一些向导步骤需要几秒钟的时间才能显示出来，所以我想在加载时显示一个updateprogress控件。这是有效的，但我想在每个向导步骤之间的进度模板中显示不同的图像(从文件夹中选择的随机图像)。

我可以访问图像控件并更改ImageUrl，但进度模板从不更新。它保留了第一次加载时选择的第一个随机图像。

我尝试过更新PageLoad上的imageUrl，也尝试过重写Render()方法，但都不起作用。

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="500" >
    <ProgressTemplate>
        <div class="modalWrapper">
            <div class="updateProgress">
                <asp:Image ID="imgLoading" runat="server" AlternateText="Loading..." />
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

在代码背后：

protected void Page_Load(object sender, EventArgs e)
{
 System.Web.UI.WebControls.Image img = (System.Web.UI.WebControls.Image)UpdateProgress1.FindControl("imgLoading");

    if (img != null)
        img.ImageUrl = PickImageFromDirectory("~/images/loaders/"); //returns "~/images/loaders/randomimage.gif"  
}

还尝试了：

protected override void Render(HtmlTextWriter writer)
    {          
        System.Web.UI.WebControls.Image img = (System.Web.UI.WebControls.Image)UpdateProgress1.FindControl("imgLoading");

        if (img != null)                       
            img.ImageUrl = PickImageFromDirectory("~/images/loaders/"); //returns "~/images/loaders/randomimage.gif"

        base.Render(writer);
    }

Answer 1

您的镜像很可能不会被重新加载，因为UpdateProgress位于您的UpdatePanel之外。UpdatePanel的本质是只在异步请求时更新其中的控件。=)

下面是你可以做的：

将PickImageFromDirectory更改为静态方法，并在代码隐藏中将其标记为WebMethod：

[WebMethod]
public static string PickRandomImage()
{
   // Logic to return the full path to a random image
}

然后，在客户端将以下脚本放在底部：

<script type="text/javascript">
function requestEnded()
{
   PageMethods.PickRandomImage(imageSuccess, imageFailed);
}

function imageSuccess(result,ctx,methodName)
{
  document.getElementById('<%= imgLoading.ClientID %>').src = result;
}

function imageFailed(err,ctx,methodName)
{
  alert(err);
}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(requestEnded);
</script>

在每次异步回发之后，这将调用您的服务器端web方法，并将图像src设置为随机的url。=)

Answer 2

您可以指定转到aspx页面的url：

<asp:Image runat="server" ImageUrl="GenerateImage.aspx"/>

在GenerateImage.aspx中：

protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();
        Response.ContentType = "image/jpeg";
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.Write(GetRandomImageData());
        Response.End();
    }