基于微软Ajax实现前台JS调用后台C#方法.docVIP

基于微软Ajax实现前台JS调用后台C#方法 　　摘要：ASP.NET中的所有后台代码都是服务器端方法，在调用时会引起回发，造成页面抖动，严重时更会导致浏览器“白屏”或“假死”。为此，本文提出一种巧用微软Ajax使前台方法调用后台方法，避免浏览器抖动的同时增强用户体验。并分别是使用隐藏按钮、调用第三方AjaxPro控件和巧用微软Ajax。并分别从是否能够对后台方法传递参数，后台方法是否有返回值，参数和返回值是否既是值类型又是引用类型，性能和易测性是否高，后台方法中是否能够引用服务器端控件等五方面对该方式进行分析比较。最终将微软Ajax确立为实现前台代码调用后台代码的最佳实现方式。 　　关键词：页面回发 隐藏 AjaxPro 微软Ajax 　　中图分类号：TP31 文献标识码：A 文章编号：1007-9416（2015）09-0000-00 　　1 前台代码与后台代码的区别 　　为弥补早期ASP各类型代码混淆在一起难以分辨区分，严重影响程序可读性的不足，.NET推出的ASP.NET采用前台代码与后台代码相互分离的方式，在很大程度上提高了程序的可读性。以特定ASP.NET页面开发为例。前台代码被写在以aspx为后缀的文件中，主要包括HTML、CSS、JAVASCRIPT等一系列用于布局、美工、特效的纯客户端代码。后台代码则被写在以aspx.cs为后缀的文件中，主要包括C#等一系列用于程序逻辑的服务器端代码。具体区别如表1所示。 　　表1 前后台代码区别 　　文件后缀不同 应用对象不同 　　前台代码 以aspx、ascx、html、htm为后缀 客户端代码 　　后台代码 以cs为后缀 服务器端代码 　　其中，客户端代码与服务器端代码也有两点区别。第一，原理不同。客户端代码在浏览器端发出请求，立即在浏览器端响应。服务器端代码在浏览器端发出请求，在服务器端响应，再由服务器将响应结果返回给客户端。所以，单就性能而言，客户端代码优于服务器端代码。第二，应用范围不同。根据最佳实践，服务器端代码应专用于与数据库交互的逻辑。这些交互包括增加、修改、删除、获取数据库的值。所以，尽管服务器端代码的性能低于客户端代码，这些与数据库交互的职责也应由后台的服务器端代码承担，因为数据库仅存在于服务器端。 　　以实现“显示表格”为例。表格的布局用前台HTML代码实现，表格的美化用前台CSS代码实现，表格的特效用前台的JAVASCRIPT代码实现。这些特效可以是当鼠标移至表格某一行时，该行变为深色，表示已到达该行。离开该行时，该行变回浅色，表示已离开该行。而从数据库获取表格中的数据，必须用后台C#代码实现。 　　2 前台代码调用后台代码的必要性与难点 　　大部分情况下前台代码与后台代码相互分离，之间不发生任何关联。但在某些情况下，前台代码调用后台代码又显得非常必要。因为后台代码都是服务器端方法，所以在调用的时候会引起页面回发，即页面刷新。而页面刷新的直观表现便是页面抖动。当方法执行缓慢时，更是会引起浏览器“白屏”或“假死”的现状。此时，为增强用户体验，常常用前台方法调用后台方法去执行服务器端方法，避免页面刷新。 　　以实现“删除表格中特定行数据”为例。一般情况下，删除特定行数据就是删除数据库中的特定数据，用后台服务器端代码实现。但若纯粹用后台代码实现，便会引起浏览器页面刷新，页面发生抖动。为改善这种用户体验，使删除数据的同时页面不发生抖动。首先调用前台JAVASCRIPT脚本在页面中删除该行数据，然后由前台JS调用后台C#代码，删除数据库中对应的数据。针对这种上述这些情况，前台代码调用后台代码就显得尤为重要必要。 　　然而，实现前台代码调用后台代码是有难度的。因为创建ASP.NET程序语言的设计师，当初的设计初衷就是将前后台代码分离。现在若要实现前台代码调用后台代码，这就意味着必须在原有前后台代码之间的鸿沟上建立一座桥梁。为搭建这座“通信桥梁”，本文提出一种巧用微软Ajax的实现方式。 　　3 巧用微软Ajax 　　3.1 微软Ajax的使用 　　（1）在项目中添加AjaxControlToolkit.dll文件引用。 　　（2）在前台页面将ToolkitScriptManager的EnablePageMethods属性设置为True，代码如下。 　　 　　 　　该步骤架起了前台代码与后台代码的“通信桥梁”。 　　（3）在需要调用的后台方法上方加入WebMethod方法特性，代码如下。 　　[System.Web.Services.WebMethod] 　　public static void DeleteFile（string fileName， int id）{} 　　（4）调用时必须用PageMe