ASP.NET AJAX Advance Tips & Tricks (11) 三种方法动态创建Tooltip

博客园 - LanceZhang

【招聘】招高级.Net研发工程师（上海-普陀）测试应对.NET Reflector过期的小技巧不需编译让aspx页自主筛选数据绑定记录也谈谈“加班”问题共享一个封装Silverlight的WebPart 【开源】二手火车票监控程序抢票快手 V1.0发布【开源】Winform甘特日程控件GanttPlanner V1.0发布移除txt文本中不必要的换行符在MOSS2007中开发并部署自定义WebService SQL Server 中统计各用户表记录条数的两种方法代友招中高级.NET开发工程师【上海-徐汇】在64位Windows系统上安装Toad和PLSQL Developer等Oracle客户端工具又是一年生日到，哥老了。。。一个简单的PV统计例子，演示如何利用内存缓冲高并发环境下的计数 - LanceZhang - 博客园文章目录：ASP.NET AJAX Advance Tips & Tricks 系列文章【共10篇】 Digg被黑了？No，呵呵 PPT：ASP.NET AJAX 性能优化文章目录：使用VisualStudio 2010从分析到实施系列【共5+3篇】

LanceZhang · 2010-02-09 · via 博客园 - LanceZhang

前言

如何动态创建提示框（Tooltip）是ASP.NET Forum里的常见问题之一，在做技术支持时，我曾在英文博客上总结过ASP.NET和ASP.NET AJAX环境下如何动态创建提示框的三种常见方法，比较基础，收到了蛮多老外们的commend，如今英文博客被墙，特转到这里来与大家分享。

原文地址：

http://lancezhang.wordpress.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:

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

        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>

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

}

方法三：使用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:

<%@ 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:

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

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

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>

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

            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>

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - LanceZhang

前言

方法一：使用ICallbackEventHandler

方法二：使用PageMethod

Step 1:

Step 2:

Step 3:

方法三：使用WebService和AJAX

Step 1:

Step 2:

Step 3: