代码之家  ›  专栏  ›  技术社区  ›  Paul

对asp.net最好的“加载”反馈?

  •  4
  • Paul  · 技术社区  · 16 年前

    因此,我们有一个asp.net应用程序-相当标准-其中有很多updatepanel和postback。

    在一些网页上

    <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控件,它只是在页面中间有一个spinny图标。

    但没有一个看起来特别好,而且都有点笨重。它们还需要在应用程序周围的不同位置使用大量代码。

    其他人使用什么方法并发现有效?

    4 回复  |  直到 16 年前
        1
  •  1
  •   DavRob60    16 年前

    和其他人一样,我建议在模式弹出窗口中使用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

        2
  •  4
  •   Tim Schmelter    16 年前

    我没有使用UpdatePanelanimationExtender,但使用了UpdateProgress控件和动画gif(Bermos链接)相结合:

    <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将在关联的更新面板的每个回发上都可见(在本例中为500ms之后)。

    编辑:其中“进度”类可以是F.E.this:

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

    当做, 提姆

        3
  •  1
  •   Bermo    16 年前

    动画gif需要最少的代码,您可以从以下网站选择您喜欢的颜色- Ajaxload - Ajax loading gif generator .

        4
  •  0
  •   alejandrobog    16 年前

    这是我使用的,它有一个模式弹出式背景和一个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>