asp.net控件开发基础(13) --------服务器控件客户端功能

1.减轻服务器压力,增加用户体验

         服务器功能是强大的,客户端脚本一点也不弱,现在的ajax技术和Atlas技术就是最好的证明,我们总是期待UI有一个好的效果,flash动画给我们带来了很酷的效果,我们至少也可以为我们的服务器控件添加客户端脚本,一方面减少了服务器端的回传,一方面又能为控件提供非常酷的效果.我想我们都很喜欢ATLAS里面很多很酷的控件吧,而且无刷新,服务器控件与客户端脚本交互使用,那会服务器控件变的更加完美.

经过上面的废话,下面我们进入正题

2.简单为服务器控件添加客户端脚本

我们已经了解到服务器控件呈现后的代码仍然为HTML,只要你熟悉此服务器控件呈现后标签和此标签的元素,你就可以直接在服务器控件中添加
属性,事件,样式等等

简单的添加方法如下:

(1)直接在控件添加属性,如为Button控件添加简单的客户端事件

<asp:Button ID="Button2" runat="server" Text="Button" onmouseover="this.value='鼠标经过'" onmouseout="this.value='鼠标离开'"  />

(2)使用AttributeCollection在后台添加添加简单的客户端事件,很典型的使用如我们在删除数据的时候总要弹出一个窗口提醒用户是否删除.

Button2.Attributes.Add("onmouseover", "this.value='鼠标经过'");
        Button2.Attributes.Add("onmouseout", "this.value='鼠标离开'");

3.复杂客户端功能处理

先不论服务器端的功能,当客户端脚本复杂以后,我们会写在一个js文件里,可以复用,简单的脚本逻辑可以<script>标签内.我们需要封装.

Page类为我们提供了几个方法用于实现以下内容,但需要注意的是,asp.net2.0新加了一个类ClientScriptManager,专门用于管理客户端脚本的方法,使用方法为

ClientScriptManager = Page.ClientScript;

(1)注册脚本库(js文件)                                                          RegisterClientScriptInclude 方法

(2)发出位于页面顶部和尾部的脚本                                   RegisterStartupScript 方法 和  RegisterClientScriptBlock 方法
 
(3)确保脚本块在页面只出现一次                                       以Is带头Registered结尾的四个方法

(4)将控件事件处理程序与客户端提交事件关联起来       RegisterOnSubmitStatement 方法

(5)注册一个数组用来存储控件自身变量                           RegisterArrayDeclaration方法

(6)注册一个隐藏域                                                               RegisterHiddenField 方法

对于以上方法的具体使用MSDN均给出了具体的示例,刚看的时候感觉方法名比较长,接触后就会感觉简单了,对以上方法的使用一定要了解.如果你不想看MSDN的话,那么推荐看下面几篇文章,相信对你会有很大帮助.还有建议大家可以看下呈现后的HTML代码,这样会加深理解.

从 ASP.NET 服务器控件插入客户端脚本

使用客户端脚本

4.了解预呈现PreRender事件

这里还是要讲控件的生命周期,在控件呈现Render方法之前,还有一个预呈现OnPreRender 方法.其周期是在OnLoad之后的MSDN给出了其解释

在呈现输出之前执行任何更新。可以保存在预呈现阶段对控件状态所做的更改，而在呈现阶段所对的更改则会丢失

总结的话,总是很简单的,要深刻理解的话,还是需要我们去试验一下,再回来体验上面这句话

先看一个简单的例子,在页面上重写了Page_PreRender,在其事件中给label1赋值,然后再定义了button事件,你会发现button事件触发后label的值还是保持不变.

示例一

    protected void Page_PreRender(object sender, EventArgs e)
        
    {
        Label1.Text="PreRender";
        
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Click";
    }

再理解上面这句话,可能我们想为什么不在呈现的时候Render方法中实现呢?如果这么做的话,那你就要属性定死了.

我们还需要说明一点,不同事件负责不同的事情,Render方法只负责呈现,不要把别的事情交给他做.
你可以在Render方法为控件添加需要呈现的属性,但其他事情则需要在呈现之前完成.整个控件的周期是有阶段,不同阶段完成不同事情.
我们这次讨论的是为服务器控件添加客户端脚本,那么我们就要在控件适当的时机调用ClientScriptManager类的方法.而这个适当的时机就是OnPreRender 方法了.


5.在自定义控件中添加客户端脚本

(1)简单的实现:你可以重些OnPreRender方法,然后用AttributeCollection的Add方法,添加简单客户端脚本

      protected override void OnPreRender(EventArgs e)
      {
         base.OnPreRender(e);
         Attributes.Add("onclick","alert('" + ClickText + "');");
      }

(2)复杂的实现: 这里我们用的例子还是简单点吧,效果还是按钮确认之前有一个弹出窗口,重要的是大家要了解ClientScriptManager类中几个方法的使用,以下的代码使用的是 asp.net服务器控件开发技术与实例的实例2 ,我偷懒,直接就用Page里的几个方法的.

以下列出代码

示例二

