ページ読み込み中にローディング中と表示したい

前提・実現したいこと

ページ読み込み時にローディング中と表示をしたいです。
ASP.NETでの開発はまだ不慣れな状態です。

該当のソースコード

html
1    <form id="form1" runat="server">
2        <div　id="loadDiv" runat="server">
3            loading...
4        </div>
5    </form>

VBnet
1    Private Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
2      If Not IsPostBack Then        
3          System.Threading.Thread.Sleep(2000)'実際は2秒ほどの処理
4          loadDiv.Visible = False            '処理が完了したらローディング中の表示を消したい
5      End If
6    End Sub

試したこと

上記のようにしたのですが、ローディング中の表示はされません。
ページロードのイベントがHTML出力の前に走るためということまでは理解できました。

やるべきことは？

HTML出力後に起こるイベントは無いのでしょうか？
そもそもこのような場合の定石はどのようなものなのでしょうか。

退会済みユーザー

2020/03/16 08:56 編集

> ページ読み込み時にローディングの表示をしたいです。「ローディングの表示」って何ですか？　ひょっとしたらこういうことではないかと想像ぐらいはできますが、間違った想像ベースで回答すると混乱を招くばかりですし、そもそも回答者・閲覧者がそういうことに無駄な時間を使わないですむよう、ここに書いてあることが全ての第三者が分かるように書いていただけませんか？

退会済みユーザー

2020/03/17 01:58 編集

想像をふくらませると、処理時間は 2 秒程度だが、2 秒も待ってられないユーザーのために、要求に対して間髪を入れず処理中ということを伝えたい（Loading ... と表示したい）ということですか？　時間のかかる処置は一切なくて、Loading ... と表示するだけでも、要求を出してから応答が返ってくるまで 2 秒ぐらいかかることはあると思いますが？　何がしたいのかよく分かりません。

x_x

2020/03/18 07:57

ローディングを表示するのは主に SPA などで Ajax の処理をする場合だと思います。ポストバックするような作りなら不要ではないかと思いますがどうでしょうか？

退会済みユーザー

2020/03/18 08:04

質問者さん、レスに対してフィードバックもなしで無言ですかどうしたいのですか？　回答不要ならその旨書いてクローズしていただけませんか？　とにかく無言は NG です。

Hanasuke

2020/03/19 01:02

x_x様ありがとうございます。まったくもってご指摘の通りだと思いますが要望もあり何か方法はないかと思いまして…。ご指摘いただいたAjaxが.Netにおいてもいろいろできるようで糸口になりました。感謝いたします。

行動規範の内容に同意します

回答2件

質問者さんの回答のコメント欄の 2020/03/20 17:02 の私のコメントに、

UpdatePanel を使うなら、処理中の表示には UpdateProgress を使うとか、ScriptManager が提供するクライアント側でのイベントを使うとかいう手段があります。後で、ご参考までに、例を紹介しておきます。

と書きましたが、それを以下に書きます。

UpdatePanel に表示する処理が進行中であるのを表示するために UpdateProgress が用意されています。

加えて、ScriptManager が提供するクライアント側でのイベントも利用できます。イベントは initializeRequest ⇒ beginRequest ⇒ pageLoading ⇒ pageLoaded ⇒ endRequest の順で発生するので、その適当なイベントに JavaScript のリスナをアタッチして処理中であることを表示することもできます。

そのサンプルコードを以下にアップしておきます。

.aspx.cs

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class WebForm3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
            Label1.Text = "処理完了";
        }
    }
}

