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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
