Asp.net 按鈕幕布遮蓋效果實現方式

Asp.net button按鈕點擊后想要實現幕布效果來等待服務器端執行完成，這種需求雖說看起來很簡單，但真實做起來並不是那么簡單，涉及了很多細節點，而對於深入理解asp.net button生命周期的人來說自然不用多費周折。本人在完成此功能的時候想到了很多辦法，下面將我解決此問題的過程一一分享。申明一下，做這種需求時項目已經接近尾聲，因為是基於SharePoint 2007的項目（坑爹之處也在此了），而且整個項目並沒有涉及到WCF或者Web Service的服務或者是handle，我更不可能為了這一點功能直接去更改項目的結構，通過javascript去用ajax來實現。所以蛋疼的一幕幕出來了。

 

1. 我嘗試過用在button_click時間中注冊javascript.嘗試失敗

在前端asp頁面中我定義了一個幕布層div,並且寫了一個控制這個幕布層顯示和消失的javascript函數， 想着當執行button_click事件時，我用               

Page.ClientScript.RegisterStartupScript(Page.GetType(), (new Guid()).ToString(), script)方式調用前台幕布控制的javascript,也就是在Click事件最開始時調用幕布顯示的javascript,在Click事件結束后調用幕布消失的javascript，看起來都合情合理，其實不然。

這樣做，當點擊asp.net button按鈕時總是會出現幕布效果，並且幕布不會消失除非刷新頁面。我查看了瀏覽器加載完成后的source文件，在form結束標簽之前，只有第一次注冊的javascript，也就是通過asp.net button向頁面注冊javascript只會注冊一次，所以用這種方法想再click事件中執行兩次javascript是不可行的。

 

2. 我也嘗試過換另外一種思路解決，也就是當用戶點擊按鈕后，按鈕不可用，直到服務器執行完畢，按鈕再次可用，通過這種方式來等待服務器執行后台代碼，防止在服務器執行過程中用戶多次點擊按鈕造成多次提交數據。

想實現上述，我又嘗試了兩種方式，

一種是在Click 事件中指定button.Enable=false,在執行完所有的操作后執行button.Enable=true,這種方式也不行，因為button的click事件已經執行了，再對這個button設置Enable是無效的。

第二種方式是通過javascript控制。

在button中綁定一個ClientClick事件，指向javascript 函數，這個函數用來控制asp.net button的Enable，控制的方法如下：

下面是設置asp.net button不可用

var btn = document.getElementById("btn");

btn.setAttribute("disabled", "disabled");

設置button可用：

btn.removeAttribute("disabled");

這種方式也不可行，當設置了button不可用時，button的服務器端click事件就不會執行了。

但是按照這種思路，我們還是可以找到最后解決方法的。

3. 最后可實現的解決方案

首先我在aspx頁面中定義了一個幕布div,如下：

#shade
        {
            width: 400px;
            height: 300px;
            background-color: Gray;
            z-index: 999;
            left: 0px;
            top: 0px;
            position: absolute;
            -moz-opacity: 0.9; /*Firefox*/
            opacity: 0.9; /*Opera*/
            filter: alpha(opacity=90); /*IE*/
            display: none;
}
<div id="shade"> </div>

當然你也可以在shade中添加一些類似於正在加載的圖片。

再創建一個javascript函數

function shade() {
            var sha = document.getElementById("shade");
            sha.style.display = "block";
        }

好了再定義asp.net button

<asp:Button ID="btn" runat="server" Text="Button" OnClientClick=" shade()" />

Button的Click事件注冊在后台，Click事件里面的也方法不用做任何更改。

這種方式最后的實現效果是，當用戶點擊button就會出現幕布遮蓋效果，等待服務器端執行完畢，在這期間用戶不能做任何操作，比如再次點擊，當服務器端執行完成，幕布就會消失。

這里並沒有寫任何javascript來使幕布遮蓋消失，為什么當服務器執行完畢后幕布遮蓋會消失呢？

原因是因為button的click 事件執行完畢后頁面會回發，重新加載頁面會使得#shade的display:none。

簡單的效果實例圖(只作簡單的效果演示)：