代码改变世界

编写组件,使用JavaScript更新UpdatePanel

2007-01-31 01:12  Jeffrey Zhao  阅读(10902)  评论(50编辑  收藏  举报

众所周知,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在页面中可以这样使用:

<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类。由于实在简单,就直接贴一下代码了:

namespace UpdatePanelHelper
{
    public class UpdatePanel
    {
        private string _UpdatePanelID;
        public string UpdatePanelID
        {
            get { return _UpdatePanelID; }
            set { _UpdatePanelID = value; }
        }
    }
}
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类。首先定义它的简单框架,如下:

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。如下:

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 />,如下:

<a id="UpdaterButton" href="javascript:__doPostBack('UpdaterButton','')">Update</a>

 

请注意它的href,它表明了点击该元素会执行这个JavaScript代码。发现了不?我们何必模拟元素的点击,我们直接调用__doPostBack函数不就行了?Cool!于是我们现在也可以轻易得出,在响应页面的PreRenderComplete事件时需要注册的Script脚本了。如下:

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非常简单,只需一个最简单的例子,大家就可以明白它的使用方式:

<%@ 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>

 

点击这里下载源文件。