Jquery BlockUI w/Asp.net confirmer la suppression

Question

Asp.Net 3.5/WebForms (pas ajax)

Je suis en train de mettre à jour une boîte de confirmation de suppression avec jquery & UIBlock. L'ancien code ressemble à quelque chose comme ça ...

<asp:LinkButton OnClientClick="return confirm('Are you sure you want to delete?')" runat="server" ID="DeleteButton" OnClick="DeleteButton_OnClick">Delete</asp:LinkButton> 

Quelle est la meilleure pratique de reporter, puis continuer avec un postback jquery & asp.net? Je n'ai pas trouvé de façon/d'exemple/d'orientation propre à ce sujet. Dave Ward (encosia.com) a quelques exemples avec UIBlock mais aucun d'eux n'utilise UIBlock comme un popup de confirmation/modal.

Merci pour toute aide/pointeurs.

Réponse

<a href="#" id="delete"> 
    <span>Delete?</span> 
</a> 

<div id="question" style="display:none; cursor: default"> 
     <h1>Are you sure you want to delete?</h1> 
     <asp:LinkButton runat="server" Text="Yes" OnClick="DeleteButton_OnClick"></asp:LinkButton> 
     <a href="#" id="no"><span>No</span></a> 
</div> 


<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#delete').click(function(ev) { 
     ev.preventDefault(); 
     $.blockUI({ message: $('#question'), css: { width: '275px'} }); 
     }); 

     $('#no').click(function() { 
     $.unblockUI(); 
     return false; 
     }); 

    }); 
</script> 

Answer 1

Vous pouvez faire quelque chose comme ceci:

$('#DeleteButton').bind('click', function() { 

    // if confirmation button inside the form is pressed .. 
    $('#confirm_button').bind('click', function() { 
    // redirect to the page where it resolves the request  
     window.location = "http://www.site.com/?delete"; 
     // or use ajax call 
    $.ajax({ 
     // the request to delete 
    }); 
     // this one in case you choose to make ajax request 
    $.unblockUI(); 
    }); 

    $.blockUI({ 
     // form setted with display:none; in css to be trigged when delete button is clicked 
     // css here is an example 
    message: $('#delete_form'), 
    css: { 
     border: 'none', 
     padding: '15px', 
     width: '400px', 
     backgroundColor: '#000', 
     '-webkit-border-radius': '10px', 
     '-moz-border-radius': '10px', 
     color: '#fff' 
     } 
    }); 

     // cancel button inside the form, when clicked, dismiss form 
    $('#cancel').click($.unblockUI); 
     // if user clicks outside the form, it dismisses the form as well 
    $('.blockOverlay').click($.unblockUI); 
});