第一次打开 jquery 对话框时出现奇怪的问题（在 asp.net gridview 中）
Posted
技术标签:
【中文标题】第一次打开 jquery 对话框时出现奇怪的问题（在 asp.net gridview 中）【英文标题】：strange issue when opening jquery dialog for first time (within asp.net gridview) 【发布时间】：2012-06-28 23:49:06 【问题描述】：我在更新面板中有一个网格视图。 gridview 中的字段之一是 ASP.net linkbutton，如下所示：
<ItemTemplate>
<asp:LinkButton ID="hlSortOrder" runat="server" CssClass="hlDialog" OnClick="LoadLog"
Text='<%# DataBinder.Eval(Container, "DataItem.SortOrder") %>'></asp:LinkButton>
</ItemTemplate>
当有人单击链接按钮时，我调用我创建的 OnClick 方法，称为 LoadLog。
LoadLog 看起来像这样：
protected void LoadLog(object sender, EventArgs e)
GridViewRow gr = (GridViewRow)((DataControlFieldCell)((LinkButton)sender).Parent).Parent;
Label l = (Label)gr.FindControl("lblID");
DataSet ds;
ds = BL.GetRunoffAnswerLog(Convert.ToInt64(l.Text));
if (ds != null)
if (ds.Tables[0].Rows.Count == 0)
gvLog.Visible = false;
gvLog.DataSource = null;
lblRowsCount.Text = "No log for this record!";
else
lblRowsCount.Text = ds.Tables[0].Rows.Count.ToString() + " row(s) found for this record.";
gvLog.DataSource = ds.Tables[0];
gvLog.DataBind();
gvLog.Visible = true;
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "openDialog", "$('#dialog').dialog(draggable: true, modal: true, height: 500, width: 750, title: 'Log', open: function (type, data) $(this).parent().appendTo('form'););", true);
基本上，它获取网格视图行的句柄，从数据库中拉回一些数据并将其分配给 gvLog 源。之后注意最后一行：
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "openDialog", "$('#dialog').dialog(draggable: true, modal: true, height: 500, width: 750, title: 'Log', open: function (type, data) $(this).parent().appendTo('form'););", true);
我必须这样做才能打开我的对话框。当我第一次点击我的gridview中的一行时，我得到这个：
请注意，它只真正显示了标题……很奇怪。但是一旦我再次单击同一行，它就会显示整个对话框：
它只发生在第一次点击时，如果我继续点击不同的行它工作正常。我应该补充一点，我必须添加以下 jquery 代码：
<script type="text/javascript">
$(document).ready(function ()
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function ()
$("#dialog").hide();
// re-bind your jQuery events here
);
....more code...
基于此讨论：jQuery $(document).ready and UpdatePanels?
如果我在回发的那一刻没有该代码，则此对话框所在的整个 div 总是显示在我的页面上，我不希望那样...
正如以下成员之一所提到的。我相信发生的事情是您第一次单击链接按钮时，客户端事件首先发生，即打开实际打开的对话框，即使我在服务器端代码中引发此事件......如上所示，仅当您单击“LoadLog”事件点击我注册这个jquery opendialog。但看起来这仍然会在第一次打开对话框，并且一旦您第二次单击它，才会显示数据。
【问题讨论】：
你能展示你的布局的完整结构吗？ “表单”元素在哪里？此外，看到一个活生生的例子会非常有用。那肯定会有很大帮助。无论如何你可以提供一个例子吗？ 您是否尝试过在没有UpdatePanel 的情况下执行此操作，即进行完整的回发？
@Anchit - 没有更新面板根本不会显示对话框...记住这是 jquery 和 asp.net。
在您的页面上放置一个<asp:Label ID="MyScriptLabel" runat="server"/> 并尝试将此标签的Text 属性设置为您的jQuery 代码。
Anchit 你所描述的对我来说是不可行的。
【参考方案1】：
我有很多关于 jQuery awesomeness 和 UpdatePanels 的问题。试试这个方法：
-
将用于对话框的 div 放在更新面板之外。不要在后面的代码中创建对话框。而是在页面加载时创建对话框。由于您的对话框位于更新面板之外，因此不会被破坏。确保不要自动打开它。
向您的对话框 div 添加一个额外的 div 以保存您的内容。
创建一个 JavaScript 函数
清除对话框中任何先前内容的内容 div 的内容
将
gvLog 控件附加到对话框内容div，类似于$('#dialogContent').append($('#<%= gvLog.ClientID %>'));
显示对话框
现在在您后面的代码中调整 RegisterClientScriptBlock 以调用这个新的 javascript 函数。
示例代码背后的代码：
public partial class _Default : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
if (!Page.IsPostBack)
//load in some dummy data
Dictionary<int, string> vals = new Dictionary<int, string>()
1, "ONE",
2, "TWO",
3, "THREE",
4, "FOUR",
5, "FIVE",
6, "SIX"
;
gvData.DataSource = vals;
gvData.DataBind();
protected void LoadLog(object sender, EventArgs e)
LinkButton lb = (LinkButton)sender;
var key = lb.CommandArgument;
Random r = new Random();
Dictionary<int, int> dict = new Dictionary<int, int>();
for (int i = 0; i <= r.Next(5, 20); i++)
dict.Add(r.Next(), r.Next());
gvLog.DataSource = dict;
gvLog.DataBind();
//show log in dialog on client
ScriptManager.RegisterStartupScript(up, up.GetType(), "openDialog", "showLog();", true);
设计师代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<link href="ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function ()
//setup dialog
$('#dialog').dialog(draggable: true,
modal: true,
height: 500,
width: 750,
title: 'Log',
autoOpen: false);
);
function showLog()
//clear any old log data
$('#dvContent').empty();
//append current log
$('#<%= gvLog.ClientID %>').appendTo($('#dvContent'));
//show dialog
$('#dialog').dialog('open');
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sp" runat="server" />
<div>
<asp:UpdatePanel ID="up" runat="server">
<ContentTemplate>
<asp:GridView ID="gvData" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lbShowLog" runat="server" Text="Show Log"
OnClick="LoadLog" CommandArgument='<%# Eval("Key") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div style="display:none;">
<asp:GridView ID="gvLog" runat="server">
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="dialog" style="display:none;">
<div id="dvContent">
</div>
</div>
</form>
</body>
</html>
【讨论】：
这个答案+1。我在使用 UpdatePanels 时也遇到了很多麻烦——直到我将它们从页面中删除，并将纯 HTML 控件与 jQuery、jQueryUI 和 AJAX 调用结合使用。因为 UpdatePanel 会自己生成大量 JavaScript 代码，所以会产生副作用。 @oJM86o - 让我知道这个更新的答案是否对您有用。希望示例代码能为您指明正确的方向。【参考方案2】：对于您的问题有一个非常棘手的解决方案，可以让您免于更新面板和 jquery 的所有麻烦。
首先，我们将不依赖 RegisterClientScriptBlock 函数，而是通过隐藏字段完成所有操作。
-
创建一个隐藏字段，用于标记是否显示显示对话框。
创建一个 javascript 函数来检查隐藏字段是否有值。
如果隐藏字段有值，则显示显示对话框并依赖隐藏字段获取数据，否则不显示对话框，这将解决回发显示对话框的问题。
向更新面板添加动画扩展器
<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="UpdatePanel1" runat="server">
<Animations>
<OnUpdated>
<Parallel duration="0">
<ScriptAction Script="YouFunctionCall();" />
</Parallel>
</OnUpdated>
</Animations>
</cc1:UpdatePanelAnimationExtender>
并在此 javascript 函数结束时清除隐藏字段。
那么会发生什么，在回发时，javascript 将运行以检查标志是否设置，它会发现标志为空，当您在更新面板内单击时，您的服务器端代码将运行并设置隐藏字段标志和所需的任何其他信息，然后更新面板动画扩展器将在更新面板更新后运行 javascript 函数，并检查隐藏字段并发现它已填充数据并触发显示对话框，然后重置标志所以任何其他回帖都不会显示对话框。
【讨论】：
这对于我想要完成的事情来说似乎有点太多了。【参考方案3】：在打开对话框之前尝试修改你的 DOM
在代码中：
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "openDialog", "$(this).parent().appendTo('form');
在 JS 中：
$('#dialog').dialog(draggable: true, modal: true, height: 500, width: 750, title: 'Log', true);
【讨论】：
你发的是我已经有的，你的和我的到底有什么区别？？？ 但是你有没有尝试我的建议，我的错误是把原始代码留在里面。但是仅仅因为你没有得到信息就给-1，感觉很苛刻。无论如何适应了我之前忘记的内容 我认为您的客户端 opendialog 点击发生在您的服务器端代码之前，所以基本上您只会在第二次点击时看到详细信息 我该如何解决这个问题。 不确定这是否能解决问题，但请尝试将您的代码包装在一个 document.ready 中，如下所示：ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "openDialog", "$(function() $('#dialog').dialog(draggable: true, modal: true, height: 500, width: 750, title: 'Log', open: function (type, data) $(this).parent() .appendTo('form');););", true);【参考方案4】：见this
尝试添加对$('#dialog').dialog('open')的呼叫
您对$('#dialog').dialog([Parmas]) 的第一次调用可能是创建它但没有打开它。
类似这样的：
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "openDialog", "$('#dialog').dialog(draggable: true, modal: true, height: 500, width: 750, title: 'Log', open: function (type, data) $(this).parent().appendTo('form'););$('#dialog').dialog('open');", true);
HTH
【讨论】：
不幸的是，这与我遇到的问题相同...当它第一次打开时，它没有显示任何数据...以上是关于第一次打开 jquery 对话框时出现奇怪的问题（在 asp.net gridview 中）的主要内容，如果未能解决你的问题，请参考以下文章
使用带有 BorderLayout.CENTRE 定位的 Dialog.showPacked() 时出现奇怪的 LWUIT 对话框行为