Upatepanel的基本使用

Updatepanel是微软ASP.NET AJAX框架中最重要的一个控件,使用它可以将一个非AJAX 网站非常容易地改造成AJAX的网站.

Updatepanel的优势主要有

1、可以将现有的非Ajax效果网站很轻松地改造成AJAX效果网站

2、不用写任何的JS代码就可以轻松实现AJAX的效果

3、与ASP.NET现有控件能无缝连接

它的缺点有

1、与ScriptManager配合使用，会在页面端注册许多JS的脚本，源码较乱。

2、使用了Updatepanel后，原来写的JQuery代码或其他需要在页面加载完成后才执行的JS代码会失效，不过网上有许多的解决办法。

3、Updatepanel的AJAX效果灵活性较差，许多比较细的效果还是要通过最原始的xmlhttprequest对象方式实现，不过JQuery中的$.get和$.post方法是封装好的AJAX函数，很好用。

虽然Updatepanel有许多的缺点，但是在需要将现有网站改造成AJAX效果时，Updatepanel是不错的选择，简单，高效。但是我们要有能力解决类似原有JS失效等问题

下面是Updatepanel的一些基本介绍和用法

UpdatePanel的简单属性：

Demo1.1-RenderMode:
<asp:UpdatePanel ... RenderMode="Block">UpdatePanel内容单独成块
<asp:UpdatePanel ... RenderMode="Inline">UpdatePanel内容与其它页面元素在同一行

Demo1.2-UpdateMode:
<asp:UpdatePanel ... UpdateMode="Conditional">按需刷新
<asp:UpdatePanel ... UpdateMode="Always">总是刷新

Demo1.3-ChildrenAsTriggers:
<asp:UpdatePanel ... UpdateMode="Conditional" ChildrenAsTriggers="false">本身内容不触发刷新
<asp:UpdatePanel ... UpdateMode="Always" ChildrenAsTriggers="false">抛出异常

Demo1.4-Triggers:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers><asp:PostBackTrigger ControlID="Button2" /></Triggers></asp:UpdatePanel>点击Button2时整个页面刷新
<Triggers><asp:AsyncPostBackTrigger ControlID="Button2"></Triggers></asp:UpdatePanel>点击Button2时UpdatePanel的内容刷新
//AsyncPostBackTrigger可以添加EventName，指定控件的某一个事件触发刷新，如EventName="Click"。

Demo1.5-NestedUpdatePanels:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
  <%= DateTime.Now %>
  <asp:Button ID="Button1" runat="server" Text="Button" />
  <asp:UpdatePanel ID="UpdatePanel2" runat="server">
   <ContentTemplate>
    <%= DateTime.Now %>
    <asp:Button ID="Button2" runat="server" Text="Button" />
   </ContentTemplate>
  </asp:UpdatePanel>
 </ContentTemplate>
</asp:UpdatePanel>
ChildrenAsTriggers属性指的是本身直属的内容控件，不包括在其它UpdatePanel中的控件，所以点击Button2时UpdatePanel1没有刷新。

相关API：
A。UpdatePanel：
 1。Update方法：强制某个UpdatePanel更新
 2。IsInpartialRendering：是否在输出过程中(bool)
B。ScriptManager：
 1。GetCurrent静态方法：获得当前页面上的ScriptManage对象。（ScriptManager在母版页的情况下可以方便地取到，不用FindControl）
 2。IsInAsyncPostBack：是否在部分回发过程中（ajax提交过程中）。
 3。RegisterAsyncPostBackControl方法：指定某控件为异步PostBack控件。
 4。RegisterPostBackControl：指定某控件为传统方式PostBack控件。

Demo2-API:
Button1在UpdatePanel外。Button2在UpdatePanel内。(只做演示，一般不会这样设计)
Page_Load事件：
ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(this.Button1);//异步方式PostBack
ScriptManager.GetCurrent(this).RegisterPostBackControl(this.Button2);//传统方式PostBack
Button1_Click事件：
this.UpdatePanel1.Update();//强制刷新
效果：Button1会异步提交，并因为自身事件强制UpdatePanel1刷新。Button2会刷新整个页面。

相关控件：
A。UpdateProgress（提示是否正在更新）：
 1。DynamicLayout属性：隐蔽时是否占位，默认值为true。
 2。DisplayAfter属性：延迟多少时间后显示，单位毫秒，默认值为500。（比如设置为10秒，之后出现提示网络不好，请耐心等待）
 3。AssociatedUpdatePanelID属性：关联的UpdatePanel的ID，默认为null。（不关联时，任何UpdatePanel更新都会显示）
B。Timer
 1。Interval属性：更新时间间隔，单位毫秒，默认为60000（1分钟）。
 2。Tick事件。Interval时间到后会触发此事件（如强制更新某UpdatePanel）。
注意：并非所有的控件都能在UpdatePanel中工作，如Validators和TreeView等等。

在UpdatePanel中使用Validators：
引用Validators.dll，在Web.config中的<system.web><pages>下加入：

