Лучший отзыв о загрузке для ASP.Net? - PullRequest
Новая
       13

Лучший отзыв о загрузке для ASP.Net?

4 голосов
/ 30 апреля 2010

Итак, у нас есть приложение ASP.Net - довольно стандартное - и в нем много панелей обновления и обратных передач.

На некоторых страницах у нас есть 

<ajax:UpdatePanelAnimationExtender ID="ae" runat="server" TargetControlID="updatePanel" BehaviorID="UpdateAnimation">
    <Animations>
        <OnUpdating>
            <FadeOut Duration="0.1" minimumOpacity=".3"  />
        </OnUpdating>
        <OnUpdated>
            <FadeIn minimumOpacity=".5" Duration="0" />
        </OnUpdated>
    </Animations>
</ajax:UpdatePanelAnimationExtender>

Который в основном отбеливает страницу, когда происходит постбэк (но это конфликтует с модальным диалогом серого фона) В некоторых случаях у нас есть элемент управления progressupdate, в центре которого просто вращающийся значок.

Но ни один из них не кажется особенно милым и немного неуклюжим. Они также требуют много кода в разных местах приложения.

Какие методы другие люди используют и находят эффективными?

Ответы [ 4 ]

4 голосов
/ 30 апреля 2010

Я не использовал UpdatePanelAnimationExtender, но UpdateProgress-Control в сочетании с анимированным GIF (Bermos Link): 

<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="UdpImeiLookup" DisplayAfter="500" >
            <ProgressTemplate>
            <div class="progress">
                <img src="images/ajax-loader-arrows.gif" />&nbsp;please wait...
            </div>
            </ProgressTemplate>
</asp:UpdateProgress>

ProgressTemplate будет виден на каждой обратной передаче соответствующей панели обновления (после 500 мс в этом примере).

РЕДАКТИРОВАТЬ: где класс "прогресс" может быть f.e. это: 

.progress
{
  text-align:center;
  vertical-align:middle;
  position: absolute;
  left: 44%;
  top: 35%;
  border-style:outset;
  border-color:silver;
  background-color:Silver;
  white-space:nowrap;
  padding:5px;
}

С уважением, Тим

1 голос
/ 04 мая 2010

Как и другие, я предлагаю использовать UpdateProgress в модальном всплывающем окне.

Я добавлю этот поворот, добавлю всплывающее окно, UpdateProgress и этот код на главную страницу, поэтому, когда вам это нужно, просто подключите главную страницу к странице содержимого. 

 <script type="text/javascript">
 var ModalProgress ='<%= ModalProgress.ClientID %>';
  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) 
  {     
  //  hide the Popup     
  $find(ModalProgress).hide(); 
  }

</script>

вот некоторые ссылки:

http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html

http://vincexu.blogspot.com/2008/10/how-to-make-modalupdate-progress-bar-on.html

1 голос
/ 30 апреля 2010

Анимированные GIF-файлы требуют наименьшего количества кода, и вы можете выбрать свой любимый с любыми цветами со следующего сайта - Ajaxload - Ajax loading gif generator .

0 голосов
/ 01 мая 2010

Это то, что я использую, оно имеет модальный фон всплывающего типа и GIF 

 <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
<ProgressTemplate>
  <div style="position: absolute; width: 100%; height: 100%; z-index: 100; background-color: Gray;
    filter: alpha(opacity=70); opacity: 0.7;">
    &nbsp;
  </div>
  <table style="position: absolute; width: 100%; height: 100%; z-index: 101;">
    <tr>
      <td align="center" valign="middle">
        <div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
          width: 200px;">
          <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" />
          Please wait....
        </div>
      </td>
    </tr>
  </table>
</ProgressTemplate>

...