在带有 ASP.NET 回发问题的 JQuery 对话框中加载动态数据答案

【问题标题】：Loading dynamic data in JQuery Dialog with ASP.NET postback issue在带有 ASP.NET 回发问题的 JQuery 对话框中加载动态数据
【发布时间】：2012-04-17 03:51:22
【问题描述】：

我很清楚之前在 SO 上已经提出和讨论过我遇到的问题，但我已经阅读了无数次，但没有一个真正帮助我解决了我的问题。我正在使用 Visual Studio、ASP.NET 和 C#。

这就是我想要做的事情：我有一个 JQuery 对话框，里面有一个标签。我也有一个按钮。当按下该按钮时，我想跳入按钮的单击事件并为 JQuery 对话框中的标签设置文本。然后我希望打开对话框，显示带有刚刚在我的按钮的单击处理程序中设置的文本的标签。

这是我的 JQuery 对话框中应该包含的内容（请注意，我已经为这个问题简化了代码）：

<div id="dialog" title="Basic dialog">
<asp:Label ID="Label1" runat="server" ></asp:Label>
</div>

在我的页面上，我有一个带有 onClick 事件的 ASP.NET 按钮。在后面的代码中，在我的按钮的单击事件中，我为 Label1 设置了文本。

这是我的按钮：

<asp:LinkButton ID="testButton" runat="server" onClick="button_Click" text="click me"/>

这是点击处理程序背后的代码：

protected void button_Click(object sender, EventArgs e)
{
    Label1.Text = "Hello";
}

这实际上工作，但不是我想要的。

我的问题：由于某种原因，标签的文本仅在我按下按钮的 SECOND 时设置。这意味着，当我第一次单击按钮时，对话框打开，不显示任何内容，然后对话框消失并且页面回发。第二次按下按钮时，我看到已为标签设置了文本，但随后对话框立即消失，页面回发。

我尝试将以下内容添加到我的按钮：OnClientClick="return false;" 当我这样做时，回发问题消失了，但现在我的按钮的点击事件没有触发。

我还尝试将以下内容添加到我的脚本中：event.preventDefault();这会导致与 return false; 相同的问题，页面不会回发，只是不会跳转到按钮的单击事件。

这是我的对话脚本：

<script>
 $(function () {

     $('#dialog').parent().appendTo($("form:first"))

     $("#dialog").dialog(
        {
            autoOpen: false,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
                     } 

     );

     $("#testButton")
        .button()
        .click(function openConfirmDialog() {

            $("#dialog").dialog("open")


        });

 });
</script>

基本上我要做的就是单击一个按钮来设置标签的文本，打开一个对话框，并保持该对话框打开，直到用户关闭它。

我可能遗漏了一些东西，但让我惊讶的是，做一件我想做的简单的事情是多么困难。

亲切的问候，简

【问题讨论】：

你在使用 UpdatePanels 吗？
我不是......我不明白为什么我需要他们做我想做的事？
你没有。我通常只是看到与部分回发和 UpdatePanel 相关的这个问题。
$('#dialog').parent().appendTo($("form:first")) 指的是什么？我没有看到可以解释这一点的标记。
我阅读了 LinkButton 的 MSDN 参考资料，我的理解是，通过设计，当点击 LinkButton 时会导致回发到服务器。看来这不是你想要的？为什么不直接避免回发并使用 jquery ajax 调用您的服务器来检索文本呢？

标签： c# jquery asp.net

【解决方案1】：

当通过单击按钮控件回发页面时，对话框会刷新并关闭。您需要实现一种方法来在页面回发时显示对话框，其中包含数据。

i：第一步在代码后面创建一个变量。例如

 protected string PostBackOption ="";

ii：当页面在页面加载或页面预渲染事件中回发时，添加检查以设置对话框选项文本。例如

if (Page.IsPostBack)
{
   PostBackOption = "$(\"#dialog\").dialog(\"open\");";
}

iii：现在在 javascript 中调用这个变量，如下所示。

<script>
        $(function () {

            $('#dialog').parent().appendTo($("form:first"))

            $("#dialog").dialog(
                {
                    autoOpen: false,
                    buttons: {
                        "Ok": function () {
                            $(this).dialog("close");
                        }
                    }
                }

             );

                $("#<%= testButton.ClientID %>")
            .button()
            .click(function openConfirmDialog() {

                $("#dialog").dialog("open")


            });
            <%=PostBackOption %>
        });

现在当你点击点击我按钮时，页面将回发，回发后对话框不会出现，标签将正确填充文本“hello”。

【讨论】：

【解决方案2】：

我创建了一个简单的例子，根据你的标签包含一个值来决定是否autoOpen。由于页面刷新，对话框消失。如果您想消除回发整个页面，您可以使用 UpdatePanels，或者您可以执行以下操作：

HTML 和 jQuery：

<!DOCTYPE html>

<html>
<head runat="server">
    <meta charset="utf-8" />
    <title>jQuery Dialog Demo</title>
    <link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/cupertino/jquery-ui.css" />
</head>
<body>
    <form runat="server">
        <div id="dialog" title="Basic dialog" style="display: none;">
            <asp:Label ID="Label1" runat="server"></asp:Label>
        </div>
        <asp:LinkButton ID="testButton" runat="server" onClick="button_Click" text="click me"/>
    </form>

    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
    <script type="text/javascript">
        var $labelText = $("#Label1").html().trim(),
            $dialog = $("#dialog").dialog({
                autoOpen: $labelText.length,
                buttons: { "Ok": function () { $(this).dialog("close"); } }
             });

         $("#testButton").button().click(function() { 
            if ($labelText.length) $dialog.dialog("open");
         });
    </script>
</body>
</html>

C# 代码隐藏：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class test6 : System.Web.UI.Page
{
    protected void button_Click(object sender, EventArgs e)
    {
        Label1.Text = "Current time in ticks: " + DateTime.Now.Ticks.ToString();
    }
}

输出：

【讨论】：

【解决方案3】：

您的标签已添加到表单中，无需将对话框添加到表单中。 ASP.Net 只接受放在<form runat="server"> 标记中的控件。

【讨论】：