asp.net - フォームの自動保存

Question

ASP.NET 3.5 にフォームがあります。多くのデータ要素があり、保存ボタンと送信ボタンがある場所。フォームを 2 分ごとに自動保存する必要があります。この種の機能を ASP.NET に実装する最良の方法は何ですか。

Answer 1

私は同じ問題でしばらく苦労しました。問題は、検証 (整数、通貨、日付などの検証) が必要になるため、通常のデータベース テーブルに保存したくなかったことです。そして、ユーザーが離れようとしているときに、そのことについてしつこく言いたくありませんでした。

私が最終的に思いついたのは、AjaxSavedData と呼ばれるテーブルで、Ajax 呼び出しを行ってデータを入力しました。AjaxSavedData はデータベース内の永続的なテーブルですが、そこに含まれるデータは一時的なものになる傾向があります。つまり、ユーザーが実際にページを完了して次のページに移動するまで、ユーザーのデータを一時的に保存します。

テーブルは、いくつかの列で構成されています。

AjaxSavedDataID - 整数:

主キー。

ユーザー ID - 整数:

ユーザーを識別します (簡単です)。

ページ名 - varchar(100):

複数のページで作業している場合に必要です。

コントロール ID - varchar(100):

これを ControlID と呼んでいますが、これは実際には、.NET がすべての WebControl に対して公開する ClientID プロパティにすぎません。たとえば、txtEmail が Contact という名前のユーザー コントロール内にある場合、ClientID は Contact_txtEmail になります。

値- varchar(MAX):

ユーザーが特定のフィールドまたはコントロールに入力した値。

DateChanged - 日時:

値が追加または変更された日付。

いくつかのカスタム コントロールに加えて、このシステムにより、これらすべてを簡単に「機能させる」ことができます。私たちのサイトでは、各テキストボックス、ドロップダウンリスト、ラジオボタンリストなどの ClientID は、特定のページに対して一意で一貫性があることが保証されています。それで、保存されたデータの取得が自動的に機能するように、これらすべてを書くことができました。つまり、フォームにいくつかのフィールドを追加するたびに、この機能を接続する必要はありません。

この自動保存機能は、techinsurance.com の非常に動的なオンライン ビジネス保険アプリケーションに導入され、ユーザー フレンドリーになる予定です。

興味がある場合は、自動保存を可能にする Javascript を次に示します。

function getNewHTTPObject() {
    var xmlhttp;

    /** Special IE only code */
    /*@cc_on
    @if (@_jscript_version >= 5)
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (E) {
            xmlhttp = false;
        }
    }
    @else
        xmlhttp = false;
    @end
    @*/

    /** Every other browser on the planet */
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        try {
            xmlhttp = new XMLHttpRequest();
        }
        catch (e) {
            xmlhttp = false;
        }
    }

    return xmlhttp;
}

function AjaxSend(url, myfunction) {
    var xmlHttp = getNewHTTPObject();
    url = url + "&_did=" + Date();
    xmlHttp.open("GET", url, true);
    var requestTimer = setTimeout(function() { xmlHttp.abort(); }, 2000);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2005 00:00:00 GMT");
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState != 4)
            return;
        var result = xmlHttp.responseText;
        myfunction(result);
    };
    xmlHttp.send(null);
}

// Autosave functions
var SaveQueue = []; // contains id's to the DOM object where the value can be found
var SaveQueueID = []; // contains id's for binding references (not always the same)

function ArrayContains(arr, value) {
    for (i = 0; i < arr.length; i++) {
        if (arr[i] == value)
            return true;
    }

    return false;
}

function GetShortTime() {
    var a_p = "";
    var d = new Date();
    var curr_hour = d.getHours();

    if (curr_hour < 12)
        a_p = "AM";
    else
        a_p = "PM";

    if (curr_hour == 0)
        curr_hour = 12;
    else if (curr_hour > 12)
        curr_hour = curr_hour - 12;

    var curr_min = d.getMinutes();
    curr_min = curr_min + "";

    if (curr_min.length == 1)
        curr_min = "0" + curr_min;

    return curr_hour + ":" + curr_min + " " + a_p;
}

function Saved(result) {
    if (result == "OK") {
        document.getElementById("divAutoSaved").innerHTML = "Application auto-saved at " + GetShortTime();
        document.getElementById("divAutoSaved").style.display = "";
    }
    else {
        document.getElementById("divAutoSaved").innerHTML = result;
        document.getElementById("divAutoSaved").style.display = "";
    }
}

function getQueryString(name, defaultValue) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == name) {
            return pair[1];
        }
    }

    return defaultValue;
}

function urlencode(str) {
    return escape(str).replace(/\+/g, '%2B').replace(/%20/g, '+').replace(/\*/g, '%2A').replace(/\//g, '%2F').replace(/@/g, '%40');
}

function AutoSave() {
    if (SaveQueue.length > 0) {
        var url = "/AjaxAutoSave.aspx?step=" + getQueryString("step", "ContactInformation");

        for (i = 0; i < SaveQueue.length; i++) {
            switch (document.getElementById(SaveQueue[i]).type) {
                case "radio":
                    if (document.getElementById(SaveQueue[i]).checked)
                        url += "&" + SaveQueueID[i] + "=" + urlencode(document.getElementById(SaveQueue[i]).value);
                    break;
                case "checkbox":
                    if (document.getElementById(SaveQueue[i]).checked)
                        url += "&" + SaveQueueID[i] + "=" + urlencode(document.getElementById(SaveQueue[i]).value);
                default:
                    url += "&" + SaveQueueID[i] + "=" + urlencode(document.getElementById(SaveQueue[i]).value);
            }
        }

        SaveQueue = [];
        SaveQueueID = [];
        AjaxSend(url, Saved);
    }
}

function AddToQueue(elem, id) {
    if (id == null || id.length == 0)
        id = elem.id;

    if (!ArrayContains(SaveQueueID, id)) {
        SaveQueue[SaveQueue.length] = elem.id;
        SaveQueueID[SaveQueueID.length] = id;
    }
}

これをページに追加して、これを機能させます。

window.setInterval("AutoSave()", 5000);

これを Textbox、DropdownList、Listbox、または Checkbox に適用するには、次の属性を追加するだけです。

onchange="AddToQueue(this)"

...または、RadioButtonList または CheckBoxList の場合:

onchange="AddToQueue(this, '" + this.ClientID + "')"

JQuery を使用すると、この Javascript をかなり単純化できると確信しているので、それを検討することをお勧めします。しかし、いずれにせよ、AJAX は使用するものです。これは、Google がメール メッセージを gmail に自動保存するために使用するものであり、新しい投稿を書いているときにブロガーでも同じことが行われます。そこで私はその概念を採用し、何百ものフォーム要素を持つ巨大な ASP.NET アプリケーションに適用したところ、すべてが美しく機能しました。

Answer 2

TimerクラスとTickメソッドを使用します。