UpdatePanel的妙用:Incremental Content

简介:
   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来包装了内容,它的作用,可以说是为了给每次添加的内容设定一个模版。如下:
Default.aspx
<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中出现内容。如下:
Default.aspx.cs
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进行辅助。如下:
Default.aspx
<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
 
  Incremental Content的好处是什么呢?减少数据传输量是一方面。另外,如果使用Incremental Content,一般来说查询数据库的次数就能减少,这样就可以进一步降低资源消耗。
 
点击这里下载代码。
点击这里查看效果。
 
PS:
  建议博客园能够使用Incremental Content方法。由于博客园存在“刷新全部评论”的操作,所以可以使用UpdatePanel嵌套的方式,对内UpdatePanel使用 Incremental Content,而刷新全部评论时,则可以调用外部UpdatePanel的Update方法(或通过Trigger指定)。不过一旦使用了 Incremental Content方法,在“修改评论”和“删除评论”两个功能上,可能就要改变实现方式了。


本文转自 jeffz 51CTO博客,原文链接:http://blog.51cto.com/jeffz/60220,如需转载请自行联系原作者
相关文章
|
9月前
出现VW自适应方案报错already has a ‘content‘ property, give up to overwrite it的原因及解决办法
出现VW自适应方案报错already has a ‘content‘ property, give up to overwrite it的原因及解决办法
57 0
|
9月前
Transparent Data Encryption Data Dynamic and Data Dictionary Views You can query a set of dynamic and data dictionary views to find more information about Transparent Data Encryption (TDE) data.
Transparent Data Encryption Data Dynamic and Data Dictionary Views You can query a set of dynamic and data dictionary views to find more information about Transparent Data Encryption (TDE) data.
60 2
|
容器
Fragment的replace、add、hide、show的使用和详解
Fragment的replace、add、hide、show的使用和详解
Cannot find source code based button in SE24
When you are logging on to customer system for incident handling, you want to switch to source code to perform some keyword search. However, you could not find button “Source code based builder” in toolbar, with following warning message: ———————————————— 版权声明:本文为CSDN博主「汪子熙」的原创文章,遵循CC 4.0 BY-SA版权协
Cannot find source code based button in SE24
|
JavaScript 前端开发
ext的treePanel触发tabPanel
最终的效果如下图所描述上述效果的实现过程如下所示直接上代码如上图所示,我们点击treePanel触发tabPanel的变化,因此肯定是treePanel中添加了事件响应的代码没错,就是这个它的具体代码如下 //鼠标点击treePanel的item,然后触发tabPanel新增tab,所以必须首先获取tabPanel的对象 var tab = Ext.
1261 0