ASP.NET HoverMenuExtender Lazy Loading

Question

Ich versuche, meine Hovermenuextenders einige lazy Loading zu tun. Ich habe Avatare über die Seite, die, wenn sie über die Seite gezogen werden, verschiedene Dinge zurückziehen sollten (Bilder, aktuelle Beiträge, Post-Zählung usw.). Aus offensichtlichen Gründen möchte ich das nicht für alle Avatare auf page_load machen.

Mit dem folgenden Code bin ich in der Lage, das Hover-Ereignis zu erhalten, um asynchron ein Postback auf den Server auszulösen (Breakpoint ist onmouseover getroffen). Die Befehle im Postback scheinen jedoch nach der Ausführung nicht wiedergegeben zu werden. Das geladene Bild/Etikett bleibt im Schwebepanel. Jede Hilfe wird geschätzt!

BEARBEITEN: Ich habe gerade festgestellt, dass der allerletzte Avatar, der auf der Seite gerendert wird, richtig funktioniert, aber keiner der darüber liegenden. Irgendwelche Ideen, was dieses merkwürdige Verhalten verursachen könnte?

<script language="javascript" type="text/javascript"> 
    function OnHover(image) {   
     __doPostBack('<%= this.imageHoverTrigger.UniqueID %>', ''); 
    } 
</script> 

<!-- DUMMY Hover Trigger --> 
<input id="imageHoverTrigger" runat="server" style="display:none;" 
    type="button" onserverclick="imageHoverTrigger_Click" /> 

<!-- User Avatar --> 
<div style="border: solid 1px #AAA; padding:2px; background-color:#fff;">  
    <asp:ImageButton ID="UserImg" runat="server" /> 
</div>   

<!-- Hover tooltip disabled by default 
    (Explicitly enabled if needed)--> 
<ajax:HoverMenuExtender ID="UserInfoHoverMenu" Enabled="false" runat="server" 
    OffsetX="-1" 
    OffsetY="3" 
    TargetControlID="UserImg" 
    PopupControlID="UserInfoPanel" dyn 
    HoverCssClass="userInfoHover" 
    PopupPosition="Bottom"> 
</ajax:HoverMenuExtender> 

<!-- User Profile Info --> 
<asp:Panel ID="UserInfoHover" runat="server" CssClass="userInfoPopupMenu">    
    <asp:UpdatePanel ID="UserInfoUpdatePanel" runat="server" UpdateMode="Conditional" > 
     <ContentTemplate> 
      <asp:Image ID="loadingImg" runat="server" ImageUrl="~/Design/images/ajax-loader-transp.gif" />        
      <asp:Label ID="loadingLbl" runat="server" Text="LOADING..." ></asp:Label> 
      <asp:Panel ID="UserInfo" runat="server" Visible="false"> 
       <b><asp:Label ID="UserNameLbl" runat="server"></asp:Label><br /></b> 
       <span style="font-size:.8em"> 
        <asp:Label ID="UserCityLbl" runat="server" Visible="false"></asp:Label> <asp:Label ID="UserStateLbl" runat="server" Visible="false"></asp:Label> 
       </span> 
      </asp:Panel>       
     </ContentTemplate> 
     <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="imageHoverTrigger" /> 
     </Triggers>      
    </asp:UpdatePanel>  
</asp:Panel> 

Und der Code-behind:

protected void Page_Load(object sender, EventArgs e) 
{ 
    UserImg.Attributes.Add("onmouseover", "javascript:OnHover(this)"); 
} 

protected void imageHoverTrigger_Click(object sender, EventArgs args) 
{ 
    // Hide loading image/label 
    loadingLbl.Visible = false;   
    loadingImg.Visible = false; 

    //TODO: Set user data here 
    UserInfo.Visible = true; 
} 

Answer 1

figured it out:

Mein Page_Load Ereignis hookup waren sollte:

UserImg.Attributes.Add("onmouseover", "javascript:OnHover('" + this.imageHoverTrigger.UniqueID + "','" + this.hiddenLbl.ClientID + "')"); 
    UserImg.Attributes.Add("onmouseout", "javascript:ClearTimer()"); 

und die Javascript-Funktion hätte sein sollen:

var hoverTimer; 

    // Called on the hover of the user image 
    function OnHover(trigger, hiddenTxt) { 

     var field = document.getElementById(hiddenTxt); 

     // Only post if this hover hasn't been done before 
     if (field == null || field.innerHTML == "false") { 
      hoverTimer = setTimeout(function() { ShowInfo(trigger) }, 500);   
     }    
    } 

    // Clears timeout onmouseout 
    function ClearTimer() { 
     clearTimeout(hoverTimer); 
    } 

    // Retrieves user info from server 
    function ShowInfo(trigger) { 
     __doPostBack(trigger, ''); 
    } 

Ich habe auch ein verstecktes Feld auf dem Formular hinzugefügt, um zu wissen, wann der Hover ausgeführt wurde. Der dahinter stehende Code setzt das versteckte Feld auf "true" und mein JavaScript prüft bei jeder Ausführung nach dem Wert des versteckten Feldes. Dadurch wird verhindert, dass der Code jedes Mal, wenn der Benutzer das Bild überfliegt, Rundfahrten ausführt.