Question

我很清楚我之前曾经问过和讨论过这个问题，但是我已经无数次地阅读过这些问题，但实际上没有一个能帮我解决问题。我正在使用Visual Studio，ASP.NET和C＃。

这是我想要做的事情：我有一个带有Label的JQuery对话框。我也有一个按钮。当按下该按钮时，我想跳转按钮的click事件，并在JQuery Dialog中设置标签的文本。然后我希望打开对话框，显示标签，其中包含刚刚在我的按钮的点击处理程序中设置的文本。

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

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

在我的页面上，我有一个带有onClick事件的ASP.NET按钮。在后面的代码中，在我的按钮的click事件中，我为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（）;这会导致与返回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：第一步在代码后面创建一个变量。 e.g

 protected string PostBackOption ="";

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

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”正确。

Answer 2

我创建了一个简单的示例，根据包含值的Label来决定是否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＃CodeBehind：

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();
    }
}

输出：

enter image description here

Answer 3

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

使用ASP.NET回发问题在JQuery Dialog中加载动态数据

3 个答案:

HTML和jQuery：

C＃CodeBehind：

输出：