ASP.NET HoverMenuExtender Ленивая загрузка - PullRequest
Новая
       33

ASP.NET HoverMenuExtender Ленивая загрузка

1 голос
/ 27 мая 2009

Я пытаюсь заставить моих hovermenuextenders выполнять ленивую загрузку. У меня есть аватары по всему сайту, которые при наведении на них должны оттягивать различные вещи (изображения, последние сообщения, количество постов и т. Д.). По понятным причинам я не хочу делать это для всех аватаров на page_load.

Используя следующий код, я могу получить событие hover, чтобы асинхронно инициировать обратную передачу на сервер (точка останова переходит на mmoverover). Однако команды в обратной передаче, похоже, не отражаются после выполнения. Загружаемое изображение / этикетка остаются на панели при наведении. Любая помощь приветствуется!

РЕДАКТИРОВАТЬ : Я только что понял, что самый последний аватар, представленный на странице, работает должным образом, но ни один из вышеупомянутых не работает. Есть идеи, что может быть причиной такого странного поведения? 

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

1 Ответ

0 голосов
/ 28 мая 2009

Разобрался:

Мое подключение к событию 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 проверяет значение скрытого поля каждый раз, когда оно выполняется. Это мешает коду выполнять обходы каждый раз, когда пользователь наводит курсор на изображение.

...