用戶js和ASP.NET UpdatePanel 控件之間的互動

用戶js和ASP.NET UpdatePanel 控件之間的互動：

• UpdatePanel更新完成以後調用js
• 使用js激活UpdatePanel更新

首先是今天代碼使用到的內容：UpdatePanel更新完成以後調用js。

 

關鍵代碼： Sys.WebForms.PageRequestManager.getInstance().add_endRequest(AddTextBoxFouce);

事出緣由：

原先用JQuery設計了一段代碼，$().ready（頁面加載完成，即$(document).ready）以後，運行AddTextBoxFouce()給一部分TextBox控件（對應的ＨＴＭＬ是<input type="text"/>）綁定了blur事件。具體的功能就是，有一些文本框，輸入其中一個值，對應的會有某個框也跟着變更，有的是其中一個輸入「-1」，另外一個變成「+1」；有的是輸入「2」，另外一個也變成「２」。

$().ready(function () {
                AddTextBoxFouce();
});

但今天在測試的時候發現，UpdatePanel更新以後，包含在UpdatePanel當中的文本框上的綁定的blur事件沒了！頁面加載完成以後全部的$().ready()都被運行了一個，而後相應的文本框也都綁定了blur事件。這部分的設計是沒錯的。出現問題的多是，UpdatePanel更新以後，包括在UpdatePanel控件當中的內容dom，被從新替換過了。這些dom當中的文本框都是沒有綁定blur事件的。

 

仔細檢查、肯定是這個緣由以後，就想到了解決的辦法：一個方案Ａ，那就是在觸發UpdatePanel更新的按鈕上添加"onclick"；另外一個方案Ｂ，UpdatePanel更新觸發事件上，添加代碼，從新調用 AddTextBoxFouce()。

方案Ａ，按鈕上添加"onclick"，這個涉及到事件觸發的前後順序，也涉及到ASP.NET AJAX腳本和JQuery之間的衝突（JQuery能夠清除dom上的全部事件）。由於時間的關係，寫這篇文章的同時作了一個簡單的測試，結果是先激發客戶端普通的"onclick"，而後才提交更新（有多是提交到服務器端再返回同意的延遲，可是一樣是沒有意義的）。

方案Ｂ，就須要研究UpdatePanel事件激發（其實是ScriptManager的事件激發）。這個原先研究過，時間久了印象已經模糊，還好今天「手氣不錯」，很快就搜到了幾個很給力的博客。找到了相關的代碼，添加到頁面上測試了兩遍，問題因而解決了。
須要注意的是，Sys.WebForms.PageRequestManager.getInstance().add_endRequest(AddTextBoxFouce)這條語句，須要放在<asp:ScriptManager>後面。

 

而後，是使用js激活UpdatePanel更新

解決方案一：使用隱藏的Button來觸發。
解決方案二：__doPostBack('panelName','');
另外，嘗試着尋找Sys.WebForms.PageRequestManager相似的類庫來實現，結果暫時沒有找到。

 

參考資料：
《Sys.WebForms.PageRequestManager 類》（微軟MSDN）
http://msdn.microsoft.com/zh-cn/library/bb311028.aspx

 

《UpdatePanel觸發javascript腳本技巧》
http://www.cnblogs.com/Clingingboy/archive/2007/10/10/920038.html

《（轉）AJAX 中Sys.WebForms.PageRequestManager的事件激發順序 》
http://blog.csdn.net/xd43100678/archive/2010/10/20/5953579.aspx

《使用js刷新UpdatePanel 》
http://www.cnblogs.com/MythYsJh/archive/2010/04/09/1708124.html

《ScriptManager和UpdatePanel控件的使用（轉）》
http://hi.baidu.com/sidihu/blog/item/6745ee8ee164e1eb513d9286.html

《ASP.NET AJAX入門系列（7）：使用客戶端腳本對UpdateProgress編程 》
http://www.cnblogs.com/Terrylee/archive/2006/11/12/aspnet_ajax_updateprogress_part2.html

《javascript裏經過腳本觸發UpdatePanel的刷新 》
http://www.cnblogs.com/caiyuanzi/archive/2010/12/24/1916102.html

《UpdatePanel外部控件更新》

http://vergis.blog.163.com/blog/static/611671662009970255774/?fromdm&fromSearch&isFromSearchEngine=yes