Introduction
在web application的表单提交过程中显示“please wait”信息或者是gif动画图片通常是很有用的，特别是提交过程比较久的情况。我最近开发了一个调查提交程序，在程序里内部用户通过一个网页上传excel电子表格。程序将上传的电子表格数据插入到数据库中。这个过程只需要几秒钟，但即便是几秒钟，在网页是看来却是非常明显的等待过程。在程序测试的时候，一些用户重复地点击上传按钮。因此，提供一个视觉的信息来告诉人们上传正在进行中是很有用的。并同时把上传按钮一起隐藏掉，以防止多次点击。这里介绍的控件是Button控件的子类，它演示了如何把客户端javascript代码封装在asp.net服务器控件中来提供便利的功能。
虽然外面已经有很多javascript的例子来完成这件事情，但当我试图把这些功能封装到asp.net控件中时我发现了一些问题。我最开始尝试通过javascript的onclick句柄来使button无效，并用另外的文本取代。但我发现很棘手，这样会妨碍到asp.net服务器端的click事件的功能。而最终行得通的，并且对不同浏览器也有很好支持的方法是，让button在div标记中呈现。div可以隐藏并且不妨碍asp.net的click事件。
Using the control
作为正常的button控件的派生，PleaseWaitButton的功能与它基本一样。它通过三个附加的属性来管理当按钮被点击后"please Wait"信息或图片的显示。
PleaseWaitText
这是显示的客户端文本信息，如果存在，当按钮被点击它将取代按钮。
PleaseWaitImage
这是显示的图像文件（比如gif动画图像），如果存在，当按钮被点击它将取代按钮。这个属性将变成<img>标记中的src属性。
PleaseWaitType
PleaseWaitTypeEnum枚举值之一：TextOnly,ImageOnly,TextThenImage,或者ImageThenText。它控制消息和图片的布局。
下面是一个.aspx文件示例，它演示了一个设置了PleaseWaitText和PleaseWaitImage的PleastWaitButton。
<%@ Page language="C#" %>
<%@ Register TagPrefix="cc1" Namespace="JavaScriptControls"
Assembly="PleaseWaitButton" %>
<script runat="server">
private void PleaseWaitButton1_Click(object sender, System.EventArgs e)
{
// Server-side Click event handler;
// simulate something that could take a long time,
// like a file upload or time-consuming server processing
DateTime dt = DateTime.Now.AddSeconds(5);
while (DateTime.Now < dt)
{
// do nothing; simulate a 5-second pause
}
// at the end of the loop display a success message
// and hide the submit form
panelSuccess.Visible = true;
PleaseWaitButton1.Visible = false;
}
</script>
<html>
<head>
<title>Testing PleaseWaitButton</title>
</head>
<body>
<form id="Form1" method="post" runat="server">
<P>Testing the PleaseWaitButton control.</p>
<cc1:PleaseWaitButton id="PleaseWaitButton1" runat="server"
Text="Click me to start a time-consuming process"
PleaseWaitText="Please Wait "
PleaseWaitImage="pleaseWait.gif"
OnClick="PleaseWaitButton1_Click" />
<asp:Panel id="panelSuccess" runat="server"
visible="false">
Thank you for submitting this form. You are truly
the coolest user I've ever had the pleasure of serving.
No, really, I mean it. There have been others, sure,
but you are really in a class by yourself.
</asp:Panel>
</form>
</body>
</html>
How It Works
PleaseWaitButton控件在<div>标记中呈现了一个标准的asp.net Button。它也呈现了一个空的<div>标记给
信息/图像。在点击按钮时，由Javascript函数(见下面的客户端函数)控制按钮的隐藏和信息的显示。为了方便起见，由PleaseWaitButton服务器控件处理所有必需的javascript客户端代码的实施。
由于PleaseWaitButton实施它自己的javascript onclick句柄，所以我们必须采取一些额外的措施来保持原有的onclick句柄，并且允许控件清晰地运行一些客户端验证代码。为了达到此目的，我们首先把Button基类还原为一个字符串缓冲，然后巧妙地处理它，把我们定义的onclick代码包含进去。
protected override void Render(HtmlTextWriter output)
{
// Output the button's html (with attributes)
// to a dummy HtmlTextWriter
StringWriter sw = new StringWriter();
HtmlTextWriter wr = new HtmlTextWriter(sw);
base.Render(wr);
string sButtonHtml = sw.ToString();
wr.Close();
sw.Close();
// now modify the code to include an "onclick" handler
// with our PleaseWait() function called appropriately
// after any client-side validation.
sButtonHtml = ModifyJavaScriptOnClick(sButtonHtml);
// before rendering the button, output an empty <div>
// that will be populated client-side via javascript
// with a "please wait" message"
output.Write(string.Format("<div id='pleaseWaitButtonDiv2_{0}'>",
this.ClientID));
文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