<tagMapping>
 <add tagType="System.Web.UI.WebControls.CompareValidator" mappedTagType="Microsoft.Web.UI.Compatibility.CompareValidator, Validators"/>
 <add tagType="System.Web.UI.WebControls.CustomValidator" mappedTagType="Microsoft.Web.UI.Compatibility.CustomValidator, Validators"/>
 <add tagType="System.Web.UI.WebControls.RangeValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RangeValidator, Validators"/>
 <add tagType="System.Web.UI.WebControls.RegularExpressionValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RegularExpressionValidator, Validators"/>
 <add tagType="System.Web.UI.WebControls.RequiredFieldValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RequiredFieldValidator, Validators"/>
 <add tagType="System.Web.UI.WebControls.ValidationSummary" mappedTagType="Microsoft.Web.UI.Compatibility.ValidationSummary, Validators"/>
</tagMapping>

脚本注册：
A。禁止使用Response.Write方法
B。使用FrameWork所支持的方法（使用ClientScriptManager对象）

ClientScriptManager cs = this.ClientScript;
cs.RegisterArrayDeclaration("Hello", "1, 2, 3");    //定义数组,var Hello =  new Array(1, 2, 3);
cs.RegisterClientScriptBlock(this.GetType(), "HelloWorld", "function helloWorld(){alert(1);}", true);   //function helloWorld(){alert(1);}
cs.RegisterClientScriptInclude("HelloWorld", "HelloWorld.js");  //加载一个脚本,<script src="HelloWorld.js" type="text/javascript"></script>
cs.RegisterExpandoAttribute(this.Button1.ClientID, "Hello", "World");   //注册额外属性,Button1.Hello = "World";
cs.RegisterHiddenField("hello", "world");   //<input type="hidden" name="hello" id="hello" value="world" />
cs.RegisterOnSubmitStatement(this.GetType(), "HelloWorld", "return window.confirm('Do you really want to submit the form?')");
//<form name="form1" method="post" action="ClientScriptManager.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
//function WebForm_OnSubmit() {return window.confirm('Do you really want to submit the form?');return true;}
cs.RegisterStartupScript(this.GetType(), "HelloWorld", "<script>alert('The page has loaded!')</script>");   //<script>alert('The page has loaded!')</script>

C。在异步更新的环境中注册脚本
 1。使用ScriptManager对应的静态方法
 2。新方法与原有方法的区别：
  1）方法都要接受一个参数
  2）并非所有注册过的脚本都会生效（当第一个参数为某个UpdatePanel时，注册后UpdatePanel不一定立即刷新）
  3）RegisterExpandoAttribute方法多了个encode参数
 3。这些静态方法完成可以替换原来的方法（上述B中的方法），因为在非异步回送环境中会使用ClientScriptManager的对应方法进行注册。

错误处理：
A。服务器端ScriptManager设置
 1。AllowCustomErrorsRedirect属性：遇到错误是否自动根据web.config中的设置跳转，默认值为True。
 //配置web.config：<customErrors mode="On" defaultRedirect="~/Error.aspx"></customErrors>
 2。AsyncPostBackError事件：异步刷新中出现错误时触发的事件。可以写日志之类的。
 3。AsyncPostBackErrorMessage属性：客户端接受到的错误信息。
B。客户端编程
 1。响应PageRequestManager的endRequest事件。
 2。将errorHandled属性设为true。

aspx:

<asp:ScriptManager ID="ScriptManager1" runat="server" AllowCustomErrorsRedirect="false" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
  <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
 </ContentTemplate>
</asp:UpdatePanel>

<div id="error"></div>
<script type="text/javascript" language="javascript">
 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, e)
 {
  e.set_errorHandled(true);
  $get("error").innerHTML = "Sorry, an error has occurred: " + e.get_error().message;
  setTimeout(function(){ $get("error").innerHTML = ""; }, 3000);
 });
</script>

aspx.cs:

protected void Button1_Click(object sender, EventArgs e)
{
 throw new Exception("Custom Error!");
}
protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
{
 ScriptManager.GetCurrent(this).AsyncPostBackErrorMessage = e.Exception.Message;
}

动态操作：
A。要在生命周期的Load阶段结束之前完成动态添加控件操作
B。为每个动态控件指定明确的ID
C。不要为页面中的UpdatePanel添加新的Trigger
D。使用ContentTemplateContainer属性向UpdatePanel内添加新控件

UpdatePanel up = new UpdatePanel();
up.ID = "UpdatePanel1";
this.Form.Controls.Add(up);

LiteralControl lc = new LiteralControl(DateTime.Now.ToString());
up.ContentTemplateContainer.Controls.Add(lc);

Button btn = new Button();
btn.Text = "Refresh";
up.ContentTemplateContainer.Controls.Add(btn);

使用UpdatePanel注意事项：
A。请求内容数据大小没有任何减少
 1。采集Form中所有<input/>并发送
 2。包含ViewState
B。既然发到服务端的数据没有减少，就必须减少从服务器端返回的数据
 1。使用多个UpdatePanel包含多个部分（不要用一个大的UpdatePanel把整个页括起来，比如一些静态文本的数据也从服务器返回，这是没有必要的）
 2。UpdateMode尽量不要设为Always（用triggers或用update方法）

总而言之Updatepanel既有优点也有缺点，大家要根据实际情况选择使用。