新瓶旧酒ASP.NET AJAX(2) - 客户端脚本编程(命名空间、类、成员、接口、继承、枚举)

简介:
[索引页]
[源码下载]


新瓶旧酒ASP.NET AJAX(2) - 客户端脚本编程(命名空间、类、成员、接口、继承、枚举)


作者: webabcd


介绍
Microsoft AJAX Library提供了对JavaScript的扩展和对面向对象的支持,并且与.NET框架非常相似。我们来看一下如何实现命名空间、类、成员、接口、继承和枚举。


关键
1、Sys.Type类
    ·Type.registerNamespace("命名空间的名称");
    ·classInstanceVar.registerClass("类名称", 基类(可选), 接口(可选,多个就顺序写下去));
    ·typeInstanceVar.registerInterface("接口名称");
    ·ANamespace.AnEnum.registerEnum( "枚举名称" );
    ·typeVar.initializeBase(初始化基类的实例 (一般是this), [传值给基类构造函数的参数](可选)  ); (返回值为基类的实例)
    ·instanceVar.callBaseMethod(调用基类方法的实例 (一般是this), "基类的方法名称" ,  [传值给基类方法的参数](可选) );
    · 其它请查看官方文档

2、为了使“partial-page rendering”有效,应该像如下这样引用外部js
<asp:ScriptManager ID="ScriptManager1" runat="server"> 
    <Scripts> 
        <asp:ScriptReference path="MyScript.js" /> 
    </Scripts> 
</asp:ScriptManager>
 
3、为了使ScriptManager正确的处理脚本,在每一个js文件的结尾处都应该包括如下这句
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
 
示例
Sample.js
// 注册一个名为“Demo”的命名控件 
Type.registerNamespace( "Demo"); 

// 定义Demo命名空间下的Message类的构造函数 
Demo.Message =  function(content, publishTime)    

         this._content = content; 
         this._publishTime = publishTime; 


// 定义Demo命名空间下的Message类的方法 
Demo.Message.prototype =    

         
        get_content:  function()    
        { 
                 return  this._content; 
        }, 
         
        get_publishTime:  function()    
        { 
                 return  this._publishTime.format( "yyyy-MM-dd HH:mm:ss"); 
        }, 
         
        toString:  function()    
        { 
                 return  this.get_content() +  " " +  this.get_publishTime(); 
        } 



// 在Demo命名空间下注册Message类 
Demo.Message.registerClass('Demo.Message'); 


// 定义在Demo命名空间下的IContent接口(接口不能有构造函数) 
Demo.IContent =  function()    




// 定义Demo命名空间下的IContent接口的方法 
Demo.IContent.prototype =    

        showContent :  function()    
        { 
         
        } 


// 在Demo命名空间下注册IContent接口 
Demo.IContent.registerInterface('Demo.IContent'); 

// 定义Demo命名空间下的MessageWithUserId类的构造函数 
// 我们之后要让这个类继承自Demo.Message 
// 在构造函数内用initializeBase调用基类的构造函数 
Demo.MessageWithUserId =  function(userId, content, publishTime)    

        Demo.MessageWithUserId.initializeBase( this, [content, publishTime]); 
         
         this._userId = userId; 


// 定义Demo命名空间下的MessageWithUserId类的方法 
Demo.MessageWithUserId.prototype =    

        get_userId:  function() 
        { 
                 return  this._userId; 
        }, 
         
        showContent:  function()    
        { 
                 return Demo.MessageWithUserId.callBaseMethod( this, 'get_content') 
        }, 
         
         // callBaseMethod用于调用基类的方法 
        toString:  function()    
        { 
                 return  this.get_userId() +  " " + Demo.MessageWithUserId.callBaseMethod( this, 'toString'); 
        } 


// 在Demo命名空间下注册MessageWithUserId类 
// 他继承自Demo.Message类和Demo.IContent接口 
Demo.MessageWithUserId.registerClass('Demo.MessageWithUserId', Demo.Message, Demo.IContent); 


// 定义在Demo命名空间下的Color枚举(枚举不能有构造函数) 
Demo.Color =  function()    




// 定义Demo命名空间下的Color枚举的成员 
Demo.Color.prototype =    

         // “0x”代表16进制,eval一下就会变成10进制的整型 
        Red:        0xFF0000, 
        Blue:     0x0000FF, 
        Green:    0x00FF00, 
        White:    0xFFFFFF    


// 在Demo命名空间下注册Color枚举 
Demo.Color.registerEnum( "Demo.Color"); 


