단추 다시 게시를 가로 챌 수있는 가장 좋은 방법

Question

this과 같은 다른 솔루션을 보았습니다.이 솔루션은 매우 간단하지만 javascript 함수가 confirm('sure?'); 이상을 수행하면 어떻게됩니까? 나는 언제 그것이 bool을 돌려 줄 것인지 결코 모른다.

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

을 .. 그리고 지금까지 잠시 동안 잘 작동 것 :

그래서 나는이 같은 모든 내 ASP.NET 버튼을 구현하기로 결정했습니다. IE (심지어 버전 10)에서 문제가 발생합니다. _btnDelete_Click은 궁극적으로 버튼을 클릭 한 후 호출되기까지 2 분이 소요됩니다.

너무 해킹 된 느낌이 들며 더 나은 접근 방법이 있는지 궁금합니다.

편집 :here 그것을 할 수있는 또 다른 "올바른"방법입니다하지만 난 "예"오히려 브라우저의 기본 확인 대화 상자를 사용하는 것보다, 클릭 애호가 모달 대화 상자를 사용하면 true를 돌려을 할 수있게하려면 .

EDIT2 : 나는 내가 무엇인가 부탁 해요, 당신은 수동으로 클라이언트 스크립트에서 이벤트를 클릭 트리거 이상인 경우 한 가지

Answer 1

를 않는 OnClientClick 기능에 대한 부울을 반환하는 방법이있다 생각하여 응용 프로그램은 모바일 브라우저의 이동 단추로 제대로 작동하지 않습니다.

다음은 클라이언트 사이드에서 수동으로 버튼을 누르지 않고 버튼 사이드 클릭 이벤트를 차단할 수있는 방법입니다.

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

ASP.Net MVC를 사용하면 많은 것을 할 수 있습니다. 그러나 이들은 전통적인 ASP.Net에서 많은 문제점을 야기합니다.

Answer 2

환상적인 모달 대화 상자를 표시하려면 jQuery UI 대화 상자 위젯을 사용할 수 있습니다. 귀하의 예제와 일치하기 위해, 예를 들어 웹 형태의 본문 요소에 대한 다음 코드를 검토하십시오

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

제어 "_btnDelete"과 관련된 뒤에 코드 (방법은 "_btnDelete_ServerClick")는 경우에만 실행됩니다 당신 "삭제"버튼을 누른 후 모달 대화 상자에서 "예"버튼을 클릭하십시오. 헤드 섹션에 jQuery를 UI의 CSS 파일을 추가하는 것을 잊지 마세요 :

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

Answer 3

억압 된 기억이 깨어나 - 내가 3.5 년 전에 asp.net 웹 양식과 같은 싸움을했다. Enter 키를 누르고 모달 대화 상자를 표시하여 제품에 몇 가지 설명 (예 : 리퍼브 상품 등)이있는 경우 순서를 확인하여 ajax 호출을 그리드 내에서 구현해야했습니다. 오래된 코드 부분을 찾아

은 내가 난 단지 표준 HTML 버튼을 사용하여 결국 모든 기본값을 방지하기 위해 자바 스크립트의 종류와이

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

처럼

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

및 HTML/ASP를 버블 링을 발견했다 asp.net 버튼을 사용하지 않았다. 왜냐하면 asp.net 웹 폼의 모든 내장 함수와 마술을 싸우는 번거 로움이 적기 때문이다.

asp : button을 사용하지 않는 것이 좋습니다. 정말 권장할만한 옵션입니다.