UpdatePanel的妙用：Incremental Content

　 　Incremental Content是我随意取的名字，我有時候會希望，把一些常見的場景，總結出ASP.NET AJAX一些比較固定的使用模式。Incremental Content是我為現在這個“模式”取的名字。這個模式的作用，就是使用UpdatePanel來不斷地在頁面上增加内容。

　 　是啊，說的沒錯。我當時的回答是：“這是因為UpdatePanel的設計初衷，可以很友善地為頁面帶入AJAX效果”。但是這并不能為 UpdatePanel帶來的這個問題進行開脫。不過在我簡單進行了思考之後，發現要讓UpdatePanel支援内容的遞增效果并不困難。我們隻要靈活 地運用UpdatePanel的工作機制即可。

　 　UpdatePanel在更新時，最後從伺服器端得到的是什麼呢？事實上得到的是需要更新的UpdatePanel的ID，以及UpdatePanel 中的内容。接下去作的事情自然不必多說，即使通過ID找到UpdatePanel所在的div（或者span），然後替換其innerHTML。

　 　等等，有沒有想到什麼？用戶端是如何找到需要更新的UpdatePanel？“通過ID”。既然是通過ID，我們為什麼不能讓UpdatePanel更 新到我們指定的區域呢？我們當然可以這麼做，下面的示例就是這樣實作UpdatePanel的Incremental Content的。

　　首先，在頁面上放置一個UpdatePanel，在它的ContentTemplate中，我們使用一個Visible為False的Panel來包裝了内容，它的作用，可以說是為了給每次添加的内容設定一個模版。如下：

Default.aspx

　　然後，我們在每次使用者點選按鈕之後，我們需 要将UpdatePanel中的控件内容進行修改。請注意，在Form_Load方法中，需要在非異步重新整理的情況下，将UpdatePanel中的内容清 空，這樣避免了在第一次加載頁面時UpdatePanel中出現内容。如下：

Default.aspx.cs

　　如果到這裡為止，相信大家能夠猜到執行的效果是怎麼樣的：每次送出後，UpdatePanel中的資訊被更改。這并不是我們需要的Incremental Content的效果。是以，我們還需要加一些JavaScript進行輔助。如下：

　　這段代碼才是Incremental Content的關鍵所在。這這段代碼中，我們響應了用戶端的pageLoaded事件，也就是說，我們在UpdatePanel更新完畢之後，對于重新整理 的UpdatePanel進行周遊。如果發現我們的目标UpdatePanel被更新了，則改變其ID，并建立一個div容器，添加到頁面中合适的地方。 這樣，UpdatePanel在下次進行更新時，就會将我們建立的容器作為用戶端的UpdatePanel，并為其設定innerHTML。

　　這就是Incremental Content。我們可以看到，伺服器端每次回傳的資料，隻會是我們新增的内容，而我們每次送出的内容，都會被保留在頁面上。如下：

　　Incremental Content的好處是什麼呢？減少資料傳輸量是一方面。另外，如果使用Incremental Content，一般來說查詢資料庫的次數就能減少，這樣就可以進一步降低資源消耗。

PS：

　　建議部落格園能夠使用Incremental Content方法。由于部落格園存在“重新整理全部評論”的操作，是以可以使用UpdatePanel嵌套的方式，對内UpdatePanel使用 Incremental Content，而重新整理全部評論時，則可以調用外部UpdatePanel的Update方法（或通過Trigger指定）。不過一旦使用了 Incremental Content方法，在“修改評論”和“删除評論”兩個功能上，可能就要改變實作方式了。

本文轉自 jeffz 51CTO部落格，原文連結：http://blog.51cto.com/jeffz/60220，如需轉載請自行聯系原作者