忙裡偷閒的部落格

使用visual studio開發ASP.NET時，時常用到ScriptManager+UpdatePanel搭配來作到AJAX的效果。
但假設在一個UpdatePanel中，放了一個html button，想讓這個button以$.ajax()方式
跟後端程式要資料，然後展現在畫面上，這個button就會失效。原因在於UpdatePanel
只幫你作局部的資料刷新，而在它返回時只會更新UpdatePanel內的html，並沒有將JQuery的
ready()再一併加載進來。

解決方法是利用Sys.WebForms.PageRequestManager這個類別。如微軟的MSDN所言 :

您不會直接建立 PageRequestManager 類別的新執行個體。 而是在啟用部分頁面呈現時，便能夠使用執行個體。 呼叫 getInstance 方法可取得 PageRequestManager 類別的執行個體。

所以只需要在<script type="text/javascript"></script> 內宣告
var prm = Sys.WebForms.PageRequestManager.getInstance();
就能取得PageRequestManager的執行個體。再跟執行個體註冊一個自訂的function，來達到我們要的效果。
而PageRequestManager的事件有initializeRequest 、beginRequest 、pageLoading 、pageLoaded 、endRequest 。
至於事件的說明請詳閱MSDN。　接著看範例比較清楚 :

在vs裡開一個aaa.aspx，
如圖所示，佈置了ScriptManager、UpdatePanel，UpdatePanel
裡面包著一顆.NET Button(<asp:Button......>跟一顆HTML Button(<input type="button"......>))，
而我想作的效果是按下.NET Button後，觸發後端的Button_Click事件，事件裡回寫字串(ex: TextBox1.Text = "UpdatePanel Trigger!";)到Textbox中。而按下HTML Button，則是觸發JQiery的ajax()，跟bbb.aspx要資料，bbb.aspx 再Response.Write("JQuery AJAX Trigger!")給aaa.aspx接收。

依照傳統作法，當畫面第一次載入時，按下HTML Button後，Textbox中會正常顯示"UpdatePanel Trigger!"，
但只要按過.NET Button後，HTML BUTTON就失效了。
所以我們原先的程式碼得修改一下了 : (原始程式以藍色代表，加入的程式以紅色代表)

<script src="jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_pageLoaded(BindEvents);
        function BindEvents() {
            $('#HTMLButton').click(function() {
                $.ajax({
                    url: 'Default3.aspx',
                    data: {},
                    dataType: 'text',
                    type: 'POST',
                    contentType: "text/plain",
                    success: function(data) {
                        $('#TextBox1').val(data);
                    }
                });
            })
         }

    })
</script>

原理很簡單，將HTMLButton的click事件包成一個function:BindEvents 。
當頁面第一次被載入時($.ready())，利用PageRequestManager的add_pageLoaded
為BindEvents跟ScriptManager註冊，所以每次當非同步回來並更新頁面後就會觸發BindEvents了。
注意 : 要用PageRequestManager，畫面得先放一個ScriptManager，ScriptManager才會產生PageRequestManager
所對應的js檔給頁面調用，或是直接從微軟的CDN下載MicrosoftAjax.js也行，下載後匯入到專案中就能使用。

參考網站 : http://msdn.microsoft.com/zh-tw/library/bb311028(v=VS.90).aspx
             http://hi.baidu.com/moon_air/blog/item/7d2a33062cab617c0208810c.html