c# - 在 JQuery 对话框中加载动态数据并出现 ASP.NET 回发问题

Question

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

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

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

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

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

这是我的按钮:

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

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

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

这实际上有效，但不是我想要的那样。

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

我尝试将以下内容添加到我的按钮中: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>

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

我可能会错过一些东西，但令我惊讶的是，做我想做的简单事情是多么困难。

亲切的问候， 简

Answer 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”。