如何从 ASP.NET AJAX 响应中显示灯箱对话框答案

【问题标题】：How to show a Lightbox dialog from an ASP.NET AJAX response如何从 ASP.NET AJAX 响应中显示灯箱对话框
【发布时间】：2009-02-02 19:07:30
【问题描述】：

我想在我们的网站上使用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 中显示了厚框，但它翻了一番。我将两个垂直的厚框堆叠在一起，都有标题和关闭按钮，只有最上面的一个有我的内容。

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

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

我做错了什么？

好的，更多信息。我已经得到了Thickbox 和另一个名为LightView 的工作。以下脚本块在页面中是静态的（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 包含消息中的某些内容。如果我可以执行一行 JavaScript 来更新隐藏消息或设置隐藏消息 DIV 的内容 BEFORE 调用 showMessage()，我想我们会很高兴。

thickbox 插件使用 JQuery，Lightview 使用原型和脚本。 Lightview 更漂亮——更好的图像、动画等。我不在乎哪个。

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

【问题讨论】：

标签： jquery ajax asp.net-ajax thickbox

【解决方案1】：

迟到的答案，但也许还不算太迟。我对你的问题有点困惑，我会回答这部分：

我们真正想要的是能够从后面的任何代码调用它一些时尚，例如：

Page.ShowMessage("你好灯箱！")

让我们用Thickbox 和jQuery 来做，这是我所熟悉的，但这会给你一个用Lightview 重现它的总体思路。首先，您需要一个客户端脚本来转换“Hello lightbox！”。将消息转换为 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!");

在 SO 上查看此 other question。该实现使用 jqModal 并且非常小（不需要客户端脚本）。

【讨论】：

【解决方案2】：

我经常遇到的一件事是，当您从 AJAX 请求返回 javascript 时，出于安全原因，默认情况下它不会被执行，并且您必须在您的 ajax 请求中启用它。很抱歉很痛苦，但我只知道 Prototype 中的设置，而不知道 Asp.Net AJAX - 但至少需要检查一下？

【讨论】：

【解决方案3】：

如果您想使用 endRequest 控制消息何时显示，一种非常简单的方法是使用变量。将隐藏的输入字段设置为标志（应该在更新面板中，否则不会更新）。然后，在您的 ShowMessage 函数中，始终读取隐藏输入的值。如果设置，则弹出厚框。否则，什么都不做。

至于项目 b，您可以走同样的路线（但这可能只会在视图中添加许多不必要的隐藏字段）。有使用页面方法或 Web 服务的想法吗？交互更加灵活。

【讨论】：

【解决方案4】：

我有一个问题，即在 jQuery 库中使用灯箱可能会导致一些问题，灯箱由于某处发生冲突而无法正确加载。

我发现的解决方法是使用 jQuery 版本的灯箱。 http://plugins.jquery.com/project/jquerylightbox_bal。

【讨论】：

【解决方案5】：

另一种方法是用您选择的模式覆盖 JS 的内置 alert() 和 confirm() 函数（而不是显示您可能认为的浏览器默认模式）。

http://dev.iceburg.net/jquery/jqModal/#examples 并向下滚动到“覆盖”例如。您可以在此页面上的 firebug 控制台中尝试一下。运行：alert('zomg!'); 在里面。

function alert(msg) {
  //your modal js here.
}

对 ASP.NET 了解不多，但我假设发送警报是默认情况下会帮助您执行的操作。这只会覆盖默认操作。

【讨论】：