asp.NET 4.8 在初始页面加载期间通知加载

Question

我有一个旧的 ASP.NET (.NET 4.8) Web 应用程序。一个特定页面在初始加载期间（即在！Page.IsPostBack）需要大量数据库查询才能获取结果集，通常需要大约 5 分钟。

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        //divLoading.Visible = true; // This approach doesn't work.
        // Queries take about 5 min.
        //divLoading.Visible = false;
    }
}

我有一个自定义的 Loading.Show() 和 Loading.Hide() javascript 函数，并尝试在 ASPX 中加载时显示它，如下所示，但它不显示加载图标。

<div id="divLoading" runat="server" Style="width: 300px; height: 320px; visibility:hidden">
  <asp:Label ID="lblLoading"  runat="server" Text="Please wait..." />
</div>
...
<script type="text/javascript">
    function OnLoad() {
        Loading.Show();
    }
    window.onload = OnLoad;
    ...
</script>

我怎样才能让它发挥作用？ 有什么替代方案或建议吗？

Answer 1

简单的解决方案是让页面在客户端完全呈现，然后让客户端代码单击按钮。

因此，将 !IsPostBack 代码存根从页面加载事件移动到标准按钮事件存根后面。然后，让网页呈现、让客户端页面“加载”事件显示微调器或“请等待区域”就很简单了，然后相同的客户端代码可以使用客户端 JavaScript 单击我们的按钮。

当然，我们只希望该代码在首页加载时运行，因此我们引入了客户端 myIsPostBack 变量。

举个例子，我们将做一个“假”的长加载过程。

所以，这个标记：

        <asp:Button ID="cmdMyProcess" runat="server" Text="Proccess data"
            OnClick="cmdMyProcess_Click"
            Style="display: none"
            ClientIDMode="Static" />

        <div id="myprocesswait" style="display: none">
            <h3>Loading data - please wait</h3>
            <img src="../Content/wait2.gif" width="48" />
        </div>

        <script>

            function IsPostBack() {
                return '<%= Page.IsPostBack.ToString() %>'
            }

            $(window).on('load', function () {

                if (IsPostBack() == 'False') {
                    $('#myprocesswait').show()
                    $('#cmdMyProcess').click()
                }

            });

        </script>

因此，请注意按钮（和 div）如何显示 = 无。

我们创建了一个客户端 IsPostBack 函数。

那么，页面加载时的效果是这样的：

但是，这样的代码只会在真正的首页加载时运行，就像在后面的代码中使用 !IsPostBack 标志一样，在上面，您可以使用客户端 IsPostBack 函数来达到相同的目的。这样的代码只会在第一页加载时运行。

现在，将页面加载 !IsPostBack 代码存根移动到上面的隐藏按钮并使用客户端代码“单击”该按钮，并且仅在第一个实际页面加载时执行此操作（IsPostBack = false）。