首页 > 范文大全 > 正文

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

开篇:润墨网以专业的文秘视角,为您筛选了一篇基于微软Ajax实现前台JS调用后台C#方法范文,如需获取更多写作素材,在线客服老师一对一协助。欢迎您的阅读与分享!

摘要:中的所有后台代码都是服务器端方法,在调用时会引起回发,造成页面抖动,严重时更会导致浏览器“白屏”或“假死”。为此,本文提出一种巧用微软ajax使前台方法调用后台方法,避免浏览器抖动的同时增强用户体验。并分别是使用隐藏按钮、调用第三方AjaxPro控件和巧用微软Ajax。并分别从是否能够对后台方法传递参数,后台方法是否有返回值,参数和返回值是否既是值类型又是引用类型,性能和易测性是否高,后台方法中是否能够引用服务器端控件等五方面对该方式进行分析比较。最终将微软Ajax确立为实现前台代码调用后台代码的最佳实现方式。

关键词:页面回发 隐藏 AjaxPro 微软Ajax

中图分类号:TP31 文献标识码:A 文章编号:1007-9416(2015)09-0000-00

1 前台代码与后台代码的区别

为弥补早期ASP各类型代码混淆在一起难以分辨区分,严重影响程序可读性的不足,.NET推出的采用前台代码与后台代码相互分离的方式,在很大程度上提高了程序的可读性。以特定页面开发为例。前台代码被写在以aspx为后缀的文件中,主要包括HTML、CSS、JAVASCRIPT等一系列用于布局、美工、特效的纯客户端代码。后台代码则被写在以aspx.cs为后缀的文件中,主要包括C#等一系列用于程序逻辑的服务器端代码。具体区别如表1所示。

表1 前后台代码区别

文件后缀不同 应用对象不同

前台代码 以aspx、ascx、html、htm为后缀 客户端代码

后台代码 以cs为后缀 服务器端代码

其中,客户端代码与服务器端代码也有两点区别。第一,原理不同。客户端代码在浏览器端发出请求,立即在浏览器端响应。服务器端代码在浏览器端发出请求,在服务器端响应,再由服务器将响应结果返回给客户端。所以,单就性能而言,客户端代码优于服务器端代码。第二,应用范围不同。根据最佳实践,服务器端代码应专用于与数据库交互的逻辑。这些交互包括增加、修改、删除、获取数据库的值。所以,尽管服务器端代码的性能低于客户端代码,这些与数据库交互的职责也应由后台的服务器端代码承担,因为数据库仅存在于服务器端。

以实现“显示表格”为例。表格的布局用前台HTML代码实现,表格的美化用前台CSS代码实现,表格的特效用前台的JAVASCRIPT代码实现。这些特效可以是当鼠标移至表格某一行时,该行变为深色,表示已到达该行。离开该行时,该行变回浅色,表示已离开该行。而从数据库获取表格中的数据,必须用后台C#代码实现。

2 前台代码调用后台代码的必要性与难点

大部分情况下前台代码与后台代码相互分离,之间不发生任何关联。但在某些情况下,前台代码调用后台代码又显得非常必要。因为后台代码都是服务器端方法,所以在调用的时候会引起页面回发,即页面刷新。而页面刷新的直观表现便是页面抖动。当方法执行缓慢时,更是会引起浏览器“白屏”或“假死”的现状。此时,为增强用户体验,常常用前台方法调用后台方法去执行服务器端方法,避免页面刷新。

以实现“删除表格定行数据”为例。一般情况下,删除特定行数据就是删除数据库中的特定数据,用后台服务器端代码实现。但若纯粹用后台代码实现,便会引起浏览器页面刷新,页面发生抖动。为改善这种用户体验,使删除数据的同时页面不发生抖动。首先调用前台JAVASCRIPT脚本在页面中删除该行数据,然后由前台js调用后台c#代码,删除数据库中对应的数据。针对这种上述这些情况,前台代码调用后台代码就显得尤为重要必要。

然而,实现前台代码调用后台代码是有难度的。因为创建程序语言的设计师,当初的设计初衷就是将前后台代码分离。现在若要实现前台代码调用后台代码,这就意味着必须在原有前后台代码之间的鸿沟上建立一座桥梁。为搭建这座“通信桥梁”,本文提出一种巧用微软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)调用时必须用PageMethods引出DeleteFile后台方法,代码如下。

function deleteFile(file, id, rowIndex) {

PageMethods.DeleteFile(file, id);

deleteRow(rowIndex);

}

3.2 微软Ajax的优势[1]

第一,微软Ajax与均为微软所开发,在性能和兼容性方面都值得信赖。第二,该方法既允许带参数也允许有返回值。第三,该方法必须定义为静态方法,这使控件的引用不为空。即在执行过程中允许获取或设置控件的值。

4 结语

为实现前台代码调用后台代码,本文给出巧用微软Ajax的实现方式。该方法能够向后台传递参数,有返回值,且参数参数和返回值既支持值类型也支持引用类型。其实现性能高,易于测试,且后台能够获取或设置控件的值。所以,综上所述,微软Ajax是实现前台代码调用后台代码的最佳方案。

参考文献

[1] 谭力,杨宗源,谢瑾奎.Ajax技术的数据响应优化[J].计算机工程,2010,(07).

收稿日期:2015-07-25

作者简介:曾琪(1983―),女,江西南昌人,江西制造职业技术学院信息工程系讲师,硕士,研究方向:计算机应用;鲁震霆(1982―),男,江西南昌人,江西工业职业技术学院电子与信息工程分院讲师,硕士,研究方向:计算机科学与技术。