<ItemTemplate>
<asp:LinkButton ID="hlSortOrder" runat="server" CssClass="hlDialog" OnClick="LoadLog"
Text='<%# DataBinder.Eval(Container,"DataItem.SortOrder") %>'></asp:LinkButton>
</ItemTemplate>
当有人点击链接按钮时,我调用我创建的名为LoadLog的OnClick方法.
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,“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.但是看起来这仍然是第一次打开对话框,一旦你第二次单击它就会显示数据.
解决方法
>将用于对话框的div放在更新面板之外.不要在后面的代码中创建对话框.而是在页面加载时创建对话框.由于您的对话框在updatepanel之外,因此不会被破坏.确保不要自动打开它.
>在对话框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(),"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,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>
