페이지로드 이벤트 Ajax 진행 막대 표시

Question

내 프로젝트에서 페이지로드 이벤트에 진행 표시 줄을 표시해야합니다. 기본적으로 다른 신청서에서 requiest를받습니다. 요청에 따라 내 페이지에서 pdf 파일을 만듭니다. pdf 파일을 만들려면 시간이 걸릴 것입니다. 페이지가 생성 될 때 진행 막대 또는 애니메이션 GIF 이미지를 표시해야합니다. 어떻게하는지 잘 알고 있습니다. 여기서 button_click 이벤트를 사용하지 않는다는 것을 기억하십시오.

Answer 1

이 같은 일이 일할 수있는 상상 : ShowProgressBar(true);

그리고 후 : true 매개 변수

function ShowProgressBar(booleanValue) 
{ if(booleanValue) 
     $('#elementcontaingimage').show('slow'); 
    else 
     $('#elementcontaingimage').hide('slow'); 
} 

: document.ready에

이 같은 함수를 호출하여 표시되는 GIF 이미지가 PDF가 생성됩니다. 단지 같은 전화 :

ClientScriptManager cs = Page.ClientScript; 
cs.RegisterClientScriptBlock(this.GetType(), "key", "ShowProgressBar(false);", false); 

을하지만 그것은 간단하지 않을 것이라는 느낌이 : S를

는 UPDATE - 작업 예를 들어 내가있는 방법을 알아 낸

는 그것이 작동되도록합니다 그러나 PDF를 생성하는 코드를 PDF 파일을 응답 스트림에 쓰는 것이 목적 인 다른 페이지로 분리해야합니다. 더 나아가 PDF 파일을 응답 스트림에 쓰려면 HttpHandler를 작성할 수 있지만이 예제에서는 일반 aspx 페이지에서 PDF 파일을 작성합니다.

1 단계 : 다음 마크 업과 자바 스크립트 코드를 페이지에 삽입하십시오.

<div id="imageDiv"> 
     <img alt="" src="images/ajax-loader.gif" /> 
    </div> 
    <script language="javascript" type="text/javascript"> 
     function ShowProgressBar(booleanValue) { 
      if (booleanValue) { 
       $('#imageDiv').show('slow'); 
       createIframe(); 
      } 
      else 
       $('#imageDiv').hide('slow'); 

     } 
     function callback(parent) { 
      ShowProgressBar(false); 
     } 
     function createIframe() { 
      $('<iframe />', { 
       name: 'myFrame', 
       id: 'myFrame', 
       src: 'PageGeneratingPDF.aspx', 
       style: 'display:none;' 
      }).appendTo('body').load(function() { 
       callback(this); 
      }); 
     } 
     window.onload = ShowProgressBar(true); 
    </script> 

설명 : 페이지로드 ShowProgressBar에는 애니메이션 GIF 이미지를 표시 시작이라고합니다. 다음 줄 -createIframe();-은 iframe을 동적으로 만들고 src 특성을 PDF를 응답 스트림에 쓰는 페이지의 URL로 설정합니다. 그런 다음 iframe을 페이지 body에 추가하고 iframe로드가 완료 될 때 호출 될 callback 함수를 첨부합니다. PageGeneratingPDF.aspx이 PDF 파일 생성을 마쳤을 때 callback 함수가 호출 되었기 때문에 callback 함수가 수행 할 수있는 유일한 작업은 애니메이션 GIF 이미지가 포함 된 div를 숨기는 것입니다.

뒤에 PageGeneratingPDF.aspx 코드는 다음과 같을 수 있습니다 :

protected void Page_Load(object sender, EventArgs e) 
{ 
    Thread.Sleep(10000);//Give the sensation that the pdf file takes long to generate 
    //replace line below with actual code that generates the PDF file 
    byte[] pdf = File.ReadAllBytes(Server.MapPath(@"~/file.pdf")); 
    Response.AddHeader("Content-disposition", "attachment; filename=report.pdf"); 
    Response.ContentType = "application/octet-stream"; 
    Response.BinaryWrite(pdf); 
    Response.Flush(); 
    Response.End();   
} 

당신이 완료됩니다. 결과물은 다음과 같습니다. 처음

...

PDF를 생성 후 ...

This other question

에 유래에 매우 도움이되었다.