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懒加载

回答

相关问题