[ASP.NET] Ajax Sys.WebForms.PageRequestManager Sample

2010-05-25

7923
0
2011-11-11

Ajax Sys.WebForms.PageRequestManager Sample

已經忘了是什麼情況突然寫了這個小範例，不過既然寫了就記錄一下囉

主要是利用Ajax的Sys.WebForms.PageRequestManager類別(註1)

在進行非同步過程時加入額外自訂的動作

此範例用到以下二個事件

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest

Sys.WebForms.PageRequestManager.getInstance().add_endRequest

當進行Ajax動作查詢時於頁面上改變滑鼠圖示為Wait圖示

當進行完Ajax動作查詢時於頁面上改變滑鼠圖示為default圖示

(1)Page裡我們放置GridView*1、UpdatePanel*1、ScriptManager*1、Button*1、SqlDataSource1*1

設定好UpdatePanel的PostBackTrigger為Button的click事件及相關GridView的DataSource來源等設定

就不一一描述了

(2)接著在cs的部份利用add_beginRequest及add_endRequest事件註冊我們自訂的javascript進去

當然也可以直接寫在aspx頁面裡，但我習慣寫在.cs頁面囉

protected void Page_Load(object sender, EventArgs e) 
{ 
           string jsstr=" <script language=\"javascript\" type=\"text/javascript\"> \n"+ 
                        "   Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);  \n" + 
                        "   Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);  \n" + 
                        "   function BeginRequestHandler(sender, args)  \n" + 
                        "   {  \n" + 
                        "       document.body.style.cursor = 'wait';  \n" + 
                        "       document.getElementById(\"Query_Button\").style.cursor = 'wait';  \n" + 
                        "   }  \n" + 
                        "   function EndRequestHandler(sender, args) \n"+ 
                        "   {  \n" + 
                        "       document.body.style.cursor = 'default';  \n" + 
                        "       document.getElementById(\"Query_Button\").style.cursor = 'default';  \n" + 
                        "   }  \n" + 
                        " </script>"; 
           this.ClientScript.RegisterStartupScript(this.GetType(), "AjaxProcess", jsstr); 
           //this.ClientScript.RegisterClientScriptBlock(this.GetType(), "AjaxProcess", jsstr);

}

請注意必須是用RegisterStartupScript，若使用RegisterClientScriptBlock則會因為頁面元件生成的先後時間序關係，會有

javascript錯誤(Sys未定義的錯誤)

(3)接著為了清楚看出效果，所以在Button的click事件裡，利用Thread.Sleep做延遲

System.Threading.Thread.Sleep(5000);

結果：