客户端调用服务器端方法——ASP.NET AJAX(Atlas)、Anthem.NET和Ajax.NET Professional实现之小小比较

前几天曾经发过一篇《ASP.NET AJAX(Atlas)和Anthem.NET——管中窥豹般小小比较》,Jeffrey Zhao说用ASP.NET AJAX中的UpdatePanel似乎不大好。我想了想确实如此,有些高射炮打蚊子的感觉。还有朋友希望我也能在比较中关照一下Ajax.NET Professional——同样是个ASP.NET平台上非常优秀的Ajax框架。

种种要求下,形成此文。本文将比较在ASP.NET AJAX(Atlas)、Anthem.NET和Ajax.NET Professional这三个知名ASP.NET上Ajax框架中实现客户端调用服务器端方法的实现。客户端调用服务器端方法是每一个Ajax框架都必须考虑的问题,非常具有代表性。在程序编写过程中,我也将抛弃掉某些框架中提供的“智能的”服务器端控件(例如ASP.NET AJAX的UpdatePanel),而完全用手工JavaScript和C#实现,力求创造出较为“公平”的比较环境。

由于本文侧重于“比较”,而不是“介绍”,所以对于基础知识都一笔带过。有需要详细了解程序实现,或是希望重现实验结果的朋友,可以下载本文附带的代码。

 

程序要实现的功能

程序功能很简单,却也足够典型:

  1. 用户点击页面上的某个<input>按钮
  2. 浏览器执行该按钮的客户端JavaScript事件处理函数
  3. 该JavaScript事件处理函数调用某服务器端方法
  4. 服务器端方法执行并返回当前时间
  5. 客户端JavaScript回调函数执行,将服务器端返回的时间显示在页面中一个<span>中

 

程序运行界面

由于这三个程序的界面、行为以及实现功能都完全一致,所以这里仅以ASP.NET AJAX(Atlas)版本的为例。下面是程序初始化之后的界面:

点击按钮,上面介绍的5个步骤将依次执行,最终得到如下图所示的结果,显示出服务器端时间:

 

ASP.NET AJAX(Atlas)版本的实现代码

首先是页面的HTML部分,注意ASP.NET AJAX(Atlas)独有的ScriptManager控件:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
    <input type="button" value="Get Server Time" id="btnGetServerTime" onclick="return btnGetServerTime_onclick()" />
    <span id="result" />
</div>

然后是客户端JavaScript部分,注意用PageMethods.GetServerTime()这样的形式调用服务器端方法:

function btnGetServerTime_onclick() {
    PageMethods.GetServerTime(cb_getServerTime);
}
 
function cb_getServerTime(result) {
    document.getElementById("result").innerHTML = result;
}

服务器端代码如下,注意方法必须为静态,且添加[System.Web.Services.WebMethod]和[Microsoft.Web.Script.Services.ScriptMethod]两个属性:

[System.Web.Services.WebMethod]
[Microsoft.Web.Script.Services.ScriptMethod]
public static string GetServerTime()
{
    return DateTime.Now.ToString();
}

OK!

 

Anthem.NET版本的实现代码

首先是页面的HTML部分,没什么过多需要注意的:

<div>
    <input type="button" value="Get Server Time" id="btnGetServerTime" onclick="return btnGetServerTime_onclick()" />
    <span id="result" />
</div>

客户端JavaScript部分,注意用Anthem_InvokePageMethod辅助函数调用服务器端方法:

function btnGetServerTime_onclick() {
    Anthem_InvokePageMethod("GetServerTime", [], cb_getServerTime);
}
 
function cb_getServerTime(result) {
    document.getElementById("result").innerHTML = result.value;
}

最后是服务器端代码,注意Page_Load中要注册一下(与ASP.NET AJAX中的ScriptManager有异曲同工之妙)。还有方法应用了[Anthem.Method]属性:

[Anthem.Method]
public string GetServerTime()
{
    return DateTime.Now.ToString();
}
 
protected void Page_Load(object sender, EventArgs e)
{
    Anthem.Manager.Register(this);
}

OK!

 

Ajax.NET Professional版本的实现代码

页面的HTML部分和Anthem.NET版本的完全一致:

<div>
    <input type="button" value="Get Server Time" id="btnGetServerTime" onclick="return btnGetServerTime_onclick()" />
    <span id="result" />
</div>

客户端JavaScript部分倒于与ASP.NET AJAX得有几分神似,注意“ASP.ajaxpro_aspx”这个东西为本ASP.NET页面编译后的类名:

function btnGetServerTime_onclick() {
    ASP.ajaxpro_aspx.GetServerTime(cb_getServerTime);
}
 
function cb_getServerTime(result) {
    document.getElementById("result").innerHTML = result.value;
}

服务器端代码类似Anthem.NET版本的实现方式,同样需要在Page_Load中注册,且需要为方法应用一个属性——不过这里是[AjaxPro.AjaxMethod]:

[AjaxPro.AjaxMethod]
public string GetServerTime()
{
    return DateTime.Now.ToString();
}
 
protected void Page_Load(object sender, EventArgs e)
{
    AjaxPro.Utility.RegisterTypeForAjax(this.GetType());
}

OK!

 

实现方式比较

用图表说话吧,我也同样不再评论了:

 

源代码下载

这个是我进行本次实验所用到的程序源代码:3ASPNETAJAXFrameworksTest.zip

 

出处:http://www.cnblogs.com/dflying/archive/2006/11/27/573860.html

posted on   jack_Meng  阅读(879)  评论(0编辑  收藏  举报

编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek “源神”启动!「GitHub 热点速览」
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
历史上的今天:
2014-12-02 C# 实现程序只启动一次(总结)
2014-12-02 C# 实现程序只启动一次(实现程序自重启)
2014-12-02 C# 实现程序只启动一次(多次运行激活第一个实例,使其获得焦点,并设置窗口在最前端显示)
2014-12-02 C#检测应用程序重复启动----函数检测(可以在多用户登录情况下检测)
2014-12-02 C#防止程序多次运行
2014-12-02 给System.Timer类的Elapsed事件加锁
2014-12-02 手缝针法大全--缝补衣服针法(图文讲解,转自汉服制作研习吧)

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示

喜欢请打赏

扫描二维码打赏

支付宝打赏

主题色彩