javascript计时器完成后调用服务器端子

Question

在线考试中的倒数计时器是使用 JavaScript 实现的。如果倒计时到达 0:0:00，它会提醒用户并进入下一个网页（如下所示）：

function myTimer(startVal,interval,outputId, dataField){
...
var current = this.value;
    this.OutputCntrl.innerHTML = this.Hours(current) + ':' + this.Minutes(current) + ':' +  this.Seconds(current);
    this.currentTimeOut = setTimeout("Timer.go()", this.interval);
                     }
    else             {
    window.alert("Time is up! Exam will proceed to next module.");
    window.location = "Conf_English.aspx"
                                  }

如果还有一些时间，选项会显示在网络表单中（如下所示）：

当点击继续按钮时，考生的问题和答案（暂时存储在数据表中）将存储在数据库中。

这里的问题是倒计时计时器正在由客户端脚本运行，并且数据的插入是在服务器端编码的。我也不能制作一个插入数据的 javascript 函数，因为根据我在一些文章上阅读的内容，不建议通过客户端脚本访问数据库，我认为这是正确的基于 ASP.Net 的概念.有人可以提出一个好的方法来做到这一点吗？谢谢。

Answer 1

使用 ASP.NET AJAX 页面方法在 Web 服务器上调用 static（VB.NET 中为 Shared）方法，如下所示：

标记：

// jQuery DOM ready function
$(document).ready(function() {
    // Wire up click event handler for proceed button
    $('.Proceed').click(function() {
        $.ajax({
            type: "POST",
            url: "PageName.aspx/SaveToDatabase",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(result) {
                // Navigate to next page or whatever needs to happen here
            }
        });

        // Stop button from trying to post back to server
        return false;
    });
});

<asp:Button id="ButtonProceed" runat="server" Text="Proceed" CssClass="Proceed" />

注意：您可以通过 data: "{}", 内部的名称/值对将数据传递给 ASP.NET AJAX 页面方法，也可以构建 JavaScript 文字，然后使用 JSON.stringify() 将文字转换为 JSON。

代码隐藏：

[WebMethod]
public static string SaveToDatabase()
{
    // Save to database logic here
}