众所周知，UpdatePanel是通过Trigger来更新的。被设定为Trigger的控件在PostBack之后会被客户端所截获，并且使用XMLHttpRequest对象发送内容，然后服务器端由ScriptManager配合，改变Page对象的输出，最后得到部分刷新的效果。但是有时候我们可能需要使用JavaScript来刷新UpdatePanel，这时候就不太方便了。
当然，我们又一个属于Workaround的方法，那就是使用JavaScript来模拟按钮的点击。我们往往会将一个按钮设为某个UpdatePanel的Trigger，然后在客户端模拟它的点击（我后面会提到，其实这是一个比较糟糕的做法，没有必要），使UpdatePanel进行更新。但是这样的做法实在太麻烦了些，也相当的不优雅。
现在我们就来编写一个组件解决这个问题。这个组件的名字叫做JavaScriptUpdater，似乎取得不怎么样——我一直不擅长取名。
首先来定一个需求吧
我们的目的，其实就是为了在客户端生成一个JavaScript代理，提供一个方法，调用它之后能够刷新页面。如果一个UpdatePanel的UpdateMode为Always，那么它一定会更新。如果需要更新UpdateMode为Conditional的UpdatePanel，就需要通过在页面中编写tag来设定哪些UpdatePanel也会被更新。我们需要尽可能的把编程工作变得最小。
不如我们先考虑使用方式，我们编写的这个JavaScriptUpdater在页面中可以这样使用：
JavaScriptUpdater使用方式
< helper :JavaScriptUpdater runat ="server" ID ="Updater" MethodName ="Refresh"
ResolveUpdatePanel ="OnResolveUpdatePanel" Enabled="True" >
< UpdatePanels >
< helper :UpdatePanel UpdatePanelID ="UpdatePanel1" />
...
</ UpdatePanels >
</ helper :JavaScriptUpdater >
JavaScriptUpdater有一个简单属性MethodName，表明了在客户端生成代理方法的名字。再上例中该属性为Refresh，表明我们会调用UpdatePanels.Refresh()方法进行UpdatePanel更新。UpdatePanels是一个集合属性，可以指定哪些UpdateMode为Conditional的UpdatePanel一同进行更新。如果某个UpdatePanelID没有找到的话，就会调用ResolveUpdatePanel事件，让用户来指定一个UpdatePanel。还有一个Enabled属性，用于控制该JavaScriptUpdater是否生效。
一个页面里能够放置多个JavaScriptUpdater，这样可以生成多个JavaScript代理方法。这样的设定，应该已经足够用了。
实现JavaScriptUpdater
自然，我们先定义最简单的两个类，UpdatePanelHelper.UpdatePanel类，和ResolveUpdatePanelEventArgs类。由于实在简单，就直接贴一下代码了：
UpdatePanel类
namespace UpdatePanelHelper
{
public class UpdatePanel
{
private string _UpdatePanelID;
public string UpdatePanelID
{
get { return _UpdatePanelID; }
set { _UpdatePanelID = value ; }
}
}
}
ResolveUpdatePanelEventArgs类
namespace UpdatePanelHelper
{
public class ResolveUpdatePanelEventArgs : EventArgs
{
private string _ID = null ;
public string ID
{
get { return _ID; }
}
private System.Web.UI.UpdatePanel _UpdatePanel = null ;
public System.Web.UI.UpdatePanel UpdatePanel
{
get { return _UpdatePanel; }
set { _UpdatePanel = value ; }
}
public ResolveUpdatePanelEventArgs(string id)
{
this ._ID = id;
}
}
}
然后开始考虑编写最关键的JavaScriptUpdater类。首先定义它的简单框架，如下：
JavaScriptUpdater控件的总体框架与属性定义
namespace UpdatePanelHelper
{
[PersistChildren(false )]
[ParseChildren(true )]
[NonVisualControl]
public class JavaScriptUpdater : Control
{
private bool initialized = false ;
private bool _Enabled = true ;
public bool Enabled
{
get
{
return this ._Enabled;
}
set
{
if (this .initialized)
{
throw new InvalidOperationException(Cannot set the property after initialized. ");
}
this ._Enabled = value ;
}
}
private string _MethodName;
public string MethodName
{
get
{
return this ._MethodName;
}
set
{
if (this .initialized)
{
throw new InvalidOperationException(Cannot set the property after initialized. ");
}
this ._MethodName = value ;
}
}
public event EventHandler<ResolveUpdatePanelEventArgs> ResolveUpdatePanel;
private List<UpdatePanel> _UpdatePanels = new List<UpdatePanel>();
[PersistenceMode(PersistenceMode.InnerProperty)]
public List<UpdatePanel> UpdatePanels
{
get
{
return _UpdatePanels;
}
}
...
}
}
我们使用一个initialized变量来确保Enabled或MethodName属性只能在页面Init时进行修改。由于控件会在多个生命周期中进行操作，如果不做这样的限制，会让控制变得繁琐，容易出错。从下面的代码中会发现，我们会在响应页面的InitComplete事件时将initialized变量设为true。
我们在这里实现JavaScript更新UpdatePanel的做法，和传统的方法异曲同工，只是我们这里将动态添加按钮，并且在这里我们使用LinkButton。我们将响应Page对象的Load事件，添加那个作为Trigger的LinkButton。如下：
动态添加LinkButton
private string clientButtonId = null ;
protected override void OnInit(EventArgs e)
{
base .OnInit(e);
this .Page.InitComplete += new EventHandler(Page_InitComplete);
}
private void Page_InitComplete(object sender, EventArgs e)
{ this .initialized = true ;if (this .Enabled)
{
this .Page.Load += new EventHandler(Page_Load);
this .Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete);
}
}
private void Page_Load(object sender, EventArgs e)
{
LinkButton button = new LinkButton();
button.Text = "Update ";
button.ID = this .ID + "Button ";
button.Style[HtmlTextWriterStyle.Display] = "none ";
button.Click += new EventHandler(OnTrigger);
this .Page.Form.Controls.Add(button);
this .clientButtonId = button.UniqueID;
ScriptManager.GetCurrent(this .Page).RegisterAsyncPostBackControl(button);
}
我们在页面的Page_InitComplete事件中判断Enabled属性是否为true（这时Enabled属性已经不能修改了），如果Enabled为ture，则响应页面的Load事件，用于动态添加一个LinkButton。请注意，我们并不会将它的Visible属性设为False，否则它的HTML将不会出现在页面上。我们应该将它Style的display设为none，这样它既能在页面结构中出现，也不会显示出来。在添加了这个LinkButton之后，将会保留它的ClientID，并且找出当前页面的ScriptManager，调用RegisterAsyncPostBackControl方法，将这个LinkButton注册为异步刷新页面的控件。
以前，我写给别人范例都是使用了一个Button作为Trigger，然后在客户端使用JavaScript对它进行点击。这其实不是很合理，比较好的做法其实使用LinkButton。要说明这个问题的原因，我们需要看一下LinkButton在页面中生成的HTML元素。很显然，这是个<a />，如下：
LinkButton生成的HTML
< a id ="UpdaterButton" href ="javascript:__doPostBack('UpdaterButton','')" > Update</ a >
请注意它的href，它表明了点击该元素会执行这个JavaScript代码。发现了不？我们何必模拟元素的点击，我们直接调用__doPostBack函数不就行了？Cool！于是我们现在也可以轻易得出，在响应页面的PreRenderComplete事件时需要注册的Script脚本了。如下：
在PreRenderComplete事件中注册脚本
private const string BasicScripts =
@"if (!window.UpdatePanels) window.UpdatePanels = {};
UpdatePanels._createUpdateMethod = function(btnId)
{
return function()
{
__doPostBack(btnId, '');
}
} ";
private const string RegisterMethodTemplate =
"\nUpdatePanels['{0}'] = UpdatePanels._createUpdateMethod('{1}'); ";
private void Page_PreRenderComplete(object sender, EventArgs e)
{
this .Page.ClientScript.RegisterClientScriptBlock(
this .GetType(),
"BasicScripts ",
JavaScriptUpdater.BasicScripts,
true );
this .Page.ClientScript.RegisterClientScriptBlock(
this .GetType(),
this .clientButtonId,
String.Format(JavaScriptUpdater.RegisterMethodTemplate, this .MethodName, this .clientButtonId),
true );
}
首先会注册一些基础脚本，我们会使用相同的Type和Key参数，这样保证了这段代码只会被注册一次。在注册每个代理方法的脚本时，就会使用该脚本的clientButtonId作为key，保证了每段脚本都会被注册成功。顺便一提，我们在这里直接使用了Page的ClientScriptManager来注册脚本，保证了在异步更新UpdatePanel时，不会将脚本发送到客户端去。
可能有朋友会出现疑惑，为什么我们需要在页面的PreRenderComplete事件中注册脚本呢？在页面的Load事件中一并注册了不可以吗？答案是，因为ScriptManager也是在这时候注册ASP.NET AJAX的基础脚本，我们现在这么做是为了保证了我们注册的脚本出现在ASP.NET AJAX的脚本之后。
哦，原来如此……等一下，是否发觉我们现在的脚本与ASP.NET AJAX的基础脚本无关？没错，事实上我们这里的确可以方法页面的Load事件中注册，我现在这么做似乎只是一个习惯——或者说是为ASP.NET AJAX编写组件的一个模式——响应页面的PreRenderComplete事件，用于注册所需的脚本。
大部分的工作已经完成了，我们只需要再响应那个LinkButton的Click事件即可。我们需要强制更新所有指定的UpdatePanel。代码如下，非常简单，就不多作解释了：
触发更新
private void OnTrigger(object sender, EventArgs e)
{
if (this .Enabled)
{
foreach (UpdatePanel panel in this .UpdatePanels)
{
System.Web.UI.UpdatePanel updatePanel =
this .FindUpdatePanel(panel.UpdatePanelID);
if (updatePanel != null )
{
updatePanel.Update();
}
}
}
}
private System.Web.UI.UpdatePanel FindUpdatePanel(string id)
{
System.Web.UI.UpdatePanel result = null ;
if (id != null )
{
result = this .NamingContainer.FindControl(id)
as System.Web.UI.UpdatePanel;
}
if (result == null )
{
ResolveUpdatePanelEventArgs e = new ResolveUpdatePanelEventArgs(id);
this .OnResolveUpdatePanel(e);
result = e.UpdatePanel;
}
return result;
}
private void OnResolveUpdatePanel(ResolveUpdatePanelEventArgs e)
{
if (this .ResolveUpdatePanel != null )
{
this .ResolveUpdatePanel(this , e);
}
}
使用JavaScriptUpdater
JavaScriptUpdater非常简单，只需一个最简单的例子，大家就可以明白它的使用方式：
JavaScriptUpdater使用示例
<%@ Register Assembly="UpdatePanelHelper" Namespace="UpdatePanelHelper" TagPrefix="helper" %>
< asp :UpdatePanel ID ="UpdatePanel1" runat ="server" UpdateMode ="Conditional" >
< ContentTemplate >
<% = DateTime.Now.ToString() %>
</ ContentTemplate >
</ asp :UpdatePanel >
< helper :JavaScriptUpdater runat ="server" ID ="Updater" MethodName ="Refresh" >
< UpdatePanels >
< helper :UpdatePanel UpdatePanelID ="UpdatePanel1" />
</ UpdatePanels >
</ helper :JavaScriptUpdater >
< input type ="button" onclick ="UpdatePanels.Refresh()" value ="Refresh" />
点击最下方定义的按钮时，会调用UpdatePanels.Refresh()方法，于是则会更新UpdatePanel1。请注意，UpdatePanel1的UpdateMode为Conditional，我们是通过在JavaScriptUpdater中指定它，用于强制对它进行更新。我们再看一下它生成的JavaScript代码和HTML就会更加清楚它的实现方式了。如下：
在客户端生成的内容
< script type ="text/javascript" >
if (!window.UpdatePanels) window.UpdatePanels = {};
UpdatePanels._createUpdateMethod = function(btnId)
{
return function()
{
__doPostBack(btnId, '');
}
}
UpdatePanels['Refresh'] = UpdatePanels._createUpdateMethod('UpdaterButton');
</ script >
...
< a id ="UpdaterButton"
href ="javascript:__doPostBack('UpdaterButton','')"
style ="display:none;" > Update</ a >
点击这里 下载源文件。
