これはクライアント側のものなので、ASP.NETは使用しません:)とにかく、それでもサーバー側を表していることは明らかです。
- 1つのコントローラー、2つのビュー、および2つの対応するビューモデルを備えた新しいASP.NETMVCプロジェクト。
- ビューには
<form>
、タイマー<select>
またはテキストボックスなどがあります。
- コントローラには、POSTされたフォームデータを受信して保存するアクションがあり、タイマーがいつ終了するかを指定する非表示フィールドを持つビューに303応答を返します。この値は、次の
Session
場合に備えてサーバーに保持する必要があります。ユーザーがページを更新します。値は、UTCの絶対日時値として保存する必要があります。
- クライアントには、ページの読み込み時にこの非表示フィールドを検査し、を使用してタイマーを設定する単純なクライアントスクリプトがあります
setTimeout
。
- スクリプトには、タイマーが終了したときに呼び出されるコールバック関数も含まれています。このコールバック関数は、送信された非表示の動的
<form>
要素を作成して入力し、期限切れになったクライアントとタイマーを識別するタグを使用してサーバーにPOSTリクエストを送信します。次に、サーバーは別の303リダイレクトを実行して元のビューに戻します。これには、ユーザーなどへのメッセージが含まれている可能性があります。
これはおそらく、最新の技術を使用し、AJAXまたはjQueryやMootoolsなどの外部フレームワークの使用に固有の複雑さを回避するための単純な方法です。HTML応答をPOSTリクエストに返す代わりに303リダイレクトを使用していることに注意してください。これはユーザーの利益のためであり、ブラウザに「フォームを再送信しますか?」ダイアログを表示し、タイマーがリセットされないようにします。
アップデート:
3xx応答が良い理由:
クライアントがPOSTリクエストを送信すると、Webサーバーは、応答を直接返すか、別のページへの3xxリダイレクトを実行することによって応答できます。応答を直接提供する場合の問題は、HTTPに関する限り、応答のコンテンツ(つまり、Webページ)に「アクセス可能」ではないことです。GET要求で同じコンテンツを取得することはできません。これが、ユーザーがF5キーを押すか、POSTされたページの[更新]を押すと、フォームを再送信するように(不可解な言語で)プロンプトを表示するメッセージボックスが表示される理由です。ただし、ユーザーがフォームを再送信すると、フォームが壊れてしまうことがよくあります。それらのデータは2回処理されるため、アプリケーション。これが、「ポストバック」に大きく依存していたASP.NETWebFormsが段階的に廃止されている理由です。
Javascript
コードは次のようになります。
// bind to this event rather than executing directly because the onload event is only fired after the entire DOM is available. If you run the code immediately then you won't be able to traverse the DOM tree.
window.onload = setUpCallback;
function setUpCallback() {
var hiddenField = document.getElementByID("someHiddenFieldId");
var timeStampEnd = parseInt( hiddenField.value ); // this is the number of miliseconds since 1970-Jan-01 00:00
var timeStampNow = new Date().getTime(); // this also returns a miliseconds-since-1970 value
var timeToEnd = timeStampEnd - timeStampNow;
if( timeToEnd > 0 ) {
window.setTimeout( onTimerEnd, timeToEnd ); // set-up the callback
}
}
function onTimerEnd() {
var form = document.createElement("form");
form.action = "http://mywebsite/uriToSubmitPostTo";
form.method = "post";
document.documentElement.appendChild( form );
var clientField = document.createElement("input");
clientField.type = "hidden";
clientField.name = "someFieldName";
clientField.value = "someValueToIdentifyTheClientOrJustUseSession?";
form.appendChild( clientField );
form.submit();
}