ブラウザに対してサーバーのイベントを更新して描画する (進捗表示ダイアログ？ASP.NET Webアプリケーション)

ブラウザに対して、サーバー側のイベントを更新して描画することが出来ると便利ですね。

たとえば、何か100個のある作業をサーバー側が行っていたとして、

「現在、100個中35個目を処理中です」

みたいな表示って出来るんでしょうか？

ちょっと調べてみました。

サーバーのイベントをブラウザにプッシュは出来ない
プログラミングの無料レッスン体験

サーバーのイベントをブラウザにプッシュは出来ない

調べてみる限り、

サーバーのイベントをブラウザに対してプッシュ(push)は出来ないようです。

ブラウザからのプル(pull)要求に対してサーバーは情報を提供するだけです。

よって、「ブラウザに対して、サーバー側のイベントを更新して描画する」と同じことを実現するには、数秒おきに UpdatePanel をリフレッシュすればよいようです。

サンプルコードは次の通りです。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Timers</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Timer runat="server" id="UpdateTimer" interval="5000" ontick="UpdateTimer_Tick" />
        <asp:UpdatePanel runat="server" id="TimedPanel" updatemode="Conditional">
            <Triggers>
                <asp:AsyncPostBackTrigger controlid="UpdateTimer" eventname="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label runat="server" id="DateStampLabel" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Timers</title>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:Timer runat="server" id="UpdateTimer" interval="5000" ontick="UpdateTimer_Tick" />

<asp:UpdatePanel runat="server" id="TimedPanel" updatemode="Conditional">

<asp:AsyncPostBackTrigger controlid="UpdateTimer" eventname="Tick" />

</Triggers>

<asp:Label runat="server" id="DateStampLabel" />

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

protected void UpdateTimer_Tick(object sender, EventArgs e)
{
    DateStampLabel.Text = DateTime.Now.ToString();
}

protected void UpdateTimer_Tick(object sender, EventArgs e)

{

DateStampLabel.Text = DateTime.Now.ToString();

}

このようにすれば、5秒おきに DateStampLabel が更新されるようになります。

Timer は不要になったときにオフにしておかないと、ずっと動き続けてしまいます。

注意しましょう。

ただ、ブラウザごと終了した(閉じた、クローズした)場合は、ちゃんとTimerは終了してくれるようです。

プログラミングの無料レッスン体験

約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp

＜Codecampの特徴＞

1 現役エンジニアによる指導

2オンラインでのマンツーマン形式の講義

3大手企業にも導入されている実践的なカリキュラム

↓無料体験レッスン実施中です。

プログラミングのオンラインスクールCodeCamp