ASP.NET HoverMenuExtender遅延ロード
-
06-09-2019 - |
質問
私はいくつかの遅延読み込みを行うには、私のhovermenuextendersを取得しようとしています。私はホバー時には、私がPage_Loadの上のすべてのアバターのためにこれを行うにはしたくない明白な理由のために様々なもの(画像、最近の投稿、投稿数など)を引き戻す必要があることをサイト全体のアバターを持っています。
私は(ブレークポイントの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;
}
解決
それを考え出します:
私の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, '');
}
私はまた、ホバーが実行されたときを知るために、フォームの隠しフィールドを追加しました。コードが背後にある真に隠しフィールドを設定し、隠しフィールドの値それが実行されるたびに、私のjavascriptのチェック。これは、ラウンドトリップユーザーが画像の上に置くたびにやってからコードを停止します。
所属していません StackOverflow