使用jquery-ui对话框作为ASP的确认对话框:LinkBut​​ton(如何调用postbck)

时间:2010-11-09 13:11:12

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

我想使用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(回发)的默认操作,而是显示对话框。

我的问题是:如果用户点击对话框中的“删除所有项目”按钮,我怎么能调用删除链接的默认操作(回发)来执行回发?

7 个答案:

答案 0 :(得分:6)

好的,这是我的方法(它有效,但可能不是最佳解决方案):

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

答案 1 :(得分:1)

如果您没有做任何其他事情,只需确认您可以为按钮添加属性。

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

尝试在此地点$("#yourformid").submit();添加// ===>>> how to invoke the default action here。 根据{{​​3}}:“...表单上的默认提交操作将被触发,因此表单将被提交。”

修改
您可以尝试这样做:

$('.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]);
},

答案 4 :(得分:0)

所以你阻止了链接的默认动作(在链接之后),对吗?因此,在location.replace('path/to/file');之后添加$(this).dialog('close');可以解决您的问题。

不确定我是否理解你的问题。

答案 5 :(得分:0)

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

答案 6 :(得分:0)

如果您使用的是LinkBut​​ton,则可以执行以下操作:

__ doPostBack(&#34;&lt;%= lnkMyButton.UniqueID%&gt;&#34;,&#34;&#34;);