打开 jQuery 对话框后防止回发答案

【问题标题】：Prevent Postback after opening jQuery dialog box打开 jQuery 对话框后防止回发
【发布时间】：2010-12-08 07:38:52
【问题描述】：

页面：

<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# 函数。我如何做到这一点？

【问题讨论】：

标签： c# asp.net postback jquery-dialog

【解决方案1】：

首先，为了防止页面立即回传到服务器，您需要通过从处理程序返回 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）。由于按钮是<form> 元素的直接子元素，我们可以在__doPostBack() 调用中对其id 进行硬编码，但如果它驻留在容器层次结构中，事情会变得更加复杂。在这种情况下，您可以使用ClientScript.GetPostBackEventReference() 生成对__doPostBack() 的适当调用。

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

【讨论】：

__doPostBack("btnClick", "");没有调用我的 c# 函数
@Sri Kumar，你的按钮的name 属性是什么（在呈现的页面源中）？
btnClick 是我的按钮 ID，btnClick 是名称
@Sri Kumar，那应该可以，你的 PopulateLabel() 函数应该在回发时调用。你在页面的RaisePostBackEvent() 方法中做了什么特别的事情吗？
我在错误控制台“__doPostBack is not defined”中收到此错误，我阅读了此stackoverflow.com/questions/3480362/dopostback-is-not-defined，但我不明白必须添加什么控件？

【解决方案2】：

添加了另一个按钮并使用 jQuery click() 事件来触发新按钮的点击事件，这将反过来触发 C# 中的相应事件处理程序

【讨论】：