jquery - 如何从 ASP.NET AJAX 响应显示灯箱对话框

Question

我想在我们的网站上使用 Thickbox(或其中一种变体)来显示从服务器返回的信息消息。示例包括从业务逻辑返回的警告消息等。

第一个需要此功能的地方是 asp:wizard 控件上的导航按钮。当用户尝试继续前进时，我们会验证他们的产品选择，并可能有需要显示的消息。

为了进行测试，由于我是 JQuery 和 Thickbox 的新手，因此我创建了一个测试页面。相关部分如下:

<asp:Panel runat="server" ID="pnl" Visible="false" style="display:none;background-color:Black;">
<div style="background-color:Black; width=300; height=200; ">
    <asp:Label runat="server" ID="lblMessage" ForeColor="White" />

    <script language="javascript" type="text/javascript">

        function showMessage()
        {
            tb_show("Message", "#TB_inline?height=200&width=300&inlineId=<%# me.pnl.ClientID %>", null);
        }

        $(document).ready(function() { showMessage(); });

    </script>
</div>

目前，我可以在 IE7 中显示 Thickbox，但它的大小增加了一倍。我将两个垂直的厚盒堆叠在一起，都有标题和关闭按钮，只有顶部的一个有我的内容。

在 Chrome 中，窗口背景呈灰色，但没有可见的厚盒窗口。

当我将整个内容封装在 AJAX UpdatePanel 中时，我什么也得不到。

我做错了什么？

<小时/>

好的，更多信息。我已经使用了 Thickbox 和另一个名为 LightView 的工具来进行工作。以下脚本 block 在页面中是静态的(Thickbox 版本):

<script type="text/javascript" language="javascript">
        function showMessage(sender, args)
        {
            tb_show("Message", "#TB_inline?height=200&width=300&inlineId=ctl00_ctl00_cph1_cphMain_pnl", null);

     }
     function StartWatch() {
         var prm = Sys.WebForms.PageRequestManager.getInstance();
         prm.add_endRequest(showMessage);
     }

回发设置标签的文本，该文本位于调用 tb_show 中指定的 div 内。我知道需要在回发触发之前调用 prm.add_endRequest 调用。

有几个问题。首先，其中太多内容是硬连线的——页面中的 asp:panel 和标签、拼写出的 div ID 等。

我们真正想要的是能够以某种方式从任何隐藏的代码中调用它，例如:

Page.ShowMessage("Hello lightbox!")

我想我可以在母版页文件中包含一些脚本和 DIV。在调用之前它将被隐藏。

但是，我需要能够:

a) 控制何时发生这种情况。并非每个 AJAX 请求(事实上，大多数都不需要)在返回时都需要显示一条消息。因此，我要么不必调用 endRequest 方法，要么让 endRequest 方法检查从 AJAX 调用返回的内容以确定它是否确实需要调用 showMessage()。

b) 我需要找到一种方法让 UpdatePanel 包含带有消息的内容。如果我可以在调用 showMessage() 之前执行一行 JavaScript 来更新隐藏消息或设置隐藏消息 DIV 的内容，我想我们就可以开始了。

thickbox 插件使用 JQuery，Lightview 使用原型(prototype)和脚本。 Lightview 更高级——更好的图像、动画等等。我并不关心哪个。

我正在使用 .NET 中内置的 AJAX (Atlas) 框架。

Answer 1

回答晚了，但也许还不算太晚。我对你的问题有点困惑，我只回答这部分:

What we really want is to be able to invoke this from any code behind in some fashion like:

Page.ShowMessage("Hello lightbox!")

让我们使用 Thickbox 和 jQuery 来实现，这是我所熟悉的，但这将为您提供使用 Lightview 重现它的总体思路。首先，您需要一个客户端脚本来转换“Hello lightbox!” message 放入 html 元素中，然后将其用作 TB 的内联内容。为此，我们将创建一个 ID 为 myTBInline 的 div:

function showMessage(message)
{
    var divId = "myTBInline"; // You can change this id...

    var div = $("#" + divId); // try to retrieve the div if it exists

    if (div.length > 0) // if div already exists (previous call)
        div.empty();    // then remove its content
    else
        div = $('<div id="' + divId + '"/>'); // else create it

    // add the message to the div
    div.append(message);

    // display Thickbox using the div as inline element
    tb_show("Message", "#TB_inline?height=200&width=300&inlineId=" + divId, null);
}

这是最困难的部分。现在是简单的部分，能够从后面的代码中调用它。您必须在您想要的位置添加一个方法，因为它可以是静态/共享的。我通常使用 C#，但我会尝试使用 VB 语法为您编写它(我上次使用 VB.Net 是在 2005 年；)

Public Shared Class Thickbox
    Public Shared Sub ShowMessage(Type type, string message)
        Dim script as String = "showMessage('" + message.Replace("'", "\'") + "');";
        ClientScriptManager.RegisterStartupScript(type, "Thickbox", script, true);
    End Sub
End Class

给你。在您的页面中，您可以通过以下方式使用该方法:

Thickbox.ShowMessage(GetType(), "Hello Thickbox!");

看看这个 other question就这样。该实现使用 jqModal 并且非常小(不需要客户端脚本)。