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, "");
運行回發控制（）的技能是什麼？