Najlepszy sposób przechwytywania odsuwania przycisku od przycisku

Question

Widziałem inne rozwiązania, takie jak this, które są dość proste, ale co, jeśli funkcja javascript ma więcej niż tylko confirm('sure?');? Nigdy nie wiem, kiedy zwróci bool.

Więc zdecydowaliśmy się wdrożyć wszystkie moje ASP.NET przyciski tak:

<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) %>; 
}); 

..i to działa dobrze przez jakiś czas aż do teraz. Występują problemy w IE (nawet wersja 10) - _btnDelete_Click zajmie do 2 minut, aby zostać wywołanym po kliknięciu przycisku, który ostatecznie wyzwala.

Czuje się zbyt hacky i zastanawiałem się, czy istnieje lepsze podejście.

edit:here jest kolejnym „poprawny” sposób to zrobić, ale chcę, aby móc korzystać z bardziej wyszukane okno modalne i mieć to powrót prawdziwego na „tak” kliknij, zamiast okna natywną potwierdzić przeglądarce .

Edit2: Przypuszczam co pytam, czy istnieje sposób, aby powrócić bool dla funkcji OnClientClick że nie więcej niż jedna rzecz

Answer 1

Jeśli ręcznie wywołać kliknij zdarzenie w skrypcie klienckim swoje aplikacja nie będzie mogła poprawnie działać z przyciskiem Go w przeglądarce mobilnej.

Oto w jaki sposób można przechwycić po stronie serwera kliknij Event bez przycisku ręcznego wyzwalania przez siebie na stronie klienta.

<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();" /> 

Możesz zrobić wiele fantazyjnych rzeczy z ASP.Net MVC. Jednak stwarzają one duży problem w tradycyjnej ASP.Net.

Answer 2

Jeśli chcesz pokazać hodowcy okno modalne, można użyć widget dialogowego jQuery UI. Aby być w zgodzie ze swoim przykładzie, zapoznaj następujący kod dla elementu body formie przykładem internetowej:

<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> 

Kod za związane z kontrolą „_btnDelete” (metoda „_btnDelete_ServerClick”) będą wykonywane tylko w przypadku, gdy kliknij przycisk "Tak" w modalnym oknie dialogowym, które zostanie wyświetlone po naciśnięciu przycisku "Usuń". Nie zapomnij dodać plik CSS jQuery UI do sekcji head:

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

Answer 3

stłumione wspomnienia budzą - Walczyłem tę samą bitwę z ASP.NET Webforms 3,5 roku temu. Musieliśmy wykonać wywołania ajax w ramach siatki, naciskając enter i pokazując modalne okno dialogowe, aby potwierdzić zamówienie w przypadku, gdy produkt miał jakieś uwagi (jak odnowione itd.).

Przeglądając niektórych starych fragmentów kodu znalazłem wszelkiego rodzaju javascript, aby zapobiec domyślne i przepuszczając

// 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;    
    } 
} 

i html/asp jak ten

<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" /> 

skończyło się tylko przy użyciu standardowych przycisków html i unikałem asp: Button, ponieważ było to mniej kłopotów z walką z wszystkimi wbudowanymi funkcjami i magicznymi postaciami internetowymi asp.net.

Jeśli pominiesz przycisk asp :, jest to opcja dla Ciebie, naprawdę mogę ją polecić.