7

我在更新面板中有一个网格视图。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。但似乎这仍然会在第一次打开对话框，并且一旦您第二次单击它，才会显示数据。

4

4 回答 4

3

我有很多关于 jQuery awesomeness 和 UpdatePanels 的问题。试试这个方法：

  1. 将您用于对话框的 div 放在更新面板之外。不要在后面的代码中创建对话框。而是在页面加载时创建对话框。由于您的对话框位于更新面板之外，因此不会被破坏。确保不要自动打开它。
  2. 向您的对话框 div 添加一个额外的 div 以保存您的内容。
  3. 创建一个javascript函数
    • 清除对话框中任何先前内容的内容 div 的内容
    • 将控件附加gvLog到对话框内容 div，类似于$('#dialogContent').append($('#<%= gvLog.ClientID %>'));
    • 显示对话框
  4. 现在在你后面的代码中调整 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>
于 2012-07-06T15:18:58.417 回答
0

看到这个

尝试添加呼叫$('#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);

高温高压

于 2012-06-30T12:46:35.403 回答
0

对于您的问题，有一个非常棘手的解决方案，它将使您免于更新面板和 jquery 的所有麻烦。

首先，我们将不依赖 RegisterClientScriptBlock 函数，而是通过隐藏字段完成所有操作。

  1. 创建一个隐藏字段，该字段将标记是否显示显示对话框。
  2. 创建一个 javascript 函数来检查隐藏字段是否具有值。如果隐藏字段有值，则显示显示对话框并依赖隐藏字段获取数据，否则不显示对话框，这将解决回发显示对话框的问题。
  3. 将动画扩展器添加到更新面板

<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="UpdatePanel1" runat="server"> <Animations> <OnUpdated> <Parallel duration="0">
<ScriptAction Script="YouFunctionCall();" /> </Parallel> </OnUpdated> </Animations> </cc1:UpdatePanelAnimationExtender>

并在此 javascript 函数结束时清除隐藏字段。

那么会发生什么，在回发时，javascript将运行以检查标志是否设置，它会发现标志为空，当您在更新面板内单击时，您的服务器端代码将运行并设置隐藏字段标志和所需的任何其他信息，然后更新面板动画扩展器将在更新面板更新后运行 javascript 函数，并检查隐藏字段并发现它填充了数据，并将触发显示对话框，然后重置标志以便任何其他回发不会显示对话框。

于 2012-07-10T13:19:16.247 回答
0

在打开对话框之前尝试修改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);
于 2012-07-06T11:00:21.120 回答