使用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
留言列表