在POST之前延迟提交

Question

我有一个按钮。

   <UpdatePanel>
         <asp:Button CssClass="btn-send" runat="server"
              OnClick="SendMessage" Text="Send" />
    </UpdatePanel>

服务器端方法

protected void SendMessage(object sender, EventArgs e){...}

在POST之前，我需要做一点延迟并显示进度条动画。我想使用javascript（jquery）来实现。

如何实现延迟提交：
1）没有服务器延迟
2）没有第二个按钮和客户端脚本，点击服务器按钮？

- AlexKot

Answer 1

您可以尝试像这样做...

<asp:Button runat="server" OnClick="SendMessage" Text="Send"
   OnClientClick="return sendMessage(this);" />

<script type="text/javascript">
  var sendBtn = null;
  function sendMessage(btn){
    if(sendBtn==null){
      sendBtn = btn;
      window.setTimeout(function(){ sendBtn.click(); }, 1000);
      // DO YOUR VISUAL STUFF HERE
      return false;
    }else{
      return true;
    }
  }
</script>

这个想法是，当点击按钮时，首先存储按钮对象，设置一个延迟时间来模拟点击按钮，然后执行你想要的视觉效果。

然后，一秒钟后，再次点击按钮（这次不执行延迟部分）。

（我还没有时间学习jquery，但我相信使用它有更简单的方法来实现这个功能）

- freefaller

Answer 2

您可以使用普通的JavaScript setTimeout，而无需使用jQuery来完成此操作。

- tbddeveloper

---

请勿链接到w3schools - 请参阅http://w3fools.com了解原因。您可能已经链接到显示正确信息的页面，但该网站包含大量不正确和误导性信息 - 以任何方式链接到该网站都会赋予其不应得到的可信度。 - freefaller

另外，它是 setTimeout 而不是 setTimeOut（JavaScript 是区分大小写的）。 - freefaller

谢谢你的知识，我之前不知道。虽然在这种情况下 setTimeout 是准确的。感谢你指出大小写错误。 - tbddeveloper

别担心，只是传播知识... 越多人知道越好（如果您使用 Google 进行搜索并拥有 Google 账户，则可以阻止所有来自他们的结果）。 - freefaller

如果该页面准确无误，那么它来自w3schools也无关紧要。 - CountMurphy

Answer 3

你可以捕获表单的 onsubmit，当你提交表单（按下按钮）时打开页面上的等待消息。所以你需要在 Page_Load() 中添加这一行代码。

Page.Form.Attributes["onsubmit"] = "return AllowFormToRun();";

以及 JavaScript：

<script>
    function AllowFormToRun()
    {
        setTimeout(OpenWaitMsg, 10);
        return true; 
    }

    function OpenWaitMsg()
    {
        // open here the wait div 
    }
</script>

- Aristos

Answer 4

在提交按钮点击时，您应该使用Event.preventDefault()来防止页面在单击时提交。然后启动进度动画，当完成时，从js调用表单提交。

$("form").submit(function(e){
  var form = this;
  e.preventDefault();
  function animation(total,callback){
    //perform your animation
    callback();
  };

  animation(100,function(){
    form.submit();
  });
});

- raddrick

---

实际上，表单可能是e.currentTarget。我只是凭记忆做了这个，没有测试过。但它应该能给你一个完成它的想法 :) - raddrick

一般来说没问题，但form.submit()会强制刷新页面，UpdatePanel无法工作。 - AlexKot

它们实际上不应该有任何关联，因为表单在客户端的提交处理程序中被限定范围。当动画完成时，它会被调用。 - raddrick