6

单击链接时，我正在调用厚框：

<a href="createContact.aspx?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=400&width=550&modal=true"
                            title="Add a new Contact" class="thickbox">Add a new Contact</a>

而且，当单击服务器按钮时，我调用此 javascript 函数来显示 jGrowl 通知：

ScriptManager.RegisterClientScriptBlock(this, typeof(Page), Guid.NewGuid().ToString(), "$(function(){$.jGrowl('No Contact found: " + searchContactText.Text + "');});", true);

两者都按预期工作，除非 jGrowl 先显示而不是厚框。这将导致thickbox 无法工作，页面将显示为正常的web（好像thickbox 已经消失了）。

有谁知道发生了什么？

更新：这是没有母版页的测试页：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="RoutingPortal.Presentation.WebForm2" %>

<!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 runat="server">
<title></title>
<script src="../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="../Scripts/thickbox.js" type="text/javascript"></script>
<script src="../Scripts/jquery.jgrowl.js" type="text/javascript"></script>
<link href="../Scripts/css/jquery.jgrowl.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="~/CSS/thickbox.css" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
    <a href="createContact.aspx?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=400&width=550&modal=true"
            title="Add a new Contact" class="thickbox">Add a new Contact</a>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

这是代码隐藏：

namespace RoutingPortal.Presentation
{
public partial class WebForm2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterClientScriptBlock(this.Page, typeof(Page), Guid.NewGuid().ToString(),
                "$(function(){$.jGrowl('My Message');});", true);
    }
}
}

我刚刚在没有 UpdatePanel 的情况下对其进行了测试，并且效果很好。因此，这绝对是UpdatePanel或它与从代码隐藏调用的 jGrowl 交互方式的问题。

我非常感谢你们的帮助。

更新：我什至创建了一个演示项目，可以轻松识别此问题。不介意将其发送给愿意帮助我解决此问题的任何人。提前谢谢各位！

更新：我还尝试了@Rick 给出的解决方案，改变了从代码隐藏执行 jGrowl 脚本的方式：

ScriptManager.RegisterStartupScript(this.Page, typeof(Page), Guid.NewGuid().ToString(),
        "$.jGrowl('My Message');", true);

但是，问题仍然存在，因为结果完全相同。还有其他想法吗？我非常感谢您的帮助。

更新：我也在 IE8 和 Chrome 中尝试过这个，面临同样的问题。因此，这与浏览器无关。以防万一。

4

3 回答 3

2

我不完全了解您页面的体系结构，但正如@patmortech 指出的那样，UpdatePanel导致 DOM 元素在每次异步回发时都被完全替换。您需要重新绑定任何受影响的元素。

$(document).ready在处理更新面板时还不够好。它只会在第一个页面加载时调用（而不是在UpdatePanel刷新之后）。解决方案是为您的配置代码挂钩到 ASP.NET 的 ajax 体系结构。

无论您使用什么代码来配置 ThickBox 和 jGrowl 链接，请在此处添加：

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    // page config code
});

这会在 ASP.NET 客户端生命周期结束时调用，因此请将您的配置代码用于其中的任何内容UpdatePanel。如果您有多个 UpdatePanel，您可以测试哪些已更新（google add_endRequest）。然而，使用客户端标记状态来确定您是否需要配置某些东西通常更容易，或者只使用配置代码，如果针对相同的标记运行两次也不会破坏事情。

使用 jquerylive也是一种选择，但它并不适用于所有情况。

于 2011-09-26T14:53:21.437 回答
2

我相信您的问题与 jGrowl 无关，而与您对 UpdatePanel 的使用有关。

当您使用 UpdatePanel 时，它会刷新 DOM 中包含的所有元素。这意味着<a>在页面中创建的原始标签，并将其点击事件设置为使用thickbox 不再存在。UpdatePanel 刷新后，您现在有了一个 NEW<a>标记，该标记具有thickbox 类，但尚未“初始化”（因为thickbox 在页面加载期间设置了点击处理程序，这在部分回发期间不会像往常一样发生）。因此，当您单击链接时，它就像一个普通链接。

有几种方法可以解决此问题，具体取决于您的情况。

选项 1：根据您上面粘贴的代码，在您的回发处理期间，看起来与链接相关的任何实际更改都没有。所以也许你可以把你<div><a ...></a> </div>的更新面板移到外面，只留下里面的按钮。这会将您的链接保留为页面的一部分，并且仍将附加其厚盒处理程序。

选项 2：如果出于某种原因您不能使用选项 1，那么您可以设置一些 javascript 在加载 UpdatePanel 期间运行，以重新附加链接的点击处理程序。在调用 jGrowl 的函数中，尝试添加tb_init('a.thickbox');到您的代码中。

选项3：您可以修改thickbox.js 文件以使用jQuery 的实时处理程序而不是普通的点击处理程序。在tb_init函数中，您可以将其更改为$(domChunk).live('click', function(){..}). 我认为这会起作用，尽管更新面板过程可能仍会阻止它。

希望这可以帮助。

于 2011-09-26T14:40:30.533 回答
1 
protected void Button1_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.Page, typeof(Page), Guid.NewGuid().ToString(),
            "$.jGrowl('My Message');", true);
}
于 2011-09-20T02:36:02.017 回答