ASP.NET AJAX Advance Tips & Tricks (11) 三種方法動態創建Tooltip

2019-11-09 20:45:09

字體：大中小

來源：轉載

供稿：網友

前言

如何動態創建提示框（Tooltip）是 asp.net Forum里的常見問題之一，在做技術支持時，我曾在英文博客上總結過ASP.NET和ASP.NET Ajax環境下如何動態創建提示框的三種常見方法，比較基礎，收到了蠻多老外們的commend，如今英文博客被墻，特轉到這里來與大家分享。

原文地址：

http://lancezhang.Word PRess.com/2008/12/04/create-tooltip-dynamically/

http://lancezhang.wordpress.com/2009/01/12/create-tooltip-dynamically-by-ajax-pagemethod/

http://lancezhang.wordpress.com/2009/01/12/create-tooltip-dynamically-by-ajax-and-webservice/

方法一：使用ICallbackEventHandler

Use Pop up div by javaScript or AJAX Control Toolkit’s Hover Menu control can create a Tooltip easily.

However, if we need to create the content of tooltip dynamically by the Server-Side code, we can use the ICallbackEventHandler to achieve the faing goal.

Please try the following demo, when you move the mouse on the text, the related image and text which will be created on the code-behind show up in the tooltip after 1 second. during the loading process, a “loading” gif picture will display in the tooltip box.

Ok, here we go:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”tooltiptest.aspx.cs” Inherits=”tooltiptest” %><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=“http://www.w3.org/1999/xhtml”><head id=“Head1″ runat=“server”> <script type=“text/Javascript”> var positionX; var positionY; function HandleMouSEOver(Label) { CallTheServer(Label.innerText, ”); positionX = event.clientX; positionY = event.clientY; document.getElementById(‘tooltipDiv’).style.left = positionX; document.getElementById(‘tooltipDiv’).style.top = positionY; document.getElementById(‘tooltipDiv’).style.display = ‘block’; } function HandleMouseOut() { document.getElementById(‘tooltipDiv’).style.display = ‘none’; document.getElementById(‘tooltipDiv’).innerHTML = “<img src=’loading.gif’/>”; } function ReceiveServerData(arg, context) { document.getElementById(‘tooltipDiv’).innerHTML = arg; } </script> <style type=“text/CSS”> .style1 { border: 1px solid #96C2F1; background-color: #EFF7FF; position: absolute; display: none; filter: alpha(opacity=80); opacity: 0.80; } </style> <title>Untitled Page</title></head><body style=“font-family: Calibri; font-size: 15px;”> <form id=“form1″ runat=“server”> <div id=“tooltipDiv” class=“style1″> <img src=“loading.gif”/> </div> <div> <asp:Label ID=“Label1″ runat=“server” Text=“http://forums.asp.net/Themes/FAN/style/i/logo.png” onmouseout=“HandleMouseOut()” onmouseover=“HandleMouseOver(this)”></asp:Label> <br /> <br /> <br /> <br /> <asp:Label ID=“Label2″ runat=“server” Text=“http://forums.asp.net/Themes/fan/images/roleicons/a874d69e-0ac8-4b80-acc7-512767e281f6.gif” onmouseout=“HandleMouseOut()” onmouseover=“HandleMouseOver(this)”></asp:Label> </div> </form></body></html> 復制代碼

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;public partial class tooltiptest : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler{ string tooltip; public void RaiseCallbackEvent(String eventArgument) { string filename = eventArgument; tooltip = GetTooltip(filename); } public string GetCallbackResult() { return tooltip; } protected string GetTooltip(string imagename) { System.Threading.Thread.Sleep(1000); return @”this is just a demo: <br><img src=’” + imagename+“‘/>”; } protected void Page_Load(object sender, EventArgs e) { String cbReference = Page.ClientScript.GetCallbackEventReference(this, “arg”, “ReceiveServerData”, “context”); String callbackScript = “function CallTheServer(arg, context) {“ + cbReference + “; }”; Page.ClientScript.RegisterClientScriptBlock(this.GetType(), “CallTheServer”, callbackScript, true); }} 復制代碼

方法二：使用PageMethod

If we are using ASP.NET AJAX, the same effect can be achieve by AJAX Page Method easily.

Ok, here we go:

Step 1:

we need to set the EnablePageMethods=”true” for our ScriptManager or ToolkitScriptManager:

<asp:ScriptManager ID=“ScriptManager1″ runat=“server” EnablePageMethods=“true”></asp:ScriptManager>

Step 2:

Let’s create the Server-side method for create tooltip message, please notice the using references and attribute:

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Script.Services;using System.Web.Services;using System.Web.UI;using System.Web.UI.WebControls;

[ScriptService]public partial class tooltiptest2 : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) {

}

[WebMethod] public static string GetTooltip(string imagename) { System.Threading.Thread.Sleep(1000); return @”this is just a demo: <br><img src=’” + imagename + “‘/>”; }}

Step 3:

Complete the JavaScript code to invoke the page method:

<script type=“text/javascript”> var positionX; var positionY;

function onSuccess(value, ctx, methodName) { document.getElementById(‘tooltipDiv’).innerHTML = value; }

function onFailed(ex, ctx, methodName) { alert(ex.get_exceptionType()); }

function HandleMouseOut() { document.getElementById(‘tooltipDiv’).style.display = ‘none’; document.getElementById(‘tooltipDiv’).innerHTML = “<img src=’loading.gif’/>”; }

function HandleMouseOver(Label) {

PageMethods.GetTooltip(Label.innerText, onSuccess, onFailed);

positionX = event.clientX; positionY = event.clientY; document.getElementById(‘tooltipDiv’).style.left = positionX; document.getElementById(‘tooltipDiv’).style.top = positionY; document.getElementById(‘tooltipDiv’).style.display = ‘block’; } </script>

