开发学院网页设计 JavaScript 使用 JavaScript 更新 UpdatePanel 阅读

使用 JavaScript 更新 UpdatePanel

　2010-09-14 13:20:15　来源：WEB开发网　闂傚倸鍊搁崐鎼佸磹妞嬪孩顐芥慨姗嗗厳缂傛氨鎲稿鍫罕闂備礁婀遍搹搴ㄥ窗閺嶎偆涓嶆い鏍仦閻撱儵鏌ｉ弴鐐测偓鍦偓姘炬嫹

闂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗〒姘ｅ亾妤犵偛顦甸弫鎾绘偐閹绘帞鈧參姊哄Ч鍥х仼闁诲繑鑹鹃悾鐑藉蓟閵夛妇鍘甸梺瑙勵問閸犳牠銆傛總鍛婄厱閹艰揪绱曟牎闂侀潧娲ょ€氫即鐛幒妤€绠ｆ繝闈涘暙娴滈箖鏌ｉ姀鈶跺湱澹曟繝姘厵闁绘劦鍓氶悘杈ㄤ繆閹绘帞澧涚紒缁樼洴瀹曞崬螖閸愬啠鍓濈换娑樼暆婵犱胶鏁栫紓浣介哺閹瑰洤鐣烽幒鎴僵闁瑰吀鐒﹂悗鎼佹⒒娴ｇ儤鍤€闁搞倖鐗犻獮蹇涙晸閿燂拷

濠电姷鏁告慨鐑藉极閸涘﹥鍙忔い鎾卞灩缁狀垶鏌涢幇闈涙灈鐎瑰憡绻冮妵鍕箻鐎靛摜鐣奸梺纭咁潐濞茬喎顫忕紒妯肩懝闁逞屽墮宀ｈ儻顦查悡銈夋煏閸繃鍋繛宸簻鎯熼梺瀹犳〃閼冲爼宕濋敃鈧—鍐Χ閸℃鐟愰梺鐓庡暱閻栧ジ宕烘繝鍥у嵆闁靛骏绱曢崢顏堟⒑閹肩偛鍔楅柡鍛⊕缁傛帟顦寸紒杈ㄥ笚濞煎繘鍩℃担閿嬵潟闂備浇妗ㄩ悞锕傚箲閸ヮ剙鏋侀柟鍓х帛閺呮悂鏌ㄩ悤鍌涘闂傚倸鍊搁崐鎼佸磹妞嬪孩顐芥慨姗嗗厳缂傛氨鎲稿鍫罕闂備礁婀遍搹搴ㄥ窗閺嶎偆涓嶆い鏍仦閻撱儵鏌ｉ弴鐐测偓鍦偓姘炬嫹　　闂傚倸鍊搁崐鎼佸磹閻戣姤鍤勯柤鍝ユ暩娴犳氨绱撻崒娆掑厡缂侇噮鍨堕妴鍐川閺夋垹鍘洪悗骞垮劚椤︻垶宕￠幎鑺ョ厪闊洦娲栨牎闂佽瀵掗崜鐔奉潖閾忓湱纾兼俊顖氭惈椤矂姊洪崷顓涙嫛闁稿妫濋幆鈧い蹇撴祩濡嫰姊洪崫鍕拱婵炲弶岣块幑銏犫攽婵犲嫮鏉搁梺鍝勬川婵兘鎮伴妷鈺傗拻濞达絽鎼敮璺侯熆閻熷府鏀荤紒鍌氱Т楗即宕煎锝呬壕闁哄啫鐗嗙粈鍐┿亜韫囧海顦﹀ù婊堢畺閺屻劌鈹戦崱娑扁偓妤€顭胯閸犳牠婀侀梺缁樕戦悷銉р偓姘煎枤缁粯銈ｉ崘鈺冨幈濡炪倖鍔戦崐鏇㈠几鎼淬劍鐓熼煫鍥ь儏閸旀粓鏌曢崶褍顏€殿喗娼欒灒闁告繂瀚濠碉紕鍋戦崐鎴﹀垂濞差亝鍋￠柍鍝勬噹缁犳牠鏌嶉埡浣告殲闁稿海鍠栭弻鏇㈠炊瑜嶇花濠氭煙閸戙倖瀚�

核心提示：在ASP.NET AJAX 機制中，UpdatePanel 有著相當重要的地位，使用 JavaScript 更新 UpdatePanel，它讓開發人員不用撰寫 AJAX 相關程式碼，就能享有 AJAX 的效果，如下範例傳入 UpdatePanel 的 ClientID 即可，實際執行的結果頁面就不會再閃爍了，一般包含在

在ASP.NET AJAX 機制中，UpdatePanel 有著相當重要的地位，它讓開發人員不用撰寫 AJAX 相關程式碼，就能享有 AJAX 的效果。一般包含在 UpdatePanel 中的子控制項，若子控制項有執行 PostBack 動作時，UpdatePanel 機制在前端會去攔截 __doPostBack 函式，使得控制項產生的 PostBack都會經由 UpdatePanel 統一處理局部更新的動作。

可是有時我們會需要透過 JavaScript 要求 UpdatePanel 做更新的動作，一般都會以為直接呼叫 __doPostBack 即可。以下以一個實例來做測試，我們在頁面的 UpdatePanel 放置一個 Label 來顯示最新時間。然後 Input (type=button)在 onclick 直接呼叫 __doPostBack 函式。

*.aspx

1　　　　<asp:ScriptManagerID="ScriptManager1"runat="server"/> 2　　　　<div> 3　　　　　　<asp:UpdatePanelID="UpdatePanel1"runat="server"> 4　　　　　　　　<ContentTemplate> 5　　　　　　　　　　ServerTime: 6　　　　　　　　　　<asp:LabelID="Label1"runat="server"Text="Label"></asp:Label> 7　　　　　　　　</ContentTemplate> 8　　　　　　</asp:UpdatePanel> 9　　　　　　<inputid="Button1"type="button"value="button"onclick="__doPostBack('','');"/> 10　　　　</div>

*.aspx.vb

1　　ProtectedSubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesMe.Load 2　　　　Label1.Text=Now.ToString() 3　　EndSub

可是實際執行並不如預期，UpdatePanel 中的時間是更新了，可是頁面會產生閃爍的情形，這個 PostBack 並不會受 UpdatePanel 控管。

其實只要做一點修改就可以要求 UpdatePanel 做更新的動作，就是在 __doPostBack 函式的第一個引數 (eventTarget)，如下範例傳入 UpdatePanel 的 ClientID 即可。實際執行的結果頁面就不會再閃爍了，因為 PostBack 動作已經在 UpdatePanel 的控管中。

<inputid="Button1"type="button"value="button"onclick="__doPostBack('UpdatePanel1','');"/>

UpdatePanelRefresh.rar下载:http://file.ddvip.com/2008_10/1224665246_ddvip_5201.rar