使用 jquery-ui 对话框作为带有 ASP:LinkBut​​ton 的确认对话框(如何调用 postbck) [英] Using jquery-ui dialog as a confirm dialog with an ASP:LinkButton (how to invoke the postbck)

问题描述

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

<asp:LinkBut​​ton ID="btnDelete" runat="server" Text="Delete"OnClick="btnDelete_Click" CssClass="btnDelete"></asp:LinkBut​​ton><!-- 确认对话框--><div id="dialog-confirm-delete" title="删除?"样式=显示:无；"><p>您确定要永久删除所选项目吗?</p>

<脚本>$(document).ready(function () {//设置对话框$('#dialog-confirm-delete').dialog({自动打开:假，模态:真，纽扣: {删除所有项目":function(){$(this).dialog("close");//===>>>如何在此处调用默认操作},取消: function () { $(this).dialog("close");}}});//显示对话框$('.btnDelete').click(function () {$('#dialog-confirm-cancel').dialog('open');//返回 false 以防止默认操作(回发)返回假；});});

所以在 click 事件处理程序中，我必须阻止 LinkBut​​ton(回发)的默认操作，而是显示对话框.

我的问题是:如果用户单击对话框中的删除所有项目"按钮，我该如何调用删除链接的默认操作(回发)来执行回发?

解决方案

好的，这是我的方法(可行，但可能不是最佳解决方案):

$(document).ready(function () {$('#dialog-confirm-cancel').dialog({自动打开:假，模态:真，纽扣: {删除所有项目":function(){//调用链接按钮的 href(回发)，//触发确认对话框eval($(this).dialog('option', 'onOk'));$(this).dialog("close");},取消: function () { $(this).dialog("close");}}});$('.btnDelete').click(function () {$('#dialog-confirm-delete')//将 LinkBut​​ton 的 href 值传递给对话框.dialog('option', 'onOk', $(this).attr('href')).dialog('打开');//阻止默认操作，例如，跟随链接返回假；});});

I'd like to use jQuery UI's dialog to implement a confirm dialog which is shown when the user clicks a delete-link (implemented using an asp:LinkButton).
I'm using code as shown below (copied from the jquery ui documentation):

<!-- 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>

So in the click event handler, I have to prevent the default action of the LinkButton (the postback) and instead display the dialog.

My question is: how can I then invoke the default action (the postback) of the delete link to perform the postback in case the user clicked the "Delete all items" button in the dialog?

解决方案

OK, here's my approach (it works, but it might not be the best solution):

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

这篇关于使用 jquery-ui 对话框作为带有 ASP:LinkBut​​ton 的确认对话框(如何调用 postbck)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！