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

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

<%@ 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" /> 
        </p> 
        <p> 
                <textarea id="TraceConsole" style="width: 500px; height: 400px;"></textarea> 
        </p> 
</asp:Content>

<%@ 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>   <a href="?currentculture=en-us">英文</a> 
                  <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>

<%@ 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="width: 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>