程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> 關於ASP.NET >> ASP.NET服務器控件PleaseWaitButton

ASP.NET服務器控件PleaseWaitButton

編輯:關於ASP.NET

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>

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved