2

我很清楚我遇到的问题之前已经在 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";
}

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

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

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

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

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

亲切的问候，简

4

3 回答 3

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

于 2012-04-16T19:37:49.743 回答
1

我创建了一个简单的例子来决定是否autoOpen根据你的 Label 包含一个值。由于页面刷新，对话框消失。如果您想消除整个页面的回发，您可以使用 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();
    }
}

输出：

在此处输入图像描述

于 2012-04-16T19:51:22.587 回答
0

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

于 2012-04-16T19:37:27.493 回答