我在 ASP.NET 3.5 中有表单。哪里有很多数据元素,哪里有保存和提交按钮。我需要每 2 分钟自动保存一次表单。在 ASP.NET 中实现这种功能的最佳方法是什么。
2 回答
我为同样的问题挣扎了一段时间。问题是我不想保存到通常的数据库表中,因为那需要验证(验证整数、货币、日期等)。当他们可能试图离开时,我不想唠叨用户。
我最终想出的是一个名为 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);
要将其应用于文本框、下拉列表、列表框或复选框,您只需添加此属性:
onchange="AddToQueue(this)"
...或者对于 RadioButtonList 或 CheckBoxList:
onchange="AddToQueue(this, '" + this.ClientID + "')"
如果您使用 JQuery,我确信这个 Javascript 可以简化很多,所以您可能需要考虑这一点。但无论如何,AJAX 是可以使用的。这是 Google 用来将您的电子邮件信息自动保存在 gmail 中的方法,当您撰写新帖子时,博客中也是如此。所以我采用了这个概念并将其应用到具有数百个表单元素的大型 ASP.NET 应用程序中,并且它运行良好。