實現功能：點選Repeater資料表每行的某一個按鈕，彈出遮罩層顯示“資料獲取中，請稍後.....”，後臺進行資料獲取的操作，獲取完成後，彈出相應的訊息框。

ShowAbnoramlServer.aspx頁面相關程式碼(點選Repeater表“更新”按鈕，呼叫頭部Update函式，傳遞資料，彈出遮罩層)

頭部：

<script src="Scripts/popJs.js" type="text/javascript"></script>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        function Update(aid, aip,date) 
 
{
            openNewDiv("newDiv");
            $.ajax(
                {
                    url: "ShowAbnoramlServers.aspx/UpdateServer",
                    type: "POST",
                    dataType: "json",
                    data: "{id:" + aid + ",ip:'" + aip + "',idate:'" + date + "'}",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        alert(data.d);
                        closeNewDiv("newDiv")
                        window.location.href = window.location.href;
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {

                        alert(errorThrown);

                    }
                }
                );
        }
 </script>

Repeater程式碼：

<table width="100%" cellpadding="0" cellspacing="0">
    <asp:Repeater ID="rptServer" runat="server">
    <HeaderTemplate>
    <tr id="head">
    <td>序號</td>
    <td>IP</td>
    <td>異常描述</td>
    <td>時間</td>
    <td> </td>
    </tr>
    </HeaderTemplate>
    <ItemTemplate>
    <tr  onmouseover="this.style.backgroundColor='#B6D2E0'" onmouseout="this.style.backgroundColor=''">
    <td><%# this.AspPager.PageSize * (this.AspPager.CurrentPageIndex - 1) + Container.ItemIndex + 1%></td>
    <td><%# Eval("AnomalyServerIP") %></td>
    <td><%# Eval("Remark").ToString().Length>50?Eval("Remark").ToString().Substring(0,50):Eval("Remark") %></td>
    <td><%# Eval("IDate","{0:d}") %></td>
    <td>
        <input id="Button1" type="button" value="更 新" onclick="Update(<%# Eval("AnomalyServerID") %>,'<%# Eval("AnomalyServerIP") %>','<%# Eval("IDate") %>')" />
 

     </td>
    </tr>
    </ItemTemplate>
    </asp:Repeater>
     <tr>
        <td align="center" colspan="5">
            <webdiyer:AspNetPager ID="AspPager" runat="server" 
                onpagechanged="AspPager_PageChanged" 
                CustomInfoHTML="當前:%CurrentPageIndex%/%PageCount% 頁    總計:%RecordCount%條" 
                CustomInfoSectionWidth="20%" CustomInfoTextAlign="Left" FirstPageText="【首頁】" 
                LastPageText="【末頁】" NextPageText="下一頁" PrevPageText="上一頁" 
                ShowCustomInfoSection="Left" PageSize="25" AlwaysShow="True">
            </webdiyer:AspNetPager> 
            </td>
        </tr>
</table>
 

頭部Update函式中的以下兩函式在popJs.js檔案中

openNewDiv("newDiv");

closeNewDiv("newDiv");

popJs.js程式碼：

 var docEle = function () {
        return document.getElementById(arguments[0]) || false;
    }

    function openNewDiv(_id) {
        var m = "mask";
        if (docEle(_id)) document.body.removeChild(docEle(_id));
        if (docEle(m)) document.body.removeChild(docEle(m));

        //mask遮罩層

        var newMask = document.createElement("div");
        newMask.id = m;
        newMask.style.position = "absolute";
        newMask.style.zIndex = "1";
        _scrollWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
        _scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        newMask.style.width = _scrollWidth + "px";
        newMask.style.height = _scrollHeight + "px";
        newMask.style.top = "0px";
        newMask.style.left = "0px";
        newMask.style.background = "#33393C";
        newMask.style.filter = "alpha(opacity=40)";
        newMask.style.opacity = "0.40";
        document.body.appendChild(newMask);

        //新彈出層

        var newDiv = document.createElement("div");
        newDiv.id = _id;
        newDiv.style.position = "absolute";
        newDiv.style.zIndex = "9999";
        newDivWidth = 150;
        newDivHeight = 50;
        newDiv.style.width = newDivWidth + "px";
        newDiv.style.height = newDivHeight + "px";
        newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px";
        newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px";
        newDiv.style.background = "#EFEFEF";
        newDiv.style.border = "1px solid Gray";
        newDiv.style.padding = "5px";
        newDiv.style.color = "Blue";
        newDiv.innerHTML = "資料獲取中，請稍後...... ";
        document.body.appendChild(newDiv);

        //彈出層滾動居中

        function newDivCenter() {
            newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px";
            newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px";
        }
        if (document.all) {
            window.attachEvent("onscroll", newDivCenter);
        }
        else {
            window.addEventListener('scroll', newDivCenter, false);
        }

        //關閉新圖層和mask遮罩層

//        var newA = document.createElement("a");
//        newA.href = "#";
//        newA.innerHTML = "關閉";
//        newA.onclick = function () {
//            if (document.all) {
//                window.detachEvent("onscroll", newDivCenter);
//            }
//            else {
//                window.removeEventListener('scroll', newDivCenter, false);
//            }
//            document.body.removeChild(docEle(_id));
//            document.body.removeChild(docEle("mask"));
//            return false;
//        }
//        newDiv.appendChild(newA);
    }

    function closeNewDiv(_id) {
        document.body.removeChild(docEle(_id));
        document.body.removeChild(docEle("mask"));
    }


ShowAbnoramlServer.aspx.cs頁面呼叫到的UpdateServer函式

    [WebMethod]
    public static string UpdateServer(string id, string ip, string idate)
    {
        HostDataAccess hostDa = new HostDataAccess();
        hostDa.HostServer = new Host(ip);
        hostDa.HostServer.ID = id;
        string strRes = hostDa.GetNewFlows(idate);        
        return strRes;
    }