ASP.NET MVC：AJAX提交表单延迟 [英] ASP.NET MVC: AJAX submit form with delay

问题描述

我有一个AJAX形式，我需要提交每次在一个文本框，用户键入的东西。

I have an AJAX form that I need to submit every time a user types something in a textbox.

以下code工作：

<% using (Ajax.BeginForm("myAction", "myController", null, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "resultDiv" }, new { id = "myForm" }))
   {%>

<script type="text/javascript" language="javascript">
    jQuery("#myForm").keyup(function() { $('#myForm').trigger('onsubmit'); });
</script>

Search: <input type="text" id="myTextField" />

<%} %>

我一直在尝试，以便有1秒的提交表单的延迟更新code。延迟将允许窗体只当用户停止敲击，在一秒时间间隔提交。这code的不工作的：

<% using (Ajax.BeginForm("myAction", "myController", null, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "resultDiv" }, new { id = "myForm" }))
   {%>

<script type="text/javascript" language="javascript">
    var timerid;
    jQuery("#myForm").keyup(function() {
        clearTimeout(timerid);
        timerid = setTimeout(function() { $('#myForm').trigger('onsubmit'); }, 1000);
    });

</script>

Search: <input type="text" id="myTextField" />

<%} %>

如何从提交直到用户延迟了ajax形式的任何建议停止打字的短时间内？

Any suggestions on how to delay the ajax form from being submitted until a user stops typing for a short period of time?

更新：使用Chrome，我发现脚本中捕获的异常MicrosoftAjax.js某处停止。我不知道如何找到例外的是究竟是什么。

UPDATE: Using Chrome, I found that the script stops somewhere in MicrosoftAjax.js in a caught exception. I don't know how to find what the exception is exactly.

有关调试的目的，我重写了code如下：

For debugging purposes, I rewrote the code as follows:

    var timerid;

    jQuery("#myForm").keyup(submitWithTimeout);

    function submitWithTimeout() {
        clearTimeout(timerid);
        timerid = setTimeout(submitAjaxForm, 2000);
    }

    function submitAjaxForm() {
        $('#myForm').trigger('onsubmit');
    }

在code在执行submitWithTimeout功能两条线，并准确地等待2秒。它到达submitAjaxForm功能，并在MicrosoftAjax.js文件捕获的异常停止时，如前面提到的

The code executes both lines in "submitWithTimeout" function, and accurately waits for 2 secs. It reaches the submitAjaxForm function, and stops at a caught exception in MicrosoftAjax.js file, as mentioned before.

更新2 ：我现在用MicrosoftAjax.js的调试版本，发现错误的根源。使用Chrome的前pression守望者，我能够缩小它的以下问题：在MicrosoftAjax.js正在执行的EventObject变量为空。我从源头code收集的是，onsubmit的code的事件使用定时器提交表单时为空。任何想法，为什么？

UPDATE 2: I am now using the debug version of MicrosoftAjax.js and found the source of the error. Using the expression watcher in Chrome, I was able to narrow it down to the following issue: the "eventObject" variable is null while MicrosoftAjax.js is executing. What I gather from the source code is that the onsubmit code's "event" is null when using the timer to submit the form. Any ideas why?

<form action="myAction" id="myForm" method="post" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'myResult' });">

的新Sys.UI.DomEvent（事件）使用超时方法时，先后为事件参数为空值。

The new Sys.UI.DomEvent(event) has a null value for the "event" parameter when using the timeout method.

推荐答案

有似乎试图提交时有特殊要求的 AJAX 有一定的延迟后的形式。

There seems to be a special requirement when trying to submit an AJAX form after a certain delay.

正如我在上次更新（见问题）提到，这个问题来自于事件变量执行MicrosoftAjax.js库时未赋值，试图提交表单。在事件变量具有的KeyboardEvent（或的MouseEvent，我想象）触发提交表单。这当的keyup事件被触发事件变量分配，但不再提供超时到期后，可能是因为范围丢失

As mentioned in my last update (see question), the issue comes from the event variable being unassigned when the MicrosoftAjax.js library is executed, trying to submit the form. The event variable has the KeyboardEvent (or MouseEvent, I imagine) that triggered the submission of the form. This event variable is assigned when the "keyup" event is fired, but is no longer available after the timeout expires, probably because the scope is lost.

我的解决办法是在一个全局变量的值存储在以事件数据重置时，最关键的是pressed的状态。

My workaround is to store the values in a global variable in order to reset the event data to the state when the key is pressed.

因此​​，code为以下内容：

As such, the code becomes the following:

var timerid;
var timerEvent;

jQuery("#myForm").keyup(submitWithTimeout);

function submitWithTimeout() {
    clearTimeout(timerid);
    timerEvent = event;
    timerid = setTimeout(function() { submitAjaxForm(); }, 2000);
}

function submitAjaxForm() {
    event = timerEvent;
    $('#myForm').trigger('onsubmit');
}

这篇关于ASP.NET MVC：AJAX提交表单延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！