.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        //<![CDATA[
        var manager;

        function pageLoad(sender, args) {
            if (args.get_isPartialLoad() === false) {
                manager = Sys.WebForms.PageRequestManager.getInstance();
                manager.add_beginRequest(OnBeginRequest);
                manager.add_endRequest(OnEndRequest);
            }
        }

        // 非同期要求の送信時に、アニメーションの表示などの
        // スクリプトを起動する場合はここに設定。
        function OnBeginRequest(sender, args) {
            var elem = document.getElementById("progress");
            elem.setAttribute("style","display:block");            
        }

        // 完了時にスクリプトを起動する場合はここに設定。
        function OnEndRequest(sender, args) {
            var elem = document.getElementById("progress");
            elem.setAttribute("style","display:none");            
        }

        // 実行中の非同期ポストバックを停止するスクリプト。
        // UpdateProgress に配置したボタンの onclick に設定。
        // サーバー側の処理まで停止されるわけではないので注意
        function AbortPostBack() {
            if (manager.get_isInAsyncPostBack()) {
                manager.abortPostBack();
            }
        }

        window.onload = function loadingShow() {
            document.getElementById("Button1").click()
        };
    //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server" >
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

            <h3>UpdatePanel と UpdatePgrogress</h3>

            <div id="progress" style="display:none">
                <img src="/Images/grid-loading.gif" alt="" />
                スクリプトで表示・・・.
                <input type="button" onclick="AbortPostBack()" value="Cancel" />
            </div>

            <asp:UpdateProgress ID="UpdateProgress1" runat="server" 
                AssociatedUpdatePanelID="UpdatePanel1">
                <ProgressTemplate>
                    <asp:Image ID="Image1" runat="server" 
                        ImageUrl="~/Images/grid-loading.gif" />
                        UpdateProgress で表示・・・
                    <input type="button" onclick="AbortPostBack()" value="Cancel" />
                    <br /><br />
                </ProgressTemplate>
            </asp:UpdateProgress>

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                    <asp:Button ID="Button1" runat="server" Text="Button" 
                         style="display:none" OnClick="Button1_Click"  />
                </ContentTemplate>
            </asp:UpdatePanel>
            
        </div>
    </form>
</body>
</html>

実行すると、質問者さんがやったように window.onload で自動的にボタンクリックされ、その際クライアントスクリプトで以下の画像のようプログレスが表示され、その後ポストバックされてサーバー側で Button1_Click に制御が飛んで、 Thread.Sleep(5000) で 5 秒待ってから UpdatePanel 内の Label1 に "処理完了" と表示されます。

だたし、前にも書きましたが、処理が 2 秒程度で済むなら、Loading と表示してからポストバックを行うというのは、無駄なラウンドトリップに余計に時間がかり、サーバー側の負担を大きくするので意味はない、と言うより本末転倒だと思いますが・・・

投稿2020/03/20 09:23

編集2020/03/21 00:16

退会済みユーザー

総合スコア0

自己解決

①UpdatePanelにおいてローディング中の表示をしておく
②ページ表示後にjavascriptでButton1をクリック
③処理が終わったらローディング中の表示を消す
回りくどいですがこんな感じで実装します。

html
1<body>
2    <form id="form1" runat="server">
3		<div>
4			<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
5			<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
6				<ContentTemplate>
7					<asp:Label ID="Label1" runat="server" Text="loading..."></asp:Label>
8				</ContentTemplate>
9				<Triggers>
10					<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"></asp:AsyncPostBackTrigger>
11				</Triggers>
12			</asp:UpdatePanel>
13			<asp:Button ID="Button1" runat="server" Text="Button" style="display:none;" />
14		</div>
15    </form>
16	<script type="text/javascript">
17        window.onload = function loadingShow() {
18            document.getElementById("Button1").click()
19        };
20	</script>
21</body>

vbnet
1    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
2        System.Threading.Thread.Sleep(2000) '実際は2秒ほどの処理
3        Label1.Visible = False
4    End Sub

投稿2020/03/19 01:03

Hanasuke

総合スコア6

退会済みユーザー

2020/03/20 08:02

2 秒程度の処置を行うために、Loading と表示してからポストバックを行うというのは、無駄なラウンドトリップに余計に時間がかり、サーバー側の負担を大きくするので意味はない、と言うより本末転倒だと思います・・・が、客の要望とかでそれを言っても始まらないのでしょうね。 UpdatePanel を使うなら、処理中の表示には UpdateProgress を使うとか、ScriptManager が提供するクライアント側でのイベントを使うとかいう手段があります。後で、ご参考までに、例を紹介しておきます。

行動規範の内容に同意します

あなたの回答