打开 jQuery 对话框后防止回发

发布于 2024-10-06 17:54:01 字数 1372 浏览 5 评论 0原文

页面：

<body>
 <form id="frmLogin" runat="server">  
  <asp:Button ID="btnClick" OnClientClick="openConfirmDialog();" OnClick="PopulateLabel"  runat="server"/>
  <div id="divDialog"></div>
  <asp:Label ID="lblText" runat="server"></asp:Label>
 </form>
</body>

<script type="text/javascript">
 $(document).ready(function() {
 $("#divDialog").dialog({autoOpen: false,
                     buttons: { "Ok": function()
                                      { 
                                         $(this).dialog("close");
                                      },
                                "Cancel": function()
                                      { 
                                          $(this).dialog("close");
                                      }
                              } 
                   });
 });

 function openConfirmDialog()
 {
  $("#divDialog").dialog("open");
 }

protected void Page_Load(object sender, EventArgs e)
 {
    lblText.Text = "";
 }

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

此代码打开一个带有“确定”和“取消”按钮的对话框，但它不会等待用户活动并立即发布页面并填充标签。我需要根据用户活动调用 C# 函数。如果用户单击“确定”，标签应该被填充，如果用户单击“取消”，则不应调用 c# 函数。我该如何实现这一目标？

原文

Page:

<body>
 <form id="frmLogin" runat="server">  
  <asp:Button ID="btnClick" OnClientClick="openConfirmDialog();" OnClick="PopulateLabel"  runat="server"/>
  <div id="divDialog"></div>
  <asp:Label ID="lblText" runat="server"></asp:Label>
 </form>
</body>

<script type="text/javascript">
 $(document).ready(function() {
 $("#divDialog").dialog({autoOpen: false,
                     buttons: { "Ok": function()
                                      { 
                                         $(this).dialog("close");
                                      },
                                "Cancel": function()
                                      { 
                                          $(this).dialog("close");
                                      }
                              } 
                   });
 });

 function openConfirmDialog()
 {
  $("#divDialog").dialog("open");
 }

protected void Page_Load(object sender, EventArgs e)
 {
    lblText.Text = "";
 }

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

This code opens me a dialog box with Ok and Cancel button but it do not wait for user activity and post the page immediately and the label gets populated. I need to call the c# function based on user activity. If user clicks "Ok" label should get populated and if user clicks "Cancel" it should not call the c# function. How do I achieve this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

丑丑阿 2024-10-13 17:54:01

首先，为了防止页面立即回发到服务器，您需要通过从处理程序返回 false 来取消 click 事件的默认行为：

<asp:Button ID="btnClick" runat="server" OnClick="PopulateLabel"
    OnClientClick="openConfirmDialog(); return false;" />

接下来，您需要单击 Ok 按钮时自行执行回发：

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

请注意，__doPostBack() 的第一个参数是控件的名称（其ASP.NET 术语中的 UniqueID）。由于按钮是

元素的直接子元素，因此我们可以在 __doPostBack() 调用中对其 id 进行硬编码，但是如果它驻留在容器层次结构中，将会变得更加复杂。在这种情况下，您可以使用 ClientScript.GetPostBackEventReference() 生成适当调用__doPostBack()。

编辑：由于您的页面不包含任何启用回发的控件，因此 __doPostBack() 将不会在客户端定义。要解决该问题，您可以使用 LinkButton 控件而不是按钮控制。

First, to prevent the page from immediately posting back to the server, you need to cancel the default behavior of the click event by returning false from your handler:

<asp:Button ID="btnClick" runat="server" OnClick="PopulateLabel"
    OnClientClick="openConfirmDialog(); return false;" />

Next, you need to perform the postback yourself when your Ok button is clicked:

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

Note that the first argument to __doPostBack() is the name of the control (its UniqueID in ASP.NET terminology). Since the button is a direct child of the <form> element, we can hardcode its id in the __doPostBack() call, but things will get more complicated if it resides in a container hierarchy. In that case, you can use ClientScript.GetPostBackEventReference() to generate the appropriate call to __doPostBack().

EDIT: Since your page does not contain any postback-enabled control, __doPostBack() won't be defined on the client side. To work around that problem, you can use a LinkButton control instead of a Button control.

回复收藏 0 原文