ASP.NET服務器控件PleaseWaitButton

2024-07-10 13:09:50

字體：大中小

來源：轉載

供稿：網友

國內最大的酷站演示中心!

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" %>

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));
    output.write("</div>");

    // render the button in an encapsulating <div> tag of its own
    output.write(string.format("<div id='pleasewaitbuttondiv_{0}'>",
                                this.clientid));
    output.write(sbuttonhtml);
    output.write("</div>");
}
　　這種把button還原成一個字符串緩沖然后處理它的onclick內容的技術是一件很危險的事情（is certainly a hack）. 但它可以讓我們在父button類中實施標準的驗證代碼，然后再實現我們的pleasewait() javascript函數調用。如果不這樣做，我們只能在驗證代碼之前就在onclick屬性中實施我們的pleasewait()函數調用，除非我們愿意完全重寫父button類的屬性的呈現。這樣就算頁面上有輸入錯誤也會產生我們并不希望的按鈕隱藏和顯示"please wait"信息的效果。因此，我們必須在onclick句柄中強行令我們的客戶端pleasewait()函數出現在客戶端頁面驗證之后。
　　onclick屬性的修改發生在modifyjavascriptonclick()函數中。這個函數獲取按鈕呈現的html字符串，并檢查看是否存在onclick屬性。如果是，這個函數會檢查是否有使用客戶端驗證代碼。如果是這種情況的話，我們定義的pleasewait()函數會加在已經存在的onclick代碼的最后面，緊跟在客戶端檢查的boolin變量page_isvalid后面。這個變量代表是否使用了驗證控件。如果page_isvalid的值是false，"please wait"信息將不顯示。如果為true則顯示。
private string modifyjavascriptonclick(string shtml)
{
    // thanks to codeproject member kjellsj (kjell-sverre jerijaervi)
    // for code ideas to allow the button to work with client-side validation

string sreturn = "";
string spleasewaitcode = generatepleasewaitjavascript();

    // is there an existing onclick attribute?
    regex ronclick = new regex("onclick=/"(?<onclick>[^/"]*)");
    match monclick = ronclick.match(shtml);
    if (monclick.success)
    {
        // there is an existing onclick attribute;
        // add our code to the end of it; if client-side
        // validation has been rendered, make sure
        // we check to see if the page is valid;
        string sexisting = monclick.groups["onclick"].value;
        string sreplace = sexisting
                 + (sexisting.trim().endswith(";") ? "" : "; ");

        if (isvalidatorincludescript() && this.causesvalidation)
        {
            // include code to check if the page is valid
            string scode = "if (page_isvalid) " + spleasewaitcode
                            + " return page_isvalid;";
            // add our code to the end of the existing onclick code;
            sreplace = sreplace + scode;
        }
        else
        {
            // don't worry about the page being valid;
            sreplace = sreplace + spleasewaitcode;
        }

        // now substitute our onclick code
        sreplace = "onclick=/"" + sreplace;
        sreturn = ronclick.replace(shtml, sreplace);
    }
    else
    {
        // there isn't an existing onclick attribute;
        // add ours
        int i = shtml.trim().length - 2;
        string sinsert = " onclick=/"" + spleasewaitcode + "/" ";
        sreturn = shtml.insert(i, sinsert);
    }

    return sreturn;

}

　　這個isvalidatorincludescript() 利用上面的檢查來查看是否有使用頁面注冊的asp.net驗證控件的標準javascript代碼塊。下面則用一個簡單的方法測試了是否有驗證代碼和像page_isvalid的變量存在。
private bool isvalidatorincludescript()
{
    // return true if this page has registered javascript
    // for client-side validation; this code may not be registered
    // if asp.net detects what it thinks (correctly or incorrectly)
    // is a down-level browser.

    return this.page.isstartupscriptregistered("validatorincludescript");
}　　下面這個generatepleasewaitjavascript()構建了包含在onclick屬性中的pleasewait() javascript函數。我們可以通過檢查控件的屬性來決定想要的布局。
private string generatepleasewaitjavascript()
{
    // create a javascript "pleasewait()" function call
    // suitable for use in an onclick event handler

    string smessage = "";
    string stext = _pleasewaittext;
    string simage = (_pleasewaitimage != string.empty
        ? string.format(
        "<img src=/"{0}/" align=/"absmiddle/" alt=/"{1}/"/>"
        , _pleasewaitimage, _pleasewaittext )
        : string.empty);

    // establish the layout based on pleasewaittype
    switch (_pleasewaittype)
    {
        case pleasewaittypeenum.textthenimage:
            smessage = stext + simage;
            break;
        case pleasewaittypeenum.imagethentext:
            smessage = simage + stext;
            break;
        case pleasewaittypeenum.textonly:
            smessage = stext;
            break;
        case pleasewaittypeenum.imageonly:
            smessage = simage;
            break;
    }

    // return the final code chunk
    string scode = string.format(
        "pleasewait('pleasewaitbuttondiv_{0}',
                    'pleasewaitbuttondiv2_{1}', '{2}');"
        , this.clientid, this.clientid, smessage);
    scode = scode.replace("/"", """);

return scode;
}
　　如果指定了一個pleasewaitimage，就必須包含額外的一段javascript代碼來通知客戶端預載該圖像。這段腳本的注冊應該出現在重寫的onprerender方法中。注冊的鍵是圖像的名稱；如果多個按鈕都使用同一圖像，預載腳本只需要實施一次。這里使用了一個正則表達式來創建javascript圖像變量，以保證特殊字字符（比如文件路徑中的斜線）轉化成下劃線。

protected override void onprerender(eventargs e)
{
base.onprerender (e);

    // if we're using an image, register some javascript
    // for client-side image preloading
    if (_pleasewaitimage != string.empty
        && _pleasewaittype != pleasewaittypeenum.textonly)
        registerjavascriptpreloadimage(_pleasewaitimage);
}

private void registerjavascriptpreloadimage(string simage)
{
regex rex = new regex("[^a-za-z0-9]");
string simgname = "img_" + rex.replace(simage, "_");

    stringbuilder sb = new stringbuilder();
    sb.append("<script language='javascript'>");
    sb.append("if (document.images) { ");
    sb.appendformat("{0} = new image();", simgname);
    sb.appendformat("{0}.src = /"{1}/";", simgname, simage);
    sb.append(" } ");
    sb.append("</script>");

this.page.registerclientscriptblock(simgname + "_preloadscript",
sb.tostring());
}

client-side functions

　　嵌入的文本文件javascript.txt包含了隱藏按鈕的<div>和顯示"please wait"信息或圖像的客戶端代碼。這些代碼在重寫的oninit()方法中調用的私有方法registerjavascriptfromresource()加載。這個方法調用泛型方法getembeddedtextfile() ，在這個泛型方法中把文件做為源加載而把內容返回成字符串。

protected override void oninit(eventargs e)
{
    base.oninit(e);

    // the client-side javascript code is kept
    // in an embedded resource; load the script
    // and register it with the page.
    registerjavascriptfromresource();
}

private void registerjavascriptfromresource()
{
    // load the embedded text file "javascript.txt"
    // and register its contents as client-side script
    string sscript = getembeddedtextfile("javascript.txt");
    this.page.registerclientscriptblock("pleasewaitbuttonscript", sscript);
}

private string getembeddedtextfile(string stextfile)
{
// generic function for retrieving the contents
// of an embedded text file resource as a string

    // we'll get the executing assembly, and derive
    // the namespace using the first type in the assembly
    assembly a = assembly.getexecutingassembly();
    string snamespace = a.gettypes()[0].namespace;

    // with the assembly and namespace, we'll get the
    // embedded resource as a stream
    stream s = a.getmanifestresourcestream(
                string.format("{0}.{1}", snamespace, stextfile)
            );

    // read the contents of the stream into a string
    streamreader sr = new streamreader(s);
    string scontents = sr.readtoend();

sr.close();
s.close();

    return scontents;
}
　　javascript.txt嵌入資源包含了按鈕在javascript的onclick句柄中執行的客戶端方法pleasewait()。這段代碼也調用了一個客戶端方法hidediv()以隱藏按鈕的容器<div>，然后通過設置innerhtml屬性把信息或圖像組裝進之前空的<div>標記中。輔助函數getdiv()則是通過檢查document.getelementbyid, document.all, 和 document.layers用id返回一個<div>對象，保證了不同瀏覽器的兼容性。下面是javascript.txt的全部代碼：
<script language="javascript">
function getdiv(sdiv)
{
    var div;
    if (document.getelementbyid)
        div = document.getelementbyid(sdiv);
    else if (document.all)
        div = eval("window." + sdiv);
    else if (document.layers)
        div = document.layers[sdiv];
    else
        div = null;

return div;
}

function hidediv(sdiv)
{
    d = getdiv(sdiv);
    if (d)
    {
        if (document.layers) d.visibility = "hide";
        else d.style.visibility = "hidden";
    }
}

function pleasewait(sdivbutton, sdivmessage, sinnerhtml)
{
    hidediv(sdivbutton);
    var d = getdiv(sdivmessage);
    if (d) d.innerhtml = sinnerhtml;
}
</script>

原文鏈接：http://www.codeproject.com/aspnet/pleasewaitbutton.asp

上一篇：怎樣從ASP.NET 2.0中讀取連接字符串的設置

下一篇：ASP.NET 2.0 WebService中傳遞DataTable參考