更新面板和更新进度问题

Posted 2023-04-12

【中文标题】更新面板和更新进度问题

【英文标题】：Issues with Update Panels and Update Progress

【发布时间】：2020-10-19 14:42:35

【问题描述】：

希望你们都平安。

我希望有人可以在 asp.net、webforms 方面提供一些帮助。

背景： 我的任务是对我们的目录结帐屏幕进行更改（对用户更友好）。我有这个工作，因为其中一些可能需要一段时间（订购就是）我使用更新面板和更新进度来显示请稍候动画 gif。这很好用，但是表单的设计已经从一个提出大量问题的大表单变成了各种步骤，你知道，所以我只显示了表单的一部分，比如你的地址是什么，然后用户点击继续，成为显示了我们需要的下一个信息，他们单击继续，然后再次单击其他内容，他们单击继续，依此类推，直到付款。现在，虽然我喜欢在多视图中围绕整个地段设置更新面板，但有人告诉我，由于人们一直在等待请等待，因此需要更长的时间才能完成。我在没有更新面板和进度的情况下对此进行了测试，它要快得多，所以我们想为什么不把它只放在需要很长时间才能运行的东西上，即最后一个按钮，确认订单按钮。所以我开始这样做，但很快发现这在多视图中不起作用，所以我决定销毁多视图并只使用可见的 div。因此，根据您的步骤，将显示与其关联的 div。所以基本上这就是我所拥有的

<div id="div1" runat="server">
 some stuff here
 <asp:button id="button1" runat="server" text="continue" />
</div>
<div id="div2" runat="server">
 some stuff here
 <asp:button id="button2" runat="server" text="continue" />
</div>
<div id="div3" runat="server">
 some stuff here
 <asp:button id="button3" runat="server" text="continue" />
</div>
<div id="div4" runat="server">
 some stuff here
 <asp:button id="button4" runat="server" text="Confirm" />
</div>

在我设置要显示哪个 div 的代码中，因为表单中还有其他需要设置的东西，但一个例子是

Select Case cint(whatsteparewein.value)
  Case 0
    div1.Style.Add("display", "block")
    div2.Style.Add("display", "none")
    div3.Style.Add("display", "none")
    div4.Style.Add("display", "none")
  Case 1
    div1.Style.Add("display", "none")
    div2.Style.Add("display", "block")
    div3.Style.Add("display", "none")
    div4.Style.Add("display", "none")
  Case 2
    div1.Style.Add("display", "none")
    div2.Style.Add("display", "none")
    div3.Style.Add("display", "block")
    div4.Style.Add("display", "none")
  Case 3
    div1.Style.Add("display", "none")
    div2.Style.Add("display", "none")
    div3.Style.Add("display", "none")
    div4.Style.Add("display", "block")
End Select

whatsteparewein 是一个隐藏字段，因此我们知道下一步要去哪里，根据用户选择的内容将下一个 div 替换为上一个。

想法

我的伟大想法是如果我可以将按钮 4 包装在更新面板中并通过 JS 显示进度指示器。所以我有以下内容。

<div id="div4" runat="server">
 some stuff here
 <asp:UpdatePanel id="up1" runat="server" UpdateMode="Conditional">
   <contentTemplate>
     <asp:button id="button4" runat="server" text="Confirm" onClick="EventName" />
   </contentTemplate>
   <Triggers>
     <asp:AsyncPostBackTrigger ControlID="button4" EventName="Click" />
   </Triggers>
  </asp:UpdatePanel>
</div>

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
  <ProgressTemplate>
    <asp:Image ID="imageWait" runat="server" ImageAlign="AbsMiddle" ImageUrl="spinner.gif" Width="100" />
    Please Wait...
  </ProgressTemplate>
</asp:UpdateProgress>

现在我们可以在这里将更新面板与更新进度相关联，但这也不起作用，我发现每次切换到下一个 div 时，由于某种原因更新进度不起作用，我假设出于同样的原因不在多视图中。无论如何，所以我环顾四周，发现使用了一个使用 JS 的模态弹出扩展器，所以我添加了以下内容

<asp:ModalPopupExtender ID="modalpopup" runat="server" TargetControlID="UpdateProgress1" PopupControlID="UpdateProgress1"></asp:ModalPopupExtender>

然后添加以下JS

<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    //Raised before processing of an asynchronous postback starts and the postback request is sent to the server.
    prm.add_beginRequest(BeginRequestHandler);
    // Raised after an asynchronous postback is finished and control has been returned to the browser.
    prm.add_endRequest(EndRequestHandler);

    function BeginRequestHandler(sender, args) 
        //Shows the modal popup - the update progress
        var popup = $find('<%= modalpopup.ClientID %>');
        if (popup != null) 
        popup.show();
        
    

    function EndRequestHandler(sender, args) 
        //Hide the modal popup - the update progress
        var popup = $find('<%= modalpopup.ClientID %>');
        if (popup != null) 
        popup.hide();
        
    
</script>

所以在一个测试区域我得到了这个工作，我认为作为它的 JS 而不是依赖和更新进度，这将在 button4 被点击后立即工作。事实并非如此，我的一部分人正在考虑删除面板的更新进度。但是，当我注释掉设置要显示的 div 的代码时，看起来更新面板可以工作，而一旦我进行页面回发，它就不会。我什至尝试添加一个

Sys.Application.add_load(setForm);

在我的更新面板和 JS 中只是为了查看更新面板是否失去了与 JS 的连接。我不知道下一步该做什么，其他人有任何想法，有没有办法我可以只将需要的按钮包裹在更新面板上，因为在所有步骤上都这样做是多余的，特别是因为有很多 JS每次我们进入不需要的下一步时都需要重新连接的脚本。

感谢您的帮助

【问题讨论】：

小心 UpdateProgress：它可能正在工作。如果您只在本地进行测试，请求可能会如此之快，以至于 UpdateProgress 闪烁得如此之快以至于无法看到。尝试添加 Thread.Sleep(xxx) 1 或 2 秒以实际看到它。

【参考方案1】：

所以我通过使用纯 js 而不是更新进度来解决这个问题。我创建了一个 div，对其进行样式设置并在单击按钮时使用 JS 打开它。由于我不再需要更新进度，因此我不再需要更新面板，并且当页面刷新时，加载 div 会消失，因为我首先将其设置为不显示。

另外，关于速度，我发现之前制作这个的人有很多视图状态属性，比如将数据存储为布尔值。一旦我删除了这些并沿着会话路由存储的数据，它的速度很快。