👨🏿‍🎤 🤾🏽 ☝🏻 Webフォームに読み込まれた行のタイマーとカウンターが欲しい 🆒 👩🏼‍🎓 👷🏻

...レポートの作成に時間がかかりました。砂時計と青い帯が眠りについた。最初は階段を登る猿、次に温度計が必要でしたが、最終的にはタイマーとカウンターがありました。愚かな笑顔と親切で共感的な表情は奇跡に見えます。

レポート用のフォームを開発する過程で、ユーザーはデータベースからデータをロードするプロセスを見たいと思っていました。彼は、ボタンが押された後にストップウォッチをオンにし、行が受信されるとすぐにフォームにその番号が表示されるようにしたかったのです。

この問題を解決するために、サーバーにデータを転送し、ページをオーバーロードせずに何らかの答えを取得する必要があるため、サーバーとデータを交換する方法を選択する問題に直面しました。基本的な方法に加えて、すべてをMVCに書き換えるには、他の方法があります。それらのほとんどは、記事ASP.NETのクライアントからサーバーへのコールバックを実行する方法で説明されています。 DevExpressまたは同様の商用製品のコールバックコントロールを使用することもできます。

このケースでは、Dino Espositoを読んで見つけた方法を使用しました。これはHTTPHandlerです。その利点は、サーバーが他のメソッドと比較して実行するコードが最小限であるため、ASP.NETアプリケーションには実際にない高速です。クライアント側では、jQueryとsetTimeout関数を使用しました。

サーバー側のコードは次のようになります。

TestForm.aspx.csファイル：

using System; namespace HTTPHandler_Test { public partial class TestForm : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } } }

テスト用のHTTPHandler-HTTPHandlerTest.ashx.cs：

 using System.Web; using System.Web.SessionState; namespace HTTPHandler_Test.HTTPHandler { /// <summary> ///    HTTPHandlerTest /// </summary> public class HTTPHandlerTest : IHttpHandler, IRequiresSessionState { public void ProcessRequest(HttpContext context) { var counter = context.Request.QueryString["counter"]; int iCount; if (int.TryParse(counter, out iCount)) { counter = (++iCount).ToString(); } context.Response.Write(counter); } public bool IsReusable { get { return true; } } } }

クライアント側では、次の行も追加する必要があります。

ファイルTestForm.aspx

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestForm.aspx.cs" Inherits="HTTPHandler_Test.TestForm" %> <!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 src="Script/jquery-1.10.2.min.js"></script> <script src="Script/askHTTPHandler.js"></script> </head> <body> <form id="form1" runat="server"> <div> <label id="lblStatus" style="display:block">: </label> <label id="lblCounter" style="display:block">: </label> <input type="button" id="btnStartStop" value="" onclick="AskHttpHandler()"/> </div> </form> </body> </html>

AskHTTPHandler.jsファイル：

 var start = false; function AskHttpHandler() { var dateStart = new Date(); var counter = 0; start = !start; if (start) { $('#btnStartStop').val(""); Ask(); } else $('#btnStartStop').val(""); function Ask() { var difInSeconds = Math.floor(((new Date()).getTime() - dateStart.getTime()) / 1000); var hours = Math.floor(difInSeconds / 3600); var minutes = Math.floor((difInSeconds - (hours * 3600)) / 60); var seconds = difInSeconds - (hours * 3600) - (minutes * 60); if (hours < 10) hours = "0" + hours; if (minutes < 10) minutes = "0" + minutes; if (seconds < 10) seconds = "0" + seconds; $('#lblStatus').text(": " + hours + ":" + minutes + ":" + seconds); var $ajaxQ = $.ajax({ type: "GET", async: false, url: "/HTTPHandler/HTTPHandlerTest.ashx", data: "counter=" + counter, success: onSuccessAsk, error: onErrorAsk }); var noop = function () { }; if ($ajaxQ != null) { $ajaxQ.onreadystatechange = $ajaxQ.abort = noop; $ajaxQ = null; } function onSuccessAsk(result) { counter = parseInt(result); $('#lblCounter').text(": " + result); if (start) setTimeout(Ask, 1000); } function onErrorAsk(result) { alert("error " + result.responseText); } }; }

開発プロセス中に、クライアント側で迷惑なメモリリークが検出されました。以下のコードを使用して解決しました：

 var noop = function () { }; if ($ajaxQ != null) { $ajaxQ.onreadystatechange = $ajaxQ.abort = noop; $ajaxQ = null; }

インターネットで事前に登り、このリンクにつまずいた：天国への記憶の成長

おわりに

ASP.NETを使用するプロセスでは、シッククライアントに向けてますます混合し、サーバーをデータソースとして使用する必要があります。 HTTPHandlerはこのタスクにうまく対応し、ASP.NET固有の機能を保存し、その欠点を回避できます。

PS

このソリューションは、ユーザーへの通知に加えて、プロバイダーに関連するバグをOracleデータベースにキャッチするのにも役立ちました。サーバーからデータを受信するときに、回線の読み取り速度が非常に急速に低下し始めることがありました。これは、最小プールサイズと最大プールサイズを23に設定することで修正されました。

Webフォームに読み込まれた行のタイマーとカウンターが欲しい