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

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

介绍

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对象内的每一个元素的结尾处添加指定字符串

示例

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()    

                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'); 

        // unhover事件处理器 

        _unhoverHandler: function(event)    

                var h = this.get_events().getHandler('unhover'); 

        } 

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') 

                        ); 

                                {text: '自定义Button（Label1）'},    

                                $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> 

                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); 

        <p> 

                <button type="button" id="Button1"> 

                </button> 

                <span id="Label1"></span> 

        </p> 

                <input type="button" id="Button2" value="列举所有Component" /> 

                <textarea id="TraceConsole" style="width: 500px; height: 400px;"></textarea> 

</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" %> 

        <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); 

                <a href="?currentculture=zh-cn">中文</a>   <a href="?currentculture=en-us">英文</a> 

                  <a href="?currentculture=sq">阿尔巴尼亚语</a> 

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

                // 创建一个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; 

                                result += "<tr><td>" + arrayVal + "</td><td>" + eval("nfObject." + arrayVal) + '</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>"; 

区域名称：zh-CN

格式化类型

格式化值

AMDesignator

上午

Calendar

[object Object]

DateSeparator

-

FirstDayOfWeek

CalendarWeekRule

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

CurrencyDecimalDigits

2

CurrencyDecimalSeparator

.

CurrencyGroupSizes

3

NumberGroupSizes

PercentGroupSizes

CurrencyGroupSeparator

,

CurrencySymbol

￥

NaNSymbol

非数字

CurrencyNegativePattern

NumberNegativePattern

1

PercentPositivePattern

PercentNegativePattern

NegativeInfinitySymbol

负无穷大

NegativeSign

NumberDecimalDigits

NumberDecimalSeparator

NumberGroupSeparator

CurrencyPositivePattern

PositiveInfinitySymbol

正无穷大

PositiveSign

+

PercentDecimalDigits

PercentDecimalSeparator

PercentGroupSeparator

PercentSymbol

%

PerMilleSymbol

‰

NativeDigits

0,1,2,3,4,5,6,7,8,9

DigitSubstitution

StringBuilder.aspx

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

        Inherits="ClientScripting_Sys_StringBuilder" Title="StringBuilder" %> 

        <textarea id="TraceConsole" style="width: 500px; height: 300px;"></textarea> 

                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"); 

                        // 添加一个换行符到StringBuilder对象的结尾 

                        sb.appendLine(); 

                        // toString(separator) - 在StringBuilder对象内的每一个元素的结尾处添加指定字符串 

                        // 然后将StringBuilder对象的内容转换为字符串 

                        Sys.Debug.trace("StringBuilder：" + sb.toString('xxx')); 

                        // 清除StringBuilder对象所有内容 

                        sb.clear(); 

                        // StringBuilder对象的内容是否为空 

                        var bln = sb.isEmpty(); 

                        Sys.Debug.trace("StringBuilder：" + bln); 

                function pageLoad() 

                        buildString(); 

StringBuilder：aaa

StringBuilder：aaabbb

StringBuilder：aaabbbccc 

StringBuilder：aaaxxxbbbxxxccc

xxx 

StringBuilder：

StringBuilder：true

     本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/344803，如需转载请自行联系原作者