jQuery模式弹出确认 - 处理服务器端回发

Question

我试图在点击一个asp：按钮控件后运行确认消息的模式弹出窗口。我使用http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/的教程作为基础。

目前我有客户端操作工作和模式弹出与我的消息和确认按钮。

我遇到的问题是与设置doPostBack为Yes按钮：

__doPostBack([button I want to target], ''); 

我试着使用：

<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button123))%>; 

为doPostBack命令查找按钮控制。这个方法的问题是，在我有一个加载模式的选项之前，它会触发回发。

使用从上面的“GetPostBackEventReference”

__doPostBack('ctl00$ContentPlaceHolderBody$Button123', ''); 

我能够点击的模式是经过回发到正确的服务器onClick事件返回的硬编码doPostBack。

我想知道如何使用ClientScript.GetPostBackEventReference方法，而不是回显之前显示模式或替代这一点。

任何帮助，将不胜感激。

下面是代码：

<asp:Button ID="Button123" runat="server" Text="Test" OnClick="Ctl_ButtonUpdateRecord_Click" /> 

$(document).ready(function() { 

    $("input[id$='Button123']").click(function() { 

     $.confirm({ 
      'title': 'Delete Confirmation', 
      'message': 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?', 
      'buttons': { 
       'Yes': { 
        'class': 'blue', 
        'action': function() { <%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button123))%>; 
              //__doPostBack('ctl00$ContentPlaceHolderBody$Button123', ''); 
              } 
       }, 
       'No': { 
        'class': 'gray' 
       } 
      } 
     }); 

     return false; 

    }); 

}); 

(function ($) { 

    $.confirm = function (params) { 

     if ($('#confirmOverlay').length) { 
      // A confirm is already shown on the page: 
      return false; 
     } 

     var buttonHTML = ''; 
     $.each(params.buttons, function (name, obj) { 

      // Generating the markup for the buttons: 

      buttonHTML += '<a href="#" class="button ' + obj['class'] + '">' + name + '<span></span></a>'; 

      if (!obj.action) { 
       obj.action = function() { }; 
      } 
     }); 

     var markup = [ 
      '<div id="confirmOverlay">', 
      '<div id="confirmBox">', 
      '<h1>', params.title, '</h1>', 
      '<p>', params.message, '</p>', 
      '<div id="confirmButtons">', 
      buttonHTML, 
      '</div></div></div>' 
     ].join(''); 

     $(markup).hide().appendTo('body').fadeIn(); 

     var buttons = $('#confirmBox .button'), 
      i = 0; 

     $.each(params.buttons, function (name, obj) { 
      buttons.eq(i++).click(function() { 

       // Calling the action attribute when a 
       // click occurs, and hiding the confirm. 

       obj.action(); 
       $.confirm.hide(); 
       return false; 
      }); 
     }); 
    } 

    $.confirm.hide = function() { 
     $('#confirmOverlay').fadeOut(function() { 
      $(this).remove(); 
     }); 
    } 

})(jQuery); 

Answer 1

一个简单的解决方案将是使用由ajaxtoolkit提供的ModalPopup。 Here a sample.

或者你也可以这样做：

'action': function() { $('#<%= btnDelete.ClientID %>').click(); } 

Answer 2

你确定你正在做的一切是正确的，我刚刚试了一下，像这样，它工作正常：

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 

<asp:Button ID="btnDelete" runat="server" Text="Test" onclick="btnDelete_Click" style="display: none" /> 
<input type="submit" value="Test" id="Button123"> 
<script type="text/javascript"> 

$(document).ready(function() { 

    $("input[id$='Button123']").click(function() { 

     $.confirm({ 
      'title': 'Delete Confirmation', 
      'message': 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?', 
      'buttons': { 
       'Yes': { 
        'class': 'blue', 
        'action': function() { <%= Page.ClientScript.GetPostBackEventReference(new PostBackOptions(btnDelete))%>; } 
       }, 
       'No': { 
        'class': 'gray' 
       } 
      } 
     }); 

     return false; 

    }); 

}); 

</script> 

</asp:Content> 

Answer 3

我随身携带一段简单的代码，我希望可以帮助你。在这个例子中，我使用了也可以自定义的JQuery UI对话框小部件（http://jqueryui.com/demos/dialog/）。

脚本代码：

<script language="javascript" type="text/javascript"> 
    function ConfirmDelete(controId, arg) { 
     var $dialogConfirmDelete = $('<p><span class="ui-icon ui-icon alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure you want delete the record?</p>') 
     .dialog({ 
      title: 'Title', 
      resizable: false, 
      height: 160, 
      modal: true, 
      autoOpen: false, 
      buttons: { 
       'OK': function() { 
      __doPostBack(controId, ''); 
        $(this).dialog("close"); 
       }, 
       'Cancel': function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

    $($dialogConfirmDelete).parent().appendTo($("form:first")); 

     return $dialogConfirmDelete.dialog(arg); 
    } 

    $(document).ready(function ($) { 
     ConfirmDelete(null); 
    }) 

</script> 

ASPX代码：

<asp:Button ID="btnDeleteRecord" runat="server" Text="Delete record" OnClientClick="javascript:ConfirmDelete(this.name,'open');return false;" onclick="btnDeleteRecord_Click" /> 

C＃代码背后：

/// <summary> 
/// delete record 
/// </summary> 
/// <param name="sender"></param> 
/// <param name="e"></param> 
protected void btnDeleteRecord_Click(object sender, EventArgs e) 
{ 
    //Delete record 
    //... 
} 

记住框架添加到Web控件如ASP：按钮，了LinkBut​​ton，DropDownLists等。仅当属性“AutoPostBack”设置为“true”时处理回发的代码部分。
您还可以在后面的代码中输入以下简单语句（例如在Page_Load（））中：
ClientScript.GetPostBackClientHyperlink (btnDeleteRecord, "");
运行回发控制（）的技能是什么？