JavaScript를 통한 부분 포스트 백 동안 BlockUI

추가 처리를 위해 OpenForm2() js 함수를 통해 모달 대화 상자 WebForm2를 여는 ASP.NET 페이지 (WebForm1)가 있습니다. 대화 상자를 닫으면 JavaScript를 통해 UpdatePanel을 업데이트합니다. 이제 문제는이 js 호출 중에 이 UI를 차단하지 않는다는 것입니다.JavaScript를 통한 부분 포스트 백 동안 BlockUI

이것은 서버 측 (Button1_Click)에서 OpenForm2 js 메서드를 호출 할 때만 발생합니다. UI가 이미 블록 모드로 들어감에 따라 WebForm2를 닫을 때 부분 재 게시 (JavaScript)가 완료 될 때까지 기다리지 않고 UI를 차단 해제합니다.

단추의 OnClientClick 태그 (예제의 단추 2)에서 OpenForm2 js 함수를 직접 호출하면 제대로 작동하고 다시 게시가 완료 될 때까지 UI가 계속 차단됩니다.

add_endRequest에서 부분 포스트 백 js 코드를 래핑하려고했지만 그 경우 refreshUpdatePanel() js 메서드를 계속 호출하므로 UI가 블로킹/블럭킹 해제됩니다. 이 경우 페이지에 두 개의 add_endRequest가 사용되어이 문제가 발생할 수 있습니까?

이 점에 대해 많은 도움을 얻었습니다.

참고 : 부분 게시 중 페이지를 차단하기 위해 jQuery blockUI를 사용했습니다.

WebForm1 페이지의 코드 샘플은 다음과 같습니다. (WebForm2 aspx 페이지에는 대화 상자와 관련된 js 기능을 닫기위한 단추가 있습니다.)

는

<head runat="server"> 
    <title></title> 
    <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script> 
    <script src="js/jquery.blockUI.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     function OpenForm2() { 
      var url = "WebForm2.aspx"; 
      var width = 950; 
      var height = 455; // screen.availHeight - (120 + 65); 

      // open modal dialog 
      obj = window.showModalDialog(url, window, "dialogWidth:" + width + "px; dialogHeight:" + height + "px; center:yes"); 

      // partial postback to reflect the changes made by form2 
      refreshUpdatePanel(); 
      //Sys.WebForms.PageRequestManager.getInstance().add_endRequest(refreshUpdatePanel); 
      // ** here it doesn't wait for the completion and unblocks the UI ** 
     } 

     function refreshUpdatePanel() { 
      //window.__doPostBack('UpdatePanel1', '1'); 
      // a timeout/delay before a client side updatepanel postback. That compelled the UI to go in blocking again with a little screen flickering. 
      setTimeout('__doPostBack("<%= UpdatePanel1.ClientID %>", "1")', 0); 
     } 

     $(document).ready(function() { 
      var prm = Sys.WebForms.PageRequestManager.getInstance(); 
      prm.add_initializeRequest(InitializeRequest); 
      prm.add_endRequest(EndRequest); 

      $.blockUI.defaults.css = {}; 
      function InitializeRequest(sender, args) { 
       // Whatever you want to happen when the async callback starts 
       $.blockUI(); 
      } 
      function EndRequest(sender, args) { 
       // Whatever you want to happen when async callback ends 
       $.unblockUI(); 
      } 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    <asp:Label ID="Label1" runat="server" Text=""></asp:Label> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load"> 
     <ContentTemplate> 
      <asp:Label ID="Label2" runat="server" Text=""></asp:Label><br /> 
      <asp:Button ID="Button1" runat="server" Text="Button 1" OnClick="Button1_Click" /> 
      <asp:Button ID="Button2" runat="server" Text="Button 2" OnClientClick="OpenForm2();return false;" /> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
    </form> 
</body>

WebForm1.aspx.cs로

protected void Button1_Click(object sender, EventArgs e) 
{ 
    // some server side processing here 
    System.Threading.Thread.Sleep(1000); 

    // then calling javascript function to open form2 as modal 
    ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "Button1Click", "OpenForm2();", true); 
} 

protected void UpdatePanel1_Load(object sender, EventArgs e) 
{ 
    string parameter = Request["__EVENTARGUMENT"]; 
    if (parameter == "1") 
    { 
     System.Threading.Thread.Sleep(3000); 
     Label2.Text = DateTime.Now.ToString(); 
    } 
}

출처

2013-02-21 Khadim Ali

나는이 문제에 대한 해결책을 찾을 수 없습니다 감사합니다. 하지만 임시 해결책으로 클라이언트 측 updatepanel 포스트 백 (postback) 전에 타임 아웃/지연을 두었습니다. 이로 인해 UI는 약간의 화면 깜박임으로 다시 차단해야했습니다. 위의 샘플에서 refreshUpdatePanel() js 메서드의 코드 줄을 업데이트했습니다. –

사용 WebForm1.aspx를

function refreshUpdatePanel() { 
     __doPostBack"<%= UpdatePanel1.ClientID %>", '1'); 
    }

대신

function refreshUpdatePanel() { 
     window.__doPostBack('UpdatePanel1', '1'); 
    }

는

출처

2013-02-21 09:31:40

아니요, 문제되지 않습니다. 방금 제안 된 수정 사항을 확인했습니다. 그러나 UpdatePanel의 ID가 동일하게 유지된다는 점도 페이지 소스에서 확인했습니다. –

JavaScript를 통한 부분 포스트 백 동안 BlockUI

답변

관련 문제