使用 jquery-ui 对话框作为带有 ASP:LinkButton 的确认对话框（如何调用 postbck）答案

【问题标题】：Using jquery-ui dialog as a confirm dialog with an ASP:LinkButton (how to invoke the postbck)使用 jquery-ui 对话框作为带有 ASP:LinkButton 的确认对话框（如何调用 postbck）
【发布时间】：2011-05-07 05:56:17
【问题描述】：

我想使用 jQuery UI 的对话框来实现一个确认对话框，当用户单击删除链接时显示该对话框（使用 asp:LinkButton 实现）。
我正在使用如下所示的代码（从 jquery ui 文档中复制）：

<!-- the delete link -->
<asp:LinkButton ID="btnDelete" runat="server" Text="Delete"
  OnClick="btnDelete_Click" CssClass="btnDelete"></asp:LinkButton>

<!-- the confirm-dialog -->
<div id="dialog-confirm-delete" title="Delete?" style="display:none;">
  <p>Are you sure you want to permanently deleted the selected items?</p>
</div>

<script>
$(document).ready(function () {
    // setup the dialog
    $('#dialog-confirm-delete').dialog({
        autoOpen: false,
        modal: true,
        buttons: {
          "Delete all items": function () {
                 $(this).dialog("close");
                 // ===>>> how to invoke the default action here
              },
          Cancel: function () { $(this).dialog("close"); }
        }
    });

    // display the dialog
    $('.btnDelete').click(function () {
        $('#dialog-confirm-cancel').dialog('open');
        // return false to prevent the default action (postback)
        return false;
    });

});
</script>

所以在click 事件处理程序中，我必须阻止LinkButton（回发）的默认操作，而是显示对话框。

我的问题是：如果用户单击对话框中的“删除所有项目”按钮，我该如何调用删除链接的默认操作（回发）来执行回发？

【问题讨论】：

标签： asp.net jquery-ui jquery-ui-dialog webforms

【解决方案1】：

如果您使用的是 LinkButton，您可以这样做：

__doPostBack("", "");

【讨论】：

【解决方案2】：

$('#dialog-confirm-delete').dialog({
   autoOpen: false,
   modal: true,
   buttons: {
       Cancel: function() {
           $(this).dialog("close");
       },
       "Delete all items": function() {
           $(this).dialog("close");
           // ===>>> how to invoke the default action here
       }
   }
});

【讨论】：

【解决方案3】：

尝试在此位置添加$("#yourformid").submit(); // ===>>> how to invoke the default action here。根据docs：“......表单上的默认提交操作将被触发，因此表单将被提交。”

编辑
你可以尝试做这样的事情：

$('.btnDelete').click(function (event, confirmed) {
    if (confirmed) {
        return true;
    } else {
        $('#dialog-confirm-cancel').dialog('open');
        // prevent the default action, e.g., following a link
        return false;
    }
});

然后在你的删除所有项目功能中：

"Delete all items": function () {
    $(this).dialog("close");
    $('.btnDelete').trigger("click", [true]);
},

【讨论】：

我认为这行不通。我必须调用 LinkButton 的 PostBack。
@M4N - 您是否尝试过在按钮 ID 上调用 .click() 函数？例如：$("#buttonid").click(); 您可能需要在运行时获取按钮的 ClientID 以确保 Asp.Net 不会搞砸名称。我这里没有 Asp.Net，但应该是这样的：$("#<%= btnDelete.ClientID %>").click();
不会再次触发点击事件处理程序吗？
@M4N - 好点。如果您存储了一个全局变量来判断它是否已被确认，如果已确认，则忽略打开的对话框并返回 true 怎么办？我还有另一个不需要全局变量的想法，我将在我的答案中进行编辑。

【解决方案4】：

如果您只是确认可以为按钮添加属性。

<asp:LinkButton ID="btnDelete" runat="server" Text="Delete"
  OnClientClick="if(!confirm('Are you sure?'))return false;" CssClass="btnDelete"></asp:LinkButton>

【讨论】：

或者更好return confirm("Are you sure?");。然而，M4N 表示他们为此使用了 jQuery 对话框，因此他们可能希望为所有消息框/弹出窗口保持一致的感觉。
大声笑我不记得它是什么，我已经有几年没有使用过网络表单了。我想你也可以在动作链接上做到这一点，但是如果你保持统一的外观，这是可以理解的。确认对话似乎需要做很多工作。
谢谢，但这不是一个简单的确认对话框。该对话框还包含其他元素（文本框等）。

【解决方案5】：

好的，这是我的方法（可行，但可能不是最佳解决方案）：

$(document).ready(function () {
  $('#dialog-confirm-cancel').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "Delete all items": function () {
        // invoke the href (postback) of the linkbutton,
        // that triggered the confirm-dialog
        eval($(this).dialog('option', 'onOk'));
        $(this).dialog("close");
      },
      Cancel: function () { $(this).dialog("close"); }
    }
  });

  $('.btnDelete').click(function () {
    $('#dialog-confirm-delete')
      // pass the value of the LinkButton's href to the dialog
      .dialog('option', 'onOk', $(this).attr('href'))
      .dialog('open');
    // prevent the default action, e.g., following a link
    return false;
  });
});

【讨论】：

eval()ing href 有什么作用？ href 不是 URL 吗？另外，我编辑的答案没有用吗？
@Drackir：这不是文件的路径。我想调用 LinkButton 的 PostBack，这是一个 javascript 函数调用，例如__doPostback(...)
@Drackir：是的，完全正确（这就是回发在 ASP.NET 中的工作方式）

【解决方案6】：

所以你阻止了链接的默认操作（跟随链接），对吧？所以在$(this).dialog('close'); 之后添加location.replace('path/to/file'); 可以解决您的问题。

我不确定我是否正确理解了您的问题。

【讨论】：

我没有文件路径。我想调用 LinkButton 的 PostBack（这是一个 javascript 函数调用：__doPostback(...)）

【解决方案7】：

如果您查看Project Awesome on Codeplex，它有一个确认对话框的通用实现，您可以检查您的范围。

【讨论】：