// 只有对异步回发才需要向脚本文件中的 Sys.Application.notifyScriptLoaded 方法添加调用 
// 建议在每一个js文件的结尾处都应该包括如下这句 
// 通知ScriptManager这段脚本已经加载完毕 
if ( typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
 
 
Sample.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Sample.aspx.cs" 
        Inherits="ClientScripting_Sample" Title="命名空间,类,成员,接口,继承,枚举" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> 
        <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="Server"> 
                <scripts> 
                        <asp:ScriptReference Path="~/ClientScripting/Sample.js" /> 
                </scripts> 
        </asp:ScriptManagerProxy> 
        <p> 
                <input id="btnTestClass" value="类的测试" type="button" btnTestClass_onlick()" /> 
        </p> 
        <p> 
                <input id="btnTestInheritance" value="类、接口和继承的测试" type="button" btnTestInheritance_ /> 
        </p> 
        <p> 
                枚举的测试 
                <select id="selTestEnum" onchange="selTestEnum_onchange(options[selectedIndex].value)"> 
                        <option value="Red">Red</option> 
                        <option value="Blue">Blue</option> 
                        <option value="Green">Green</option> 
                        <option value="White">White</option> 
                </select> 
        </p> 

        <script type="text/javascript"> 

        function btnTestClass_onlick()    
        { 
                var d = new Date();        

                var testMessage = new Demo.Message('hello', d); 
                alert(testMessage.get_content() + " " + testMessage.get_publishTime()); 
                alert(testMessage); 

                return false; 
        } 
         
        function btnTestInheritance_onclick()    
        { 
                var d = new Date();        

                var testMessage = new Demo.MessageWithUserId('webabcd', 'hello', d); 
                alert(testMessage.get_userId() + " " + testMessage.get_content() + " " + testMessage.get_publishTime()); 
                alert(testMessage); 
                alert(testMessage.showContent()); 
                alert(Demo.IContent.isImplementedBy(testMessage)); 

                return false; 
        } 
         
        function selTestEnum_onchange(value)    
        { 
                document.body.bgColor = eval("Demo.Color." + value); 
        } 
     
        </script> 

</asp:Content>
 
运行结果
1、单击“类的测试”按钮后
hello 2007-05-28 08:47:11
hello 2007-05-28 08:47:11

2、单击“类、接口和继承的测试”按钮后
webabcd hello 2007-05-28 08:48:16
webabcd hello 2007-05-28 08:48:16
hello
true 

3、选择“枚举的测试”的选项后
页面会变成你选择的颜色


OK
[源码下载]
 

     本文转自webabcd 51CTO博客,原文链接:http://blog.51cto.com/webabcd/344670 ,如需转载请自行联系原作者
相关文章
|
存储 Shell Linux
快速上手基于 BaGet 的脚本自动化构建 .net 应用打包
本文介绍了如何使用脚本自动化构建 `.net` 应用的 `nuget` 包并推送到指定服务仓库。首先概述了 `BaGet`——一个开源、轻量级且高性能的 `NuGet` 服务器,支持多种存储后端及配置选项。接着详细描述了 `BaGet` 的安装、配置及使用方法,并提供了 `PowerShell` 和 `Bash` 脚本实例,用于自动化推送 `.nupkg` 文件。最后总结了 `BaGet` 的优势及其在实际部署中的便捷性。
766 10
|
开发框架 监控 .NET
C#进阶-ASP.NET WebForms调用ASMX的WebService接口
通过本文的介绍,希望您能深入理解并掌握ASP.NET WebForms中调用ASMX WebService接口的方法和技巧,并在实际项目中灵活运用这些技术,提高开发效率和应用性能。
885 5
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
245 0
|
Prometheus 监控 前端开发
前端项目脚本加载失败:net:: ERR_HTTP2_PROTOCOL_ERROR 200
前端项目脚本加载失败:net:: ERR_HTTP2_PROTOCOL_ERROR 200
3767 0
前端项目脚本加载失败:net:: ERR_HTTP2_PROTOCOL_ERROR 200
|
开发框架 前端开发 安全
ASP.NET Core Startup类Config gure()方法|ASP.NET Core 中间件详细说明
目录 Startup 类 Configure() 方法 中间件 使用中间件 Configure 方法 的参数 IApplicationBuilder Extension Methods(拓展方法)--微软提供的中间件
302 56
ASP.NET Core Startup类Config gure()方法|ASP.NET Core 中间件详细说明
|
开发框架 .NET Java
ASP.NET Core高级编程--C#基本特性(一)
本文章简略介绍C#的部分特性
|
SQL 开发框架 .NET
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
198 0
|
开发框架 前端开发 .NET
ASP.NET Core 基础知识之​Startup 类配置
Startup 类配置服务和应用的请求管道。
345 0
|
开发框架 .NET 数据库
asp.net企业费用报销管理信息系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio
asp.net 企业费用报销管理信息系统是一套完善的web设计管理系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为vs2010,数据库为sqlserver2008,使 用c#语言开发 应用技术:asp.net c#+sqlserver 开发工具:vs2010 +sqlserver
272 0
|
存储 开发框架 前端开发
ASP.NET MVC5----了解我们使用的@HTML帮助类
ASP.NET MVC5----了解我们使用的@HTML帮助类
408 0
ASP.NET MVC5----了解我们使用的@HTML帮助类