编写组件,使用JavaScript更新UpdatePanel

简介:
 众所周知,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>
 
点击这里下载源文件。


本文转自 jeffz 51CTO博客,原文链接:http://blog.51cto.com/jeffz/60284,如需转载请自行联系原作者
相关文章
|
7月前
|
JavaScript
Vue.js 修饰符:精准控制组件行为
Vue.js 修饰符:精准控制组件行为
|
4月前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
161 0
|
2月前
|
JavaScript 前端开发 API
探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
|
3月前
|
Web App开发 JavaScript 前端开发
用 JavaScript 创建 XPCOM 组件
用 JavaScript 创建 XPCOM 组件
|
4月前
|
JavaScript 前端开发
揭秘Vue.js组件魔法:如何轻松驾驭前端代码,让维护变得轻而易举?
【8月更文挑战第30天】本文探讨了如何利用Vue.js的组件化开发提升前端代码的可维护性。组件化开发将复杂页面拆分为独立、可复用的组件,提高开发效率和代码可维护性。Vue.js支持全局及局部组件注册,并提供了多种组件间通信方式如props、事件等。通过示例展示了组件定义、数据传递及复用组合的方法,强调了组件化开发在实际项目中的重要性。
45 1
|
4月前
|
JavaScript 前端开发 测试技术
[译]: Vue.js 函数式组件:what, why & when?
[译]: Vue.js 函数式组件:what, why & when?
[译]: Vue.js 函数式组件:what, why & when?
|
4月前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
160 0
|
4月前
|
JavaScript 开发者
揭秘Vue.js生命周期钩子:它们是如何掌控组件的生与死?
【8月更文挑战第30天】Vue.js 的生命周期钩子是开发者必须掌握的关键概念,它涵盖了组件从创建、挂载、更新到销毁的整个过程,提供了在特定时机操作DOM、获取数据或执行逻辑的能力。从 `beforeCreate` 到 `unmounted`,每个阶段都有特定的任务:如 `created` 适合异步数据获取,`mounted` 用于DOM操作,而 `beforeUnmount` 则用于清理资源。
34 0
|
5月前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
50 1
|
5月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果