/**//// <summary>
    /// NormalButton 显示为一个普通样式按钮。
    /// 当用户点击按钮之后，跳出一个确认对话框来确定其动作。
    /// 通常多用于确认用户是否确实要进行删除/修改等类似的操作。
    /// </summary>
    [ToolboxData("<{0}:NormalButton runat=server></{0}:NormalButton>")]
    public class NormalButton : Button
    {
        private string _scriptPath = "ControlClientScript/";
        //构造函数
        public NormalButton():base()
        {
            Message = "您确实要这样做吗？";
        }
        
        定义属性#region 定义属性

        [Bindable(true), 
        Category("Appearance"), 
        DefaultValue("您确实要这样做吗？"),
        Description("自定义提示信息")] 
        public string Message 
        {
            get
            {
                return (string)ViewState["Message"];
            }

            set
            {
                ViewState["Message"] = value;
            }
        }
        
        [Category("Other"), 
        DefaultValue("ControlClientScript/"),
        Description("脚本路径")]
        public String ScriptPath 
        {
            get 
            {
                return _scriptPath;
            }
            set
            {
                _scriptPath = value;
            }
        }

        #endregion

        //重写AddAttributesToRender方法
        protected override void AddAttributesToRender(HtmlTextWriter output)
        {
            Attributes.Add("confirmationmessage",Message);
            base.AddAttributesToRender(output);

        }

        //重写OnPreRender方法
        protected override void OnPreRender( EventArgs e ) 
        {
            Page.RegisterClientScriptBlock( "WebUIConfirmation", "<script language='javascript' src='" + ScriptPath + "WebUIConfirmation.js" + "'></script>" );
            Page.RegisterArrayDeclaration("Page_Confirmations", "'" + ClientID + "'" );
            Page.RegisterStartupScript( "WebUIConfirmation Startup", "<script language='javascript' src='" + ScriptPath + "WebUIConfirmationStartup.js" + "'></script>" );
            base.OnPreRender(e);
        }
    }

 
主要看OnPreRender方法,只要你对其几个方法熟悉后,那剩下就是你对javaScript的掌握程度了.掌握上面几个方法可以说很容易,对javaScript的掌握那需要平时的积累了,所以要开发一个好的控件,并不容易呀.

下面再列出js文件,我对其梢有改动

WebUIConfirmationStartup.js

ConfirmationOnLoad();

WebUIConfirmation.js

//String去空格
String.prototype.Trim = function()
{ 
return this.replace(/(^\s*)|(\s*$)/g, "");
}

//初始化获取控件ID
function ConfirmationOnLoad() {    
    if (typeof(Page_Confirmations) == "undefined") return;
    var i, confirmButton;
    for (i = 0; i < Page_Confirmations.length; i++) {
        confirmButton = Page_Confirmations[i];
        if (typeof(confirmButton) == "string") {
            confirmButton = document.getElementById( confirmButton );
        }        
        if (typeof(confirmButton.confirmationmessage ) != "undefined" ) {
            if ( confirmButton.attributes["confirmationmessage"].value.Trim() != "" ) {
                confirmButton.confirmationmessage = confirmButton.attributes["confirmationmessage"].value;
            } else {
                confirmButton.confirmationmessage = "您确实要这样做吗？";
            }
        }
        ConfirmationHookupControl(confirmButton);
        
    }
}

//添加onclick事件
function ConfirmationHookupControl( confirmButton ) {
    var ev = confirmButton.onclick;
    if (typeof(ev) == "function" ) {            
        ev = ev.toString();
        ev = ev.substring(ev.indexOf("{") + 1, ev.lastIndexOf("}"));
    }
    else {
        ev = "";
    }
    var func = new Function("if ( !ConfirmationOnClick( this ) ){return false;} " + ev);
    confirmButton.onclick = func;
}

//弹出确认窗口
function ConfirmationOnClick( confirmButton ) {
    return window.confirm( confirmButton.confirmationmessage );
}

OK,上面的服务器控件代码还是挺简单的,你看的懂JS的话,那这个效果就没问题了.其实说真的,难点在于JavaScript脚本,呵呵.

下面再说一个例子吧,也是asp.net服务器控件开发技术与实例的例子,是一个可伸缩面板控件,其是一个集合属性和客户端脚本一起实现的效果

但此控件却并在呈现页面上用到js脚本,也没重写OnPreRender方法,而是定义了一个HTC,其关键实现是服务器控件的集合属性的实现,还有就是客户端脚本的实现,具体代码可以在后面下载.

其他:
1.客户端脚本在服务器控件中的最频繁的使用则是验证控件的使用了,你也可以自定义验证控件,但我感觉用处不是很大,如果需要你可以了解下System.Web.UI.IValidator 接口和System.Web.UI.WebControls.BaseValidator类

2.另外还有客户端回调,你可以了解下ICallbackEventHandler接口,具体还是看相关文章或者MSDN吧.


好了又写完一篇了,如果你刚接触这些东西的话,对你还是有帮助的,如果你已经了解了,我上面讲的对你来说就很简单了.还是想那样说,关键在于你对JavaScript的熟练程度.一些东西还需要你自己去挖掘.

这里再说一句,如果你没有asp.net服务器控件开发技术与实例此书的话,你则可以去天极看作者金属边缘写的ASP.NET2.0服务器控件,其写的大致跟书上内容90%以上相似.

本次代码为asp.net服务器控件开发技术与实例的例子的代码

代码下载