ASP.NET HoverMenuExtender懶加載

我想讓我的hovermenuextenders做一些懶加載。我有整個網站的頭像，當盤旋時應該拉回各種事情（圖片，最近的帖子，帖子數量等）由於顯而易見的原因，我不想這樣做的page_load所有頭像。ASP.NET HoverMenuExtender懶加載

使用下面的代碼我能夠獲得懸停事件觸發異步回發到服務器（斷點擊中onmouseover）。但是，執行完成後，回發中的命令似乎沒有反映出來。加載圖像/標籤停留在懸停面板上。任何幫助表示讚賞！

編輯：我剛剛意識到，網頁上呈現的最後一個化身能夠正常工作，但沒有一個上方的化身能夠正常工作。任何想法可能會導致這種奇怪的行爲？

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

和代碼隱藏：

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

來源

2009-05-27 XVargas

凹凸。任何人都有這個想法嗎？ – XVargas 2009-05-27 15:46:33

想通了：

我的Page_Load事件轉播應該已經：

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

以及JavaScript函數應該是：

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, ''); 
    }

我還在窗體上添加了一個隱藏字段，以便知道懸停何時執行。後面的代碼將隱藏字段設置爲true，並且每次執行時，我的javascript都會檢查隱藏字段的值。這會阻止代碼每次用戶將鼠標懸停在圖像上時執行往返操作。

來源

2009-05-28 13:46:15 XVargas

ASP.NET HoverMenuExtender懶加載

回答

相關問題