OK, the full code is following:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”tooltiptest2.aspx.cs” Inherits=”tooltiptest2″ %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=“http://www.w3.org/1999/xhtml”><head id=“Head1″ runat=“server”>

<script type=“text/javascript”> var positionX; var positionY;

function onSuccess(value, ctx, methodName) { document.getElementById(‘tooltipDiv’).innerHTML = value; }

function onFailed(ex, ctx, methodName) { alert(ex.get_exceptionType()); }

function HandleMouseOut() { document.getElementById(‘tooltipDiv’).style.display = ‘none’; document.getElementById(‘tooltipDiv’).innerHTML = “<img src=’loading.gif’/>”; }

function HandleMouseOver(Label) {

PageMethods.GetTooltip(Label.innerText, onSuccess, onFailed);

<style type=“text/css”> .style1 { border: 1px solid #96C2F1; background-color: #EFF7FF; position: absolute; display: none; filter: alpha(opacity=80); opacity: 0.80; } </style> <title>Untitled Page</title></head><body style=“font-family: Calibri; font-size: 15px;”> <form id=“form1″ runat=“server”> <asp:ScriptManager ID=“ScriptManager1″ runat=“server” EnablePageMethods=“true”> </asp:ScriptManager> <div id=“tooltipDiv” class=“style1″> <img src=“loading.gif” /> </div> <div> <asp:Label ID=“Label1″ runat=“server” Text=“http://forums.asp.net/Themes/FAN/style/i/logo.png” onmouseout=“HandleMouseOut()” onmouseover=“HandleMouseOver(this)”></asp:Label> <br /> <br /> <br /> <br /> <asp:Label ID=“Label2″ runat=“server” Text=“http://forums.asp.net/Themes/fan/images/roleicons/a874d69e-0ac8-4b80-acc7-512767e281f6.gif” onmouseout=“HandleMouseOut()” onmouseover=“HandleMouseOver(this)”></asp:Label> </div> </form></body></html>

[ScriptService]public partial class tooltiptest2 : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) {

}

方法三：使用WebService和AJAX

And we can also use WebService and AJAX to achieve the same goal.

Ok, here we go:

Step 1:

First, let’s add the WebService reference to our page:

<asp:ScriptManager ID=“ScriptManager1″ runat=“server”> <Services> <asp:ServiceReference Path=“~/tooltiptest3.asmx” /> </Services></asp:ScriptManager>

Step 2:

Let’s create the WebService for create tooltip message:

C#: tooltiptest3.asmx<%@ WebService Language=“C#” Class=“tooltiptest3″ %>

using System;using System.Web;using System.Web.Services;using System.Web.Services.Protocols;

[WebService(Namespace = "http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService]public class tooltiptest3 : System.Web.Services.WebService {

[WebMethod] public string GetTooltip(string imagename) { System.Threading.Thread.Sleep(1000); return @”this is just a demo: <br><img src=’” + imagename + “‘/>”; } }

Step 3:

Complete the JavaScript code to invoke the page method:

<script type=“text/javascript”> var positionX; var positionY;

function onSuccess(value) { document.getElementById(‘tooltipDiv’).innerHTML = value; }

function onFailed(ex, ctx, methodName) { alert(ex.get_exceptionType()); }

function HandleMouseOut() { document.getElementById(‘tooltipDiv’).style.display = ‘none’; document.getElementById(‘tooltipDiv’).innerHTML = “<img src=’loading.gif’/>”; }

function HandleMouseOver(Label) {

tooltiptest3.GetTooltip(Label.innerText, onSuccess, onFailed);

OK, the full page code is following:

<%@ Page Language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<script runat=“server”>

</script>

<html xmlns=“http://www.w3.org/1999/xhtml”><head id=“Head1″ runat=“server”>

<script type=“text/javascript”> var positionX; var positionY;

function onSuccess(value) { document.getElementById(‘tooltipDiv’).innerHTML = value; }

function onFailed(ex, ctx, methodName) { alert(ex.get_exceptionType()); }

function HandleMouseOut() { document.getElementById(‘tooltipDiv’).style.display = ‘none’; document.getElementById(‘tooltipDiv’).innerHTML = “<img src=’loading.gif’/>”; }

function HandleMouseOver(Label) {

tooltiptest3.GetTooltip(Label.innerText, onSuccess, onFailed);

<style type=“text/css”> .style1 { border: 1px solid #96C2F1; background-color: #EFF7FF; position: absolute; display: none; filter: alpha(opacity=80); opacity: 0.80; } </style> <title>Untitled Page</title></head><body style=“font-family: Calibri; font-size: 15px;”> <form id=“form1″ runat=“server”> <asp:ScriptManager ID=“ScriptManager1″ runat=“server”> <Services> <asp:ServiceReference Path=“~/tooltiptest3.asmx” /> </Services> </asp:ScriptManager> <div id=“tooltipDiv” class=“style1″> <img src=“loading.gif” /> </div> <div> <asp:Label ID=“Label1″ runat=“server” Text=“http://forums.asp.net/Themes/FAN/style/i/logo.png” onmouseout=“HandleMouseOut()” onmouseover=“HandleMouseOver(this)”></asp:Label> <br /> <br /> <br /> <br /> <asp:Label ID=“Label2″ runat=“server” Text=“http://forums.asp.net/Themes/fan/images/roleicons/a874d69e-0ac8-4b80-acc7-512767e281f6.gif” onmouseout=“HandleMouseOut()” onmouseover=“HandleMouseOver(this)”></asp:Label> </div> </form></body>