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

想到這個使用方式的原因，是因為在中午與Bing對UpdatePanel的一些問題進行了討論。他談到，使用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來包裝了內容，它的作用，可以說是為了給每次添加的內容設定一個模版。如下：

<div id="inputContainer"><asp:UpdatePanel ID="upAppendContent" runat="server"><ContentTemplate><strong>您在<asp:Literal runat="server" ID="time" /></strong><br /><asp:Literal runat="server" ID="appendMessage"></asp:Literal><hr /></ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="btnAppend" /></Triggers></asp:UpdatePanel> </div><br /><br /><asp:TextBox ID="txtAppendMessage" runat="server"></asp:TextBox> <asp:Button ID="btnAppend" runat="server" Text="btnAppend" OnClick="btnAppend_Click" />

?

然后，我們在每次用戶點擊按鈕之后，我們需要將UpdatePanel中的控件內容進行修改。請注意，在Form_Load方法中，需要在非異步刷新的情況下，將UpdatePanel中的內容清空，這樣避免了在第一次加載頁面時UpdatePanel中出現內容。如下：

protected void Page_Load(object sender, EventArgs e) {if (!ScriptManager.GetCurrent(this).IsInAsyncPostBack){this.upAppendContent.ContentTemplateContainer.Controls.Clear();} }protected void btnAppend_Click(object sender, EventArgs e) {this.time.Text = DateTime.Now.ToString("HH時mm分ss秒");this.appendMessage.Text = HttpUtility.HtmlEncode(this.txtAppendMessage.Text); }

?

如果到這里為止，相信大家能夠猜到執行的效果是怎么樣的：每次提交后，UpdatePanel中的信息被更改。這并不是我們需要的Incremental Content的效果。因此，我們還需要加一些JavaScript進行輔助。如下：

<script type="text/javascript" language="javascript">Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(sender, e){var upID = "<%= this.upAppendContent.ClientID %>";var refreshedPanels = e.get_panelsUpdated();for (var i = 0; i < refreshedPanels.length; i++){if (refreshedPanels[i].id == upID){refreshedPanels[i].id = upID + Math.floor(9999 * Math.random());var div = document.createElement("div");div.id = upID;$get("inputContainer").appendChild(div);return;}}}); </script>

?

這段代碼才是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方法，在“修改評論”和“刪除評論”兩個功能上，可能就要改變實現方式了。

這是我的一點建議，供dudu參考。:)

轉載于:https://www.cnblogs.com/JeffreyZhao/archive/2007/03/29/Incremental_Content.html

總結

以上是生活随笔為你收集整理的UpdatePanel的妙用：Incremental Content的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。