Image aléatoire dans UpdateProgress

Question

J'ai un contrôle d'assistant à l'intérieur d'un panneau de mise à jour. Certaines des étapes de l'assistant prennent quelques secondes à afficher, donc je veux montrer un contrôle updateprogress pendant le chargement. Cela fonctionne, mais je voudrais montrer une image différente (image aléatoire choisie d'un dossier) dans le modèle de progression entre chaque wizardstep.

Je suis en mesure d'accéder au contrôle d'image et de modifier ImageUrl, mais le modèle de progression ne se met jamais à jour. Il conserve la première image aléatoire choisie dès le premier chargement.

J'ai essayé de mettre à jour l'imageUrl sur PageLoad et en surchargeant la méthode Render(), mais cela ne fonctionne pas.

<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> 

En behind:

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" 
} 

AUSSI essayées:

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

Votre image est plus que probablement pas être rechargées parce que le UpdateProgress se trouve en dehors de votre UpdatePanel . La nature du UpdatePanel est que seuls les contrôles internes sont mis à jour sur une requête asynchrone. =)

Voici ce que vous pouvez faire:

changement PickImageFromDirectory être une méthode statique et marquer comme WebMethod dans le code-behind:

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

Ensuite, sur la place du côté client le script suivant au bas:

<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> 

Après chaque publication asynchrone ce appellera votre méthode Web côté serveur et définir l'image src à une URL aléatoire. =)

Answer 2

Vous pouvez spécifier une URL que va à une page ASPX:

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

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