업데이트 패널없이 jQuery Asp.NET 모달 진행

Question

우리 가게/사이트에 문제가 있습니다. jQuery를 사용하여 모달에 대해 AJAXToolkitExtender를 시작합니다.
문제는 우리가 모달을 발생시키는 jQuery를 호출하는 업데이트 패널에 단추를 래핑해야한다는 것입니다. 문제는 Firefox와 Chrome에서 두 가지 이유로 다시 게시됩니다. 차례대로 서버에서 UI로 돌아가는 오류가 발생하면 장바구니가 지워집니다. 우리는 UpdatePanel을 사용할 필요없이 jQuery를 통해 호출 상태를 얻고 싶습니다. UpdatePanels는 Firefox에서 이중 게시를 다시 시도하는 것으로 알려진 문제점이 있습니다. 누구나 직설적 인 클라이언트 사이트 솔루션이나 솔루션을 사용하여 업데이트 패널을 사용하여 서버에 대한 상태 또는 호출을 가져올 필요가없고 업데이트 패널을 표시하거나 숨길 수있는 솔루션이 있습니까? 우리의 코드는 다음과 같습니다 : 당신은 실제로의 방법 때문에 더이상 UpdateProgess 컨트롤을 추가 할 필요가 없습니다 jsUpdateProgress.js

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq); 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq); 

function beginReq(sender, args) { 
    // shows the Popup 
    $find(ModalProgress).show(); 
} 

function endReq(sender, args) { 
    // hides the Popup 
    $find(ModalProgress).hide(); 
} 

Answer 1

나는 이것을 닫을 예정이다. 실제로 jQuery를 사용하여 버튼을 클릭하여 실행하거나 모달 div를 표시합니다. beginReq 또는 endReq를 기다리지 않고 그냥 모달을 실행합니다. 페이지는 포스트 백을 수행하고 jQuery에서 document.ready에 div를 숨기므로 포스트 백이 발생하면 모달이 사라집니다. 나는 당신이 페이지 초기화 작업을 할 수 있다고 생각한다. 그것이 내 해결책이다. 업데이트 패널이 필요하지 않습니다.

$(document).ready(function(){

$('#modalDiv').hide);

$('.submitBtn').click(function(){

$('#modalDiv').show(); 

});

// 페이지가 포스트 백을 수행하거나 다시로드하면 모달이 사라집니다.

});

간단합니다.

Answer 2

에서이 인 JS는 ASCX

<script type="text/javascript" language="javascript"> 
    var ModalProgress = '<%= ModalProgress.ClientID %>';   
</script> 
<script type="text/javascript" src="/Scripts/jsUpdateProgress.js"></script> 
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress"> 
     <asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server"> 

      <ProgressTemplate> 
       <div id="processingOrderProgress"> 
       <div id="processingOrderProgressText"> 
<%=GetLocaleResourceString("Museum.MuseumOrderConfirmationProcessingText")%> 
</div> 

      <img src="../App_Themes/Museum/images/museumLayout/loading.gif" alt="Processing" /> 
       </div> 
      </ProgressTemplate> 
     </asp:UpdateProgress> 
    </asp:Panel> 

    <ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress" 
     BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress" /> 

에서 당신의 jsUpdateProgress.js 파일은 이미 업데이트 진행 및 완료를 파악하기에 충분합니다.

나는 UpdateProgress와 ModalPopupExtender를 HTML div 팝업으로 대체하고 beginReq와 endReq 메소드를 사용하여이를 보여줄 것을 제안한다. 더 나은 유용성을 위해 현재 요청을 취소 할 수있는 cancelReq 메소드를 추가해야합니다.