Il modo migliore per intercettare un postback Button

Question

Ho visto altre soluzioni come this una che è piuttosto semplice ma cosa succede se la funzione javascript fa più di un semplice confirm('sure?');? Non so mai quando restituirà un bool.

Così ho deciso di implementare tutti i miei pulsanti ASP.NET in questo modo:

<button id="btnDelete" name="btnDelete" class="btn">Delete</button> 
<asp:Button ID="_btnDelete" runat="server" OnClick="_btnDelete_Click" style="display:none;" /> 

$('#btnDelete').click(function (e) { 
    $.blockUI({ message: $('#divConfirmDeleteModal'), overlayCSS: { cursor: 'default' }, css: { cursor: 'default' }, baseZ: 5555 }); 
    return false; 
}); 

$('#btnDeleteYes').click(function() { 
    $('#<%=_btnDelete.ClientID%>').trigger('click'); 
}); 

$('#<%=_btnDelete.ClientID%>').click(function (e) { 
    // the delay happens here. if i put an alert here, it fires, 
    // but then the page just loads until eventually the method gets called 
    <%= ClientScript.GetPostBackEventReference(_btnDelete, string.Empty) %>; 
}); 

..e ha funzionato bene per un po 'fino ad ora. Sto riscontrando problemi in IE (anche versione 10) - il _btnDelete_Click impiegherà fino a 2 minuti per essere richiamato dopo aver fatto clic sul pulsante che in ultima analisi lo attiva.

Sembra troppo hacky e mi chiedevo se c'è un approccio migliore.

edit:here è un altro modo "corretto" per farlo, ma voglio essere in grado di utilizzare una finestra di dialogo modale più elaborato e che hanno return true su un "sì" click, piuttosto che utilizzando la finestra di conferma nativo del browser .

EDIT2: Suppongo che quello che sto chiedendo è, c'è un modo per restituire un bool per una funzione OnClientClick che fa più di una cosa

Answer 1

Se si attiva manualmente cliccare evento nello script client, il tuo l'applicazione non sarà in grado di funzionare correttamente con il pulsante Go del browser mobile.

Ecco come è possibile intercettare l'evento di clic sul lato server del pulsante senza attivarlo manualmente dal lato client.

<script type="text/javascript"> 
    function clientClick() { 
     if (confirm("Are you sure you want to delete?")) { 
      // Do something at client side before posting back to server 
      return true; 
     } 
     return false; 
    } 
</script> 

<asp:Button runat="server" ID="DeleteButton" Text="Delete" 
    OnClick="DeleteButton_Click" OnClientClick="return clientClick();" /> 

Si può fare un sacco di cose stravaganti con ASP.Net MVC. Tuttavia, creano un sacco di problemi nel tradizionale ASP.Net.

Answer 2

Se si desidera mostrare una finestra di dialogo modale più elaborata, è possibile utilizzare il widget di dialogo dell'interfaccia utente jQuery. Per essere coerente con il tuo esempio, si prega di consultare il seguente codice per l'elemento del corpo di una forma ad esempio web:

<form id="form1" runat="server"> 
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 
    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> 
    <div id="deleteConfirmationDialog" title="Warning!">Are you sure you want to delete?</div> 
    <asp:Button ID="_btnDelete" runat="server" Text="Delete" OnClick="_btnDelete_ServerClick" OnClientClick="return _btnDelete_ClientClick();" /> 
</form> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
    function doPostBack(theForm, eventTarget, eventArgument) { 
     if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
      theForm.__EVENTTARGET.value = eventTarget; 
      theForm.__EVENTARGUMENT.value = eventArgument; 
      theForm.submit(); 
     } 
    } 

    function showConfirmationDialog(dialogSelector, callback, form, target) { 
     $(dialogSelector).dialog({ 
      resizable: false, 
      height: 200, 
      modal: true, 
      buttons: [{ 
       text: "Yes", 
       click: function() { 
        $(this).dialog("close"); 
        callback(form, target, null); 
       } 
      }, 
      { 
       text: "No", 
       click: function() { 
        $(this).dialog("close"); 
       } 
      }] 
     }); 
    }; 

    function _btnDelete_ClientClick() { 
     showConfirmationDialog("#deleteConfirmationDialog", doPostBack, $("#form1").get(0), "_btnDelete"); 
     return false; 
    } 

    $(document).ready(function() { 
     $("#deleteConfirmationDialog").hide(); 
    }); 
</script> 

Il codice dietro associato con il controllo "_btnDelete" (metodo "_btnDelete_ServerClick") verrà eseguito solo nel caso in cui si fare clic sul pulsante "Sì" nella finestra di dialogo modale da visualizzare dopo aver premuto il pulsante "Elimina". Non dimenticate di aggiungere il file CSS UI jQuery per la sezione di testa:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"/> 

Answer 3

ricordi rimossi sono risvegliati - stavo combattendo la stessa battaglia con ASP.NET Webforms 3,5 anni fa. Abbiamo dovuto implementare le chiamate ajax all'interno di una griglia premendo enter e mostrando una finestra di dialogo modale per confermare l'ordine nel caso in cui il prodotto avesse alcune osservazioni (come rinnovate e così via).

Navigando attraverso alcuni frammenti di codice vecchi ho trovato ogni sorta di javascript per evitare inadempienze e spumeggiante

// prevent the browser event bubbling for example posting the webform 
function stopDefault(e) { 

    if (e.preventDefault) { 
     e.preventDefault(); 
     e.stopPropagation(); 

    } else { 
     event.returnValue = false; 
     event.cancelBubble = true; 
     e.returnValue = false; 
     e.cancelBubble = true;    
    } 
} 

e html/asp come questo

<button type="button" 
    onclick="SearchProducts(event,this);">Search Products</button> 
<asp:Button ID="btnSearch" ClientIDMode="Static" runat="server" 
onclick="btnSearch_Click" 
OnClientClick="SearchProducts(event,this)" 
UseSubmitBehavior="false" 
Text="Does nothing" /> 

ho finito per usare i pulsanti solo HTML standard, ed evitava l'asp: Button perché era meno complicato combattere tutte le funzioni innate e la magia dietro le quinte dei webform di asp.net.

Se eviti asp: il pulsante è un'opzione per te, posso davvero raccomandarlo.