要实现客户端回调的ASP.NET页的CS代码与创建ASP.NET页的过程类似,但也存在一些区别。该页的服务器代码必须:1、实现ICallbackEventHandler接口;2、提供RaiseCallbackEvent方法的实现;3、提供GetCallbackResult方法的实现。同时在客户端必须三个脚本函数:1、一个函数调用帮助器方法,该方法执行对服务器的实际请求;2、客户端回调函数,处理回调事件的服务器代码的结果调用并接收该结果;3、第三个函数是执行实际服务器请求的 Helper 函数。当在服务器代码中使用 GetCallbackEventReference方法生成对此函数的引用时,ASP.NET 将自动生成此函数。
现在,我们从实例来分析Callback的实现方法。
.aspx页源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CallbackDemo</title>
<script type="text/javascript">
function GetServerDateTime(context) ...{
<%= ClientScript.GetCallbackEventReference(this, "", "ReceiveServerData", "")%>;
}
function ReceiveServerData(rValue) ...{
document.getElementById("ResultsSpan").innerHTML = rValue;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btnSubmit" type="button" value="现在时间是" onclick="GetServerDateTime(ResultsSpan)" />
<br />
<span id="ResultsSpan" runat="server"></span>
</div>
</form>
</body>
</html>
.aspx.cs源代码:
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class CallbackDemo : System.Web.UI.Page,ICallbackEventHandler
...{
protected void Page_Load(object sender, EventArgs e)
...{
}
public void RaiseCallbackEvent(String eventArgument)
...{
}
public String GetCallbackResult()
...{
return DateTime.Now.ToString();
}
}
演示中客户端注册的脚本函数:<%= ClientScript.GetCallbackEventReference(this, "", "ReceiveServerData", "")%>;。这句动态生成一个客户端函数,该函数包含对来自GetCallbackEventReference方法的返回值的调用。ClientScriptManager.GetCallbackEventReference方法有4个重载函数,上面这个方法中,"this"是处理客户端回调的服务器控件,它必须实现ICallbackEventHandler 接口并提供RaiseCallbackEvent 方法,它的类型是System.Web.UI.Control。第二个参数是从客户端脚本传递给服务器的一个参数,它是String类型的。第三个函数是客户端事件处理程序的名称,它接收成功的服务器事件的结果,这里把回调结果返回给JS中的ReceiveServerData()方法。最后一个参数是启动回调之前在客户端计算的客户端脚本。脚本的结果传回客户端事件处理程序。
JS方法:
document.getElementById("ResultsSpan").innerHTML = rValue;
}
接收服务器事件的结果,并将结果呈现出来。
而服务器端的RaiseCallbackEvent()方法没有内容,因为这里是最简单的演示,我们没有回调参数,如果有回调参数在这个方法中处理。GetCallbackResult()则是返回当前的系统时间。
在VS中测试刚才的DEMO,发现会在浏览器源代码中自动生成一段这样的代码:
这个DEMO产生的WebResource.axd有21KB大小,测试了一下,所有的文件都是一样的体积。它是在这个文件中创建了AJAX请求:
var postData = __theFormPostData +
"__CALLBACKID=" + WebForm_EncodeCallback(eventTarget) +
"&__CALLBACKPARAM=" + WebForm_EncodeCallback(eventArgument);
if (theForm["__EVENTVALIDATION"]) ...{
postData += "&__EVENTVALIDATION=" + WebForm_EncodeCallback(theForm["__EVENTVALIDATION"].value);
}
var xmlRequest,e;
try ...{
xmlRequest = new XMLHttpRequest();
}
catch(e) ...{
try ...{
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) ...{
}
}
var setRequestHeaderMethodExists = true;
try ...{
setRequestHeaderMethodExists = (xmlRequest && xmlRequest.setRequestHeader);
}
catch(e) ...{}
var callback = new Object();
callback.eventCallback = eventCallback;
callback.context = context;
callback.errorCallback = errorCallback;
callback.async = useAsync;
var callbackIndex = WebForm_FillFirstAvailableSlot(__pendingCallbacks, callback);
if (!useAsync) ...{
if (__synchronousCallBackIndex != -1) ...{
__pendingCallbacks[__synchronousCallBackIndex] = null;
}
__synchronousCallBackIndex = callbackIndex;
}
if (setRequestHeaderMethodExists) ...{
xmlRequest.onreadystatechange = WebForm_CallbackComplete;
callback.xmlRequest = xmlRequest;
xmlRequest.open("POST", theForm.action, true);
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
xmlRequest.send(postData);
return;
}
callback.xmlRequest = new Object();
var callbackFrameID = "__CALLBACKFRAME" + callbackIndex;
var xmlRequestFrame = document.frames[callbackFrameID];
if (!xmlRequestFrame) ...{
xmlRequestFrame = document.createElement("IFRAME");
xmlRequestFrame.width = "1";
xmlRequestFrame.height = "1";
xmlRequestFrame.frameBorder = "0";
xmlRequestFrame.id = callbackFrameID;
xmlRequestFrame.name = callbackFrameID;
xmlRequestFrame.style.position = "absolute";
xmlRequestFrame.style.top = "-100px"
xmlRequestFrame.style.left = "-100px";
try ...{
if (callBackFrameUrl) ...{
xmlRequestFrame.src = callBackFrameUrl;
}
}
catch(e) ...{}
document.body.appendChild(xmlRequestFrame);
}
var interval = window.setInterval(function() ...{
xmlRequestFrame = document.frames[callbackFrameID];
if (xmlRequestFrame && xmlRequestFrame.document) ...{
window.clearInterval(interval);
xmlRequestFrame.document.write("");
xmlRequestFrame.document.close();
xmlRequestFrame.document.write('<html><body><form method="post"><input type="hidden" name="__CALLBACKLOADSCRIPT" value="t"></form></body></html>');
xmlRequestFrame.document.close();
xmlRequestFrame.document.forms[0].action = theForm.action;
var count = __theFormPostCollection.length;
var element;
for (var i = 0; i < count; i++) ...{
element = __theFormPostCollection[i];
if (element) ...{
var fieldElement = xmlRequestFrame.document.createElement("INPUT");
fieldElement.type = "hidden";
fieldElement.name = element.name;
fieldElement.value = element.value;
xmlRequestFrame.document.forms[0].appendChild(fieldElement);
}
}
var callbackIdFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackIdFieldElement.type = "hidden";
callbackIdFieldElement.name = "__CALLBACKID";
callbackIdFieldElement.value = eventTarget;
xmlRequestFrame.document.forms[0].appendChild(callbackIdFieldElement);
var callbackParamFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackParamFieldElement.type = "hidden";
callbackParamFieldElement.name = "__CALLBACKPARAM";
callbackParamFieldElement.value = eventArgument;
xmlRequestFrame.document.forms[0].appendChild(callbackParamFieldElement);
if (theForm["__EVENTVALIDATION"]) ...{
</span
发表评论
-
ASP.net中的cookies读写
2009-07-16 17:09 741Cookie (HttpCookie的实例)提供了一种在 We ... -
有关FCKeditor在asp.net 2.0下的配置问题.
2009-08-03 16:34 926今天配置了一下fckeditor,将这一过程与大家分享.fck ... -
asp.net 获取客户端计算机名
2009-08-09 20:43 22751. 在ASP.NET中专用属性: 获取服务器电脑名:Page ... -
入侵ASP.net网站的经验
2009-10-18 11:19 7871、对一般遇到.net的网站时 通常会注册个用户 第一选择 ... -
vs常用快捷键---提高编码效率
2009-12-04 19:12 8561 转到定义: F12; 2 设置书签:Ctr+K+K; 3 ... -
关于ashx
2009-12-07 21:09 929ashx是什么文件,如何创建 .ashx 文件用于写web ... -
在ASP.NET中实现多文件上传(转)
2010-04-05 11:10 828ASPX 代码 <!--<br /> ... -
在单个页面中实现多个radiobuttonlist的单选
2010-04-11 14:49 828最近做的这个项目 让我对radiobuttonlist的应用有 ... -
MMC不能打开文件SQLServerEnterpriseManager.MSC的解决方法
2010-05-01 11:13 844“开始” —> “运行” —> 键入MMC命令 ... -
json札记
2010-08-28 10:21 731js 中读取JSON的方法探讨 方法一:函数构造定义法返回v ...
相关推荐
一个基于ajax+ASP.NET实现的客户端Callback 控件源码例子。
随着ajax技术的流行以及用户体验得到越来越高的重视,各种注视用户体验的程序出现,比如带进度条的文件上传,看了网上很多资料还没找到真正意义上的ASP.NET实现进度条上传.Ajax 文件上传进度条,ASP.NET 文件上传...
在ASP.NET中使用WINDOWS验证方式连接SQL SERVER数据库 改进ADO.Net数据库访问方式 ASP.NET 2.0 绑定高级技巧 简单实用的DataSet更新数据库的类+总结 [ADO.NET]由数据库触发器引发的问题 为ASP.NET封装的SQL数据库...
——轻量级的弹出窗口jQuery插件,压缩后仅仅3.65Kb,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如callback函数,显示隐藏层,Ajax页面,iframe嵌入页面……
在web.config中设置httpHandleer标签 <configuration><br> <system.web><br> <httpHandlers><br> ,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory,Ajax" /> </httpHandlers><br> </system.web><br>...
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 页面内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
该控件集成了GridView 与TreeView控件的优点, 能进行多列Grid数据的树型展示,支持 databind, postback, callback, Microsoft Ajax, Event (Edit, Select, Expand, Populate, Collapse, Remove, Update, Cancel, etc...
ComponentArt Web.UI专为ASP.NET框架设计,它包含16个支持AJAX技术的优质用户界面控件,并可应用在ASP.NET 1.0, ASP.NET 2.0, ASP.NET AJAX框架中。 2008年3月27日,专注于ASP.NET Web.UI及Charting控件开发的...
11.1.3 CallBack实现ASP.NET Ajax应用 11.1.4 使用Microsoft ASP.NET Ajax控件实现Ajax应用 第12章 12.1 使用ASP.NET Ajax控件实现的页面无刷新的简单实例 第13章 AjaxGridView Ajax化的GridView ...
的asp.net实例,简单好学,是本人项目中的实例,看了网上写的太麻烦,自己写的。 Jcrop是一个jQuery插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能。 特点: 对所有图片均unobtrusively(无侵入的,保持...
11.1.3 CallBack实现ASP.NET Ajax应用 11.1.4 使用Microsoft ASP.NET Ajax控件实现Ajax应用 第12章 12.1 使用ASP.NET Ajax控件实现的页面无刷新的简单实例 第13章 AjaxGridView Ajax化的GridView ...
ComponentArt Web.UI专为ASP.NET框架设计,它包含16个支持AJAX技术的优质用户界面控件,并可应用在ASP.NET 1.0, ASP.NET 2.0, ASP.NET AJAX框架中。 <br>2008年3月27日,专注于ASP.NET Web.UI及Charting控件开发...
ComponentArt Web.UI专为ASP.NET框架设计,它包含16个支持AJAX技术的优质用户界面控件,并可应用在ASP.NET 1.0, ASP.NET 2.0, ASP.NET AJAX框架中。 <br>2008年3月27日,专注于ASP.NET Web.UI及Charting控件开发...
Callback为服务器端图片处理类, 通过使用Cutter封装客户端AJAX提交的数据, 然后调用Helper中的方法来完成图片处理。 BitmapScissors是一个HttpHandler, 通过客户端返回的 'action' 来调用Callback中的方法。 ...
// CODEGEN: This call is required by the ASP.NET Web Form Designer. // InitializeComponent(); base.OnInit(e); } /**//// /// Required method for Designer support - do not modify /// the ...
专为ASP.NET而设计:为三个先进且更强大的框架而设计:ASP.NET 1.0, ASP.NET 2.0和ASP.NET AJAX。 强大的客户端呈现技术:行业中最先进的Web用户界面技术。 ComponentArt Web.UI 包含以下用户界面控件 Calendar...
11.1.3 CallBack实现ASP.NET Ajax应用 11.1.4 使用Microsoft ASP.NET Ajax控件实现Ajax应用 第12章 12.1 使用ASP.NET Ajax控件实现的页面无刷新的简单实例 第13章 AjaxGridView Ajax化的GridView AjaxChartRoom ...
12 使用AJAX:使用AJAX实现Callback,去除了页面Form处存储的ViewState,减少了网页大小,加速了页面浏览速度;页面与服务器的交互不再使用PostBack,奥运旗舰版使用Callback方式与服务器交互;页面不再有垃圾内容,...
2. 还有一种就是用微软专门为Ajax开发的控件包,叫作ASP.NET AJAX Control Toolkit,这个我没太研究,网上有相关资料,想知道的可以自己去查,里面有很多现成的控件可以实现AJAX。 以上三种是我收集到的一些AJAX的...