javascript也玩pageLoad

原地址: http://www.cnblogs.com/hanxianlong/archive/2007/09/22/902154.html


  前幾天跟皺鍵討論ASP.NET AJAX的時候,他說在ASP.NET AJAX 下也有pageLoad事件,因爲對這個pageLoad沒有什麼編程經驗,所以也就不覺得有什麼。不過昨天晚上的一個功能讓我感覺到了這個pageLoad功能上的令人感嘆之處。
    衆所周知,ScriptManager是ASP.NET的的一個核心控件,如果一個頁面用到了AJAX Extentions控件的話,那麼該頁面上必須有ScriptManager控件。當頁面上出現了異常時,它不會再像普通的2.0的頁面那樣顯示出紅黃頁(在沒有進行任何處理的情況下),而是以alert的方式彈出對話框,告知用戶出現了異常。這種彈出對話框的方式一般來說應該也是可以令人接受的,不過,若想得到更高級的用戶體驗的話,可能就需要我們自己手動再寫一些代碼了。比如說出現像網易郵箱中當你要清空垃圾郵件箱時的對話框效果,需要我們自己手動再寫一些代碼來實現在html頁面上放置一個隱藏的層,該層用來顯示我們的異常信息。


  <div id="errorMessage" style="LEFT: -30px; POSITION: relative; TOP: -257px; visibility:hidden">
               <div class="title">
                   操作提示
               </div>
               <div class="alertTxt">
                   <span id="errorMessageLabel" runat="server"></span>
               </div>
               <div>
                   <input id="Button1" class="btn" type="button" value="OK" οnclick="javascript :onOK();
                </div>
            </div>
        </center>


然後,我們就可以利用此層,以及ASP.NET AJAX框架下的JS的pageLoad事件中寫關於異常處理的事件了。


<script language="javascript" type="text/javascript">
         function pageLoad()
         {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);
         }
         function onEndRequest(sender, e) 
         {
             // 異常發生時將對話框顯示給用戶
             if(e.get_error())
             {
                 // 顯示自定義對話框
                 $get("errorMessage").style.display = "block";
                 $get("errorMessageLabel").innerHTML ="出錯了,請重試!<br>" +  e.get_error().description;
                 // 通知PageRequestManager異常已經處理過
                 e.set_errorHandled(true);
             }
         }
         function onOK()
         {
             $get("errorMessage").style.display = "none";
         }
 </script>


  通過以上簡單的代碼,一個有着良好的用戶體驗的對話框就完成了。細細想想,這或許可以做爲整個網站上所有頁面上的公有js文件,將它嵌套到頁面中,則每個頁面的異常都會以一個良好體驗的對話框顯示給用戶。帥!
允許轉載,麻煩註明出處:http://www.cnblogs.com/hanxianlong


發佈了13 篇原創文章 · 獲贊 2 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章