Question

我在updatepanel中有一个向导控件。一些向导步骤需要几秒钟才能显示，因此我想在加载时显示updateprogress控件。这是有效的，但我想在每个wizardstep之间的progresstemplate中显示不同的图像（从文件夹中选择的随机图像）。

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

我尝试在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>

在codebehind中：

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页面：

<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();
    }

UpdateProgress中的随机图像

2 个答案: