新瓶旧酒ASP.NET AJAX(7) 客户端脚本编程（Sys命名空间下的类）

[索引页]
[源码下载]

新瓶旧酒ASP.NET AJAX(7) - 客户端脚本编程（Sys命名空间下的类）

作者：webabcd


介绍
Sys命名空间是Microsoft AJAX Library的根命名空间。本文主要学习一下其中的Application类、ApplicationLoadEventArgs类、CultureInfo类和StringBuilder类。


关键
1、Application Class
    ·init事件 - 脚本加载完毕，对象创建之前。
    ·load事件 - 对象被创建和初始化。可以用pageLoad()
    ·unload事件 - window.unload时。可以用pageUnload()
    ·notifyScriptLoaded() - 通知ScriptManager某段脚本已经加载完毕

2、ApplicationLoadEventArgs Class
    ·components - 最后一次触发load事件时创建的Components
    ·isPartialLoad - 是否是部分刷新

3、CultureInfo Class
    ·CurrentCulture字段 - 当前的Culture，返回CurrentCulture对象
    ·name字段 - Culture的名称
    ·dateTimeFormat - 获得dateTimeFormat对象，其内有n多格式化类型
    ·numberFormat - 获得numberFormat对象，其内有n多格式化类型

4、StringBuilder Class
    ·append(text) - 添加指定字符串到StringBuilder对象的结尾
    ·appendLine() - 添加一个换行符到StringBuilder对象的结尾
    ·appendLine(text) - 添加指定字符串到StringBuilder对象的结尾并添加一个换行符
    ·clear() - 清除StringBuilder对象所有内容
    ·isEmpty() -  StringBuilder对象的内容是否为空
    ·toString() - 将StringBuilder对象的内容转换为字符串
    ·toString(separator) - 在StringBuilder对象内的每一个元素的结尾处添加指定字符串

5、其它请查看官方文档


示例
CustomButton.js

Type.registerNamespace("Demo");

Demo.CustomButton = function(element) 
{
    // 该类继承自Sys.UI.Control，调用基类构造函数
    Demo.CustomButton.initializeBase(this, [element]);

    this._clickDelegate = null;
    this._hoverDelegate = null;
    this._unhoverDelegate = null;
}
Demo.CustomButton.prototype = 
{
    // 定义text属性 - 元素显示的信息
    get_text: function() 
    {
        // element - Sys.UI.Control的属性
        return this.get_element().innerHTML;
    },
    set_text: function(value) 
    {
        this.get_element().innerHTML = value;
    },

    // 添加或移除click事件
    add_click: function(handler) 
    {
        // events - Sys.Component的属性
        this.get_events().addHandler('click', handler);
    },
    remove_click: function(handler) 
    {
        this.get_events().removeHandler('click', handler);
    },
    
    // 添加或移除hover事件
    add_hover: function(handler) 
    {
        this.get_events().addHandler('hover', handler);
    },
    remove_hover: function(handler) 
    {
        this.get_events().removeHandler('hover', handler);
    },

    // 添加或移除unhover事件
    add_unhover: function(handler) 
    {
        this.get_events().addHandler('unhover', handler);
    },
    remove_unhover: function(handler) 
    {
        this.get_events().removeHandler('unhover', handler);
    },

    // 释放资源
    dispose: function() 
    {
        var element = this.get_element();

        if (this._clickDelegate) 
        {
            // Sys.UI.DomEvent removeHandler()
            $removeHandler(element, 'click', this._clickDelegate);
            delete this._clickDelegate;
        }

        if (this._hoverDelegate) 
        {
            $removeHandler(element, 'focus', this._hoverDelegate);
            $removeHandler(element, 'mouseover', this._hoverDelegate);
            delete this._hoverDelegate;
        }

        if (this._unhoverDelegate) 
        {
            $removeHandler(element, 'blur', this._unhoverDelegate);
            $removeHandler(element, 'mouseout', this._unhoverDelegate);
            delete this._unhoverDelegate;
        }
        Demo.CustomButton.callBaseMethod(this, 'dispose');
    },

    // 初始化
    initialize: function() 
    {
        var element = this.get_element();

        if (!element.tabIndex) element.tabIndex = 0;

        if (this._clickDelegate === null) 
        {
            // Function.createDelegate用来创建一个调用“this”上下文下的特定函数的委托
            this._clickDelegate = Function.createDelegate(this, this._clickHandler);
        }
        // Sys.UI.DomEvent addHandler()
        $addHandler(element, 'click', this._clickDelegate);

        if (this._hoverDelegate === null) 
        {
            this._hoverDelegate = Function.createDelegate(this, this._hoverHandler);
        }
        $addHandler(element, 'mouseover', this._hoverDelegate);
        $addHandler(element, 'focus', this._hoverDelegate);

        if (this._unhoverDelegate === null) 
        {
            this._unhoverDelegate = Function.createDelegate(this, this._unhoverHandler);
        }
        $addHandler(element, 'mouseout', this._unhoverDelegate);
        $addHandler(element, 'blur', this._unhoverDelegate);

        Demo.CustomButton.callBaseMethod(this, 'initialize');
    },
    
    // click事件处理器
    _clickHandler: function(event) 
    {
        var h = this.get_events().getHandler('click');
        if (h) h(this, Sys.EventArgs.Empty);
    },
    // hover事件处理器
    _hoverHandler: function(event) 
    {
        var h = this.get_events().getHandler('hover');
        if (h) h(this, Sys.EventArgs.Empty);
    },
    // unhover事件处理器
    _unhoverHandler: function(event) 
    {
        var h = this.get_events().getHandler('unhover');
        if (h) h(this, Sys.EventArgs.Empty);
    }
}
Demo.CustomButton.registerClass('Demo.CustomButton', Sys.UI.Control);

// 通知ScriptManager这段脚本已经加载完毕
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Application.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Application.aspx.cs"
    Inherits="ClientScripting_Sys_Application" Title="init Event和load Event和unload Event" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="Server">
        <Scripts>
            <asp:ScriptReference Path="~/ClientScripting/Sys/CustomButton.js" />
        </Scripts>
    </asp:ScriptManagerProxy>

    <script type="text/javascript">
    
        Sys.Application.add_init(applicationInitHandler);
        function applicationInitHandler() 
        {
            // Sys.Component.create()
            $create
            (
                Demo.CustomButton, 
                {text: '自定义Button（Button1）'}, 
                {click: doClick, hover: doHover, unhover: doUnhover},
                null, 
                $get('Button1')
            );
            
            $create
            (
                Demo.CustomButton, 
                {text: '自定义Button（Label1）'}, 
                {click: doClick, hover: doHover, unhover: doUnhover},
                null, 
                $get('Label1')
            );
        }

        function doClick(sender, e) 
        {
            Sys.Debug.trace("鼠标点击" + sender.get_id());
        }
        function doHover(sender, e) 
        {
            Sys.Debug.trace("鼠标经过" + sender.get_id());
        }
        function doUnhover(sender, e) 
        {
            Sys.Debug.trace("鼠标离开" + sender.get_id());
        }


        Sys.Application.add_load(applicationLoadHandler);
        function applicationLoadHandler(sender, e) 
        {
            alert("ApplicationLoad");
            // isPartialLoad - 是否是部分刷新
            Sys.Debug.trace('是否是部分刷新：' + e.get_isPartialLoad());
            for (var i=0; i<e.get_components().length; i++)
            {
                // components - 最后一次触发load事件时创建的Components
                Sys.Debug.trace('最后一次触发load事件时创建的Component：' + e.get_components()[i].get_id());
            }
        }
        
        
        Sys.Application.add_unload(applicationUnloadHandler);
        function applicationUnloadHandler() 
        {
            alert('ApplicationUnload');
        }
        
        
        function pageLoad() 
        {
            // Sys.Application.findComponent() - 根据id查找Component
            // Sys.Application.findComponent(id, parent) - parent可选
            alert($find('Button1').get_id());
        }

    </script>

    <script type="text/javascript">
        function listComponents() 
        {
            // getComponents() - 获得所有Component（数组）
            var c = Sys.Application.getComponents();

            for (var i=0; i<c.length; i++) 
            {
                var id = c[i].get_id();
                var type = Object.getTypeName(c[i]);
                
                Sys.Debug.trace('Component：' + i + ': id=' + id + ', type=' + type);
            }
        }
    </script>

    <p>
        <button type="button" id="Button1">
        </button>
        <span id="Label1"></span>
    </p>
    <p>
        <input type="button" id="Button2" value="列举所有Component" onclick="listComponents()" />
    </p>
    <p>
        <textarea id="TraceConsole" style=" 500px; height: 400px;"></textarea>
    </p>
</asp:Content>

运行结果
1、页面加载
弹出框，信息：ApplicationLoad
是否是部分刷新：false
最后一次触发load事件时创建的Component：Button1
最后一次触发load事件时创建的Component：Label1
弹出框，信息：Button1

2、鼠标点击、经过和离开“自定义Button（Button1）”或“自定义Button（Label1）”
有相应的提示

3、单击“列举所有Component”按钮
Component：0: id=Button1, type=Demo.CustomButton
Component：1: id=Label1, type=Demo.CustomButton

4、关闭浏览器
弹出框，信息：ApplicationUnload


CultureInfo.aspx（注：设置ScriptManager的EnableScriptGlobalization="True"）

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="CultureInfo.aspx.cs"
    Inherits="ClientScripting_Sys_CultureInfo" Title="CultureInfo" Culture="auto"
    UICulture="auto" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <script runat="Server">
        protected override void InitializeCulture()
        {
            string s = Request.QueryString["currentculture"];

            if (!String.IsNullOrEmpty(s))
            {
                System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo(s);
                System.Threading.Thread.CurrentThread.CurrentCulture = System.Globalization.CultureInfo.CreateSpecificCulture(s);
            }
        }
    </script>

    <p>
        <a href="?currentculture=zh-cn">中文</a> &nbsp; <a href="?currentculture=en-us">英文</a>
        &nbsp; <a href="?currentculture=sq">阿尔巴尼亚语</a>
    </p>
    <div>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
        <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
    </div>

    <script type="text/javascript">
        // 创建一个Sys.CultureInfo对象
        var cultureObject = Sys.CultureInfo.CurrentCulture;
        
        // 当前Culture的名称
        var cultureName = cultureObject.name;
        
        // 获得dateTimeFormat对象
        var dtfObject = cultureObject.dateTimeFormat;
        
        // 创建一个具有各种格式化类型的数组
        var myArray = 
        [
            'AMDesignator', 
            'Calendar', 
            'DateSeparator', 
            'FirstDayOfWeek', 
            'CalendarWeekRule', 
            'FullDateTimePattern', 
            'LongDatePattern', 
            'LongTimePattern', 
            'MonthDayPattern', 
            'PMDesignator', 
            'RFC1123Pattern', 
            'ShortDatePattern', 
            'ShortTimePattern', 
            'SortableDateTimePattern', 
            'TimeSeparator', 
            'UniversalSortableDateTimePattern', 
            'YearMonthPattern', 
            'AbbreviatedDayNames', 
            'ShortestDayNames', 
            'DayNames', 
            'AbbreviatedMonthNames', 
            'MonthNames', 
            'IsReadOnly',
            'NativeCalendarName', 
            'AbbreviatedMonthGenitiveNames', 
            'MonthGenitiveNames'
        ];

        var result = '区域名称：' + cultureName;
        
        for (var i = 0, l = myArray.length; i < l; i++) 
        {
            var arrayVal = myArray[i];
            if (typeof(arrayVal) !== 'undefined') 
            {
                result += "<tr><td>" + arrayVal + "</td><td>" + eval("dtfObject." + arrayVal) + '</td></tr>';
            }
        }
        var resultHeader = "<tr><td><b>格式化类型</b></td><td><b>格式化值</b></td></tr>"
        $get('<%= Label1.ClientID %>').innerHTML = "<table border=1>" + resultHeader + result +"</table>";

        var d = new Date();
        $get('<%= Label2.ClientID %>').innerHTML = "<p/><h3>dateTimeFormat示例：" + 
            d.localeFormat(Sys.CultureInfo.CurrentCulture.dateTimeFormat.FullDateTimePattern) + "</H3>";
        
        
        
        // 获得numberFormat对象
        nfObject = cultureObject.numberFormat;
        
        // 创建一个具有各种格式化类型的数组
        myArray = 
        [
            'CurrencyDecimalDigits', 
            'CurrencyDecimalSeparator', 
            'IsReadOnly', 
            'CurrencyGroupSizes',
            'NumberGroupSizes', 
            'PercentGroupSizes', 
            'CurrencyGroupSeparator', 
            'CurrencySymbol', 
            'NaNSymbol', 
            'CurrencyNegativePattern', 
            'NumberNegativePattern', 
            'PercentPositivePattern', 
            'PercentNegativePattern', 
            'NegativeInfinitySymbol', 
            'NegativeSign', 
            'NumberDecimalDigits', 
            'NumberDecimalSeparator', 
            'NumberGroupSeparator', 
            'CurrencyPositivePattern', 
            'PositiveInfinitySymbol', 
            'PositiveSign', 
            'PercentDecimalDigits', 
            'PercentDecimalSeparator', 
            'PercentGroupSeparator', 
            'PercentSymbol', 
            'PerMilleSymbol', 
            'NativeDigits', 
            'DigitSubstitution'
        ];

        result = '区域名称：' + cultureName;
        for (var i = 0, l = myArray.length; i < l; i++) 
        {
            var arrayVal = myArray[i];
            if (typeof(arrayVal) !== 'undefined') 
            {
                result += "<tr><td>" + arrayVal + "</td><td>" + eval("nfObject." + arrayVal) + '</td></tr>';
            }
        }
        var resultHeader = "<tr><td><b>格式化类型</b></td><td><b>格式化值</b></td></tr>"
        $get('<%= Label3.ClientID %>').innerHTML = "<table border=1>" + resultHeader + result + "</table>";
     
        var n = 99.987;
        $get('<%= Label4.ClientID %>').innerHTML = "<p/><h3>numberFormat示例：" + n.localeFormat("C") + "<h3>";
        
    </script>

</asp:Content>

运行结果
区域名称：zh-CN

格式化类型	格式化值
AMDesignator	上午
Calendar	[object Object]
DateSeparator	-
FirstDayOfWeek	0
CalendarWeekRule	0
FullDateTimePattern	yyyy'年'M'月'd'日' H:mm:ss
LongDatePattern	yyyy'年'M'月'd'日'
LongTimePattern	H:mm:ss
MonthDayPattern	M'月'd'日'
PMDesignator	下午
RFC1123Pattern	ddd, dd MMM yyyy HH':'mm':'ss 'GMT'
ShortDatePattern	yyyy-M-d
ShortTimePattern	H:mm
SortableDateTimePattern	yyyy'-'MM'-'dd'T'HH':'mm':'ss
TimeSeparator	:
UniversalSortableDateTimePattern	yyyy'-'MM'-'dd HH':'mm':'ss'Z'
YearMonthPattern	yyyy'年'M'月'
AbbreviatedDayNames	日,一,二,三,四,五,六
ShortestDayNames	日,一,二,三,四,五,六
DayNames	星期日,星期一,星期二,星期三,星期四,星期五,星期六
AbbreviatedMonthNames	一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月,
MonthNames	一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月,
IsReadOnly	true
NativeCalendarName	公历
AbbreviatedMonthGenitiveNames	一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月,
MonthGenitiveNames	一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月,

dateTimeFormat示例：2007年6月22日 8:23:27

区域名称：zh-CN

格式化类型	格式化值
CurrencyDecimalDigits	2
CurrencyDecimalSeparator	.
IsReadOnly	true
CurrencyGroupSizes	3
NumberGroupSizes	3
PercentGroupSizes	3
CurrencyGroupSeparator	,
CurrencySymbol	￥
NaNSymbol	非数字
CurrencyNegativePattern	2
NumberNegativePattern	1
PercentPositivePattern	1
PercentNegativePattern	1
NegativeInfinitySymbol	负无穷大
NegativeSign	-
NumberDecimalDigits	2
NumberDecimalSeparator	.
NumberGroupSeparator	,
CurrencyPositivePattern	0
PositiveInfinitySymbol	正无穷大
PositiveSign	+
PercentDecimalDigits	2
PercentDecimalSeparator	.
PercentGroupSeparator	,
PercentSymbol	%
PerMilleSymbol	‰
NativeDigits	0,1,2,3,4,5,6,7,8,9
DigitSubstitution	1

numberFormat示例：￥99.98

StringBuilder.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="StringBuilder.aspx.cs"
    Inherits="ClientScripting_Sys_StringBuilder" Title="StringBuilder" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <textarea id="TraceConsole" style=" 500px; height: 300px;"></textarea>

    <script type="text/javascript">
        function buildString(title)
        {
            // 创建一个StringBuilder对象
            var sb = new Sys.StringBuilder("aaa");
            // toString() - 将StringBuilder对象的内容转换为字符串
            Sys.Debug.trace("StringBuilder：" + sb.toString());
            
            // 添加指定字符串到StringBuilder对象的结尾
            sb.append("bbb");
            Sys.Debug.trace("StringBuilder：" + sb);

            // 添加指定字符串到StringBuilder对象的结尾并添加一个换行符
            sb.appendLine("ccc");
            Sys.Debug.trace("StringBuilder：" + sb);
            
            // 添加一个换行符到StringBuilder对象的结尾
            sb.appendLine();
            // toString(separator) - 在StringBuilder对象内的每一个元素的结尾处添加指定字符串
            // 然后将StringBuilder对象的内容转换为字符串
            Sys.Debug.trace("StringBuilder：" + sb.toString('xxx'));

            // 清除StringBuilder对象所有内容
            sb.clear();
            Sys.Debug.trace("StringBuilder：" + sb);
            
            // StringBuilder对象的内容是否为空
            var bln = sb.isEmpty();
            Sys.Debug.trace("StringBuilder：" + bln);
        }

        function pageLoad()
        {
            buildString();
        }
    </script>

</asp:Content>

运行结果
StringBuilder：aaa
StringBuilder：aaabbb
StringBuilder：aaabbbccc

StringBuilder：aaaxxxbbbxxxccc
xxx

StringBuilder：
StringBuilder：true


OK
[源码下载]