新瓶旧酒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">

<asp:ScriptReference Path="~/ClientScripting/Sys/CustomButton.js" />

</Scripts>

</asp:ScriptManagerProxy>

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>

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>

</p>

<p>

</p>

<p>

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

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

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

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
[源码下载]

posted @ 2007-06-22 08:32 webabcd 阅读(6021) 评论(12) 编辑收藏举报

刷新页面返回顶部

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

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

numberFormat示例：￥99.98

公告