轻松实现页面提交时，显示“提交中..” _怎么点击提交按钮后显示提交中-优快云博客

本文介绍了一种简单的方法来实现页面提交时的加载效果，通过显示一个覆盖全屏的层提示用户“提交中”，同时禁用其他元素的点击，避免重复提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上次我在文章“ 在Web上如何实现"提交进度条"呢？ ”提到，想实现页面提交时，能显示进度条。
我也从网上看了不少文章，但没有真正意义上的进度条，有的文章写明是“真正意义”上的，其实也不是真正意义上，要真正意义上显示进度情况，恐怕不太现实，因为提交到，还剩多少，连机器都难于把握，因此，觉得可能性不大。
第二，我们其实也未必一定要显示进度，我倒是只想提示“提交中..”这样的效果即可，在显示提交中时，界面上其他的东西都不允许进行点击，鼠标变为“沙漏”形状，这样可以避免重复提交的可能。这似乎可以满意一般的要求了。

我实现的效果图：在点击“载入”后呈现“页面提交中...”在这提交中，鼠标为沙漏，不允许点击其他的，在载入完后自动消失，可以正常操作。

实现的过程很简单：
1.在界面上添加一个要显示的层：

< div id ="doing" runat ="server" style ="Z-INDEX: 12000; LEFT: 0px; WIDTH: 100%; CURSOR: wait; POSITION: absolute; TOP: 0px; HEIGHT: 100%" >

< table width ="100%" height ="100%" >

< tr align ="center" valign ="middle" >

< td >

< table width ="169" height ="62" bgcolor ="#99cccc" style ="FILTER: Alpha(Opacity=75); WIDTH: 169px; HEIGHT: 62px" >

< tr align ="center" valign ="middle" >

< td > 页面提交中

. < br >

. </ td >

</ tr >

</ table >

</ td >

</ tr >

</ table >

</ div >

当然，大家可以自定义的更漂亮一点，加一些图片什么的，我使用100%的层，是为了防止点击。
2.给要提交的按钮添加客户端脚本：
在Page_OnLoad事件中加入：

this .Button1.Attributes.Add( " onclick " , " javascript:document.getElementById('doing').style.visibility='visible'; " );

这是让按钮在点击后，用客户端脚本把图层显示出来。

3.重载Page的OnPreRender方法，在代码中添加如下代码：

override protected void OnPreRender(EventArgs e)

{

doing.Style.Add("visibility","hidden");

}

这是在进行Render之前，把图层隐藏掉，目前FW1.1只能放在OnPreRender中，其实最好是放在Render完成以后，在ASP.NET 2.0中添加了OnRenderComplete方法，所以等2.0以后，就可以把这语句放在RenderComplete里更合适。

好了，很简单吧。

Feedback

# re: 轻松实现页面提交时，显示“提交中..” 回复

2005-03-08 14:47 by samuel

上次看到你的文章就准备给你提供一点资料的，可是后来忙网站就给忘了，这有一篇codeproject上的，很早以前就bookmark了，希望能给你一点帮助，完成一个好用好看的控件 http://www.codeproject.com/aspnet/WebProgressBar.asp。

# re: 轻松实现页面提交时，显示“提交中..” 回复

2005-03-08 14:51 by 分享书籍——freeagle

我觉得可以考虑改为“命令执行中”，页面还是一个技术概念。

# re: 轻松实现页面提交时，显示“提交中..” 回复

2005-03-08 15:50 by 边城浪子

其实可以不用从重载OnPreRender方法来隐藏层的
最开始设置这个层就是不显示的
一般执行完毕都需要重新载入当前页面
所以这个层就还是隐藏的
我可能表达的不够准确

我们目前就采用的这种做法
而且loading是用动画来做的
看起来确实挺漂亮
你的100%的层可以避免其它动作很有创意
值得学习一下

# re: 轻松实现页面提交时，显示“提交中..” 回复

2005-03-08 16:38 by 听棠.NET

@边城浪子 :
你说的对，其他在页面最底下，设置把层隐藏也是可以做到的。

# re: 轻松实现页面提交时，显示“提交中..” 回复

2005-03-09 09:58 by Neter

确是比较简单，也很有创意，不过这也不是真正意义上的进度条，只是表面的东西吧？

# re: 轻松实现页面提交时，显示“提交中..” 回复

2005-03-09 11:09 by samuel

您的文章已经被Alpha Atom审核通过发表，请访问 http://www.alphatom.com/content/view/78/69/ 查看。

# re: 轻松实现页面提交时，显示“提交中..” 回复

2005-03-10 08:40 by scorpion007

你好，我看了你的文章后把它转到了我的blog,并且注明了原创是你这里，但是我在试验你的这个程序的时候有问题出现，我不是很明白，希望你指点一下。我习惯在看完有好的程序的时候，试验后把自己的心得和想法写进来。
以下是我的问题，请指点一下。
看了你的程序和图片，个人以为你是分开2个页面，分别为a,b页面，
a里面只有一个按钮上载，b页面就是数据以及显示页面提交层的页面。
把b页面放到a页面里面，点击按钮的时候b页面无法操作。
是否是这样的呢？？
如果不对，请指点，不然可否提供简单的源代码给我参考参考，谢谢？

# re: 轻松实现页面提交时，显示“提交中..” 回复

2005-03-10 09:07 by 听棠.NET

我使用的是一个页面，页面自身提交就可以了，那个“提交中”是一个层。

# re: 轻松实现页面提交时，显示“提交中..” 回复

2005-03-14 14:01 by Richer

http://www.microsoft.com/china/MSDN/library/WebServices/WebServices/nacwebteam11062001.mspx

该代码使用一些很棒的 DHTML 诀窍（例如较大的半透明 DIV），以在其进行运转的同时，基本上禁用与该页内容的交互。伪对话框使用户可以估计当前进度，并允许用户在无法忍受等待时取消操作。其他两个注.......

# re: 轻松实现页面提交时，显示“提交中..” 回复

2005-03-14 17:53 by loviy

当我的页面有.NET验证控件的时候,
验证不通过,则页面就会始终保持在提交中....loading......

# re: 轻松实现页面提交时，显示“提交中..” 回复

2005-03-14 18:30 by loviy

自问自解!
不知道何不合理?
lbt_save.Attributes.Add("onclick","javascript:{if (typeof(Page_ClientValidate) != 'function' || Page_ClientValidate()) document.getElementById('doing').style.visibility='visible';}");