iT邦幫忙

DAY 27
3

ASP.NET 由淺入深系列 第 27

91之ASP.NET由淺入深 不負責講座 Day27 - AJAX.NET(3) UpdatePanel簡介

  • 分享至 

  • xImage
  •  

在上一篇文章介紹到了什麼是AJAX,以及為什麼會需要AJAX這個技術後,
我們這一篇文章要來介紹『無痛,但算偽裝型AJAX的UpdatePanel』。

上一篇文章一直強調一點,UpdatePanel != AJAX,其實是指不完全相等。
嚴格說起來應該是『UpdatePanel = Partial Render by AJAX』
這篇文章我們會介紹一下,什麼是Partial Render。
1.UpdatePanel簡介
(1)出發點:
在不影響傳統網頁架構底下,最快速且容易的方式,將傳統HttpRequest,透過Scriptmanager與UpdatePanel,轉用XMLHttpRequest要求server端資料。

(2)迷思:
並非只有送出AJAX需要的資料給server端,而是仍將全頁資料送出給server處理,只是以非同步方式部分呈現(Partial Render)。

2.使用UpdatePanel操作網頁流程,我們用圖來說明:

送出(submit)資料時,會被AJAX.NET library攔截,轉由AJAX.NET以XMLHttpRequest去對server進行request跟response。(但這個時候其實已經把form上所有資料submit,也會經過所有server端的生命週期)最後針對選取的控制項(欲更新的範圍)HTML,進行重新Render。因為通常只有部分範圍,所以被稱為『部分呈現』(Partial Render)。

3.使用UpdatePanel的網頁事件流程,如圖所示:

4.使用UpdatePanel與否的效能差異
因為使用UpdatePanel,網頁上的標記會變多,還要額外加上將Submit要求轉成XMLHttpRequest處理的程式碼,所以要求的大小會比一般的網頁大,但是由於採用「部分呈現」,僅需要修改UpdatePanel涵蓋範圍的HTML,所以回應的大小端看UpdatePanel裡的標記內容大小有多少。

這邊指的最佳化則是指將UpdatePanel涵蓋且需要部分更新的內容大小降到最低,可以不更新的部分就不要放在UpdatePanel裡。

我們用一張圖表來看一下效能差異:

5.AJAX架構-設計方法選擇
這邊以MSDN上的表格來說明,根據需要的情況可以採用不同AJAX程度的技術或架構來設計網頁。

6.補充『遠端方法呼叫』
PageMethod:
(1)ScriptManager的EnablePageMethods屬性設定為True
(2)後置程式碼method需加上[System.Web.Services.WebMethod] 修飾語,並宣告成靜態方法(Static or Share)。
(3)Javascript呼叫方式:PageMethods.MethodName(參數,CallbackFunction)。
(4)注意:無法使用在User Control與Custom Control裡。
(5)可參考:[ASP.NET AJAX]PageMethod:用javascript呼叫server端的method

Web Service
(1)asmx
(2)WebMethod修飾語
(3)ScriptManager的Services屬性(也就是ServiceReference),加入欲參考的asmx
(4)Javascript呼叫方式:Service的類別名稱.MethodName(參數, CallbackFunction)


上一篇
91之ASP.NET由淺入深 不負責講座 Day26 - AJAX.NET(2)
下一篇
91之ASP.NET由淺入深 不負責講座 Day28 - jQuery with Ajax in ASP.NET
系列文
ASP.NET 由淺入深30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言