当前位置: 首页 > news >正文

如何不用组件实现Ajax效果

现在.NET的Ajax组件确实不少了,微软的ajax extensions用起来很方便,一个UpdatePanel就可以搞定一切。不过,可能有些朋友更愿意自己来写。那么在.NET里,你是否知道ICallbackEventHandler呢?

大家应该都知道ASP.NET页面调用时的几种方式:Postback/Cross-page posting/Server transfer/Callback,如果你还不太了解,你可以看看MSDN:How t Determine How ASP.NET Web Pages Were Invoked

现在要说的,就是Callback这种调用方式。
简单的说,使用Callback可以得到你平常看到那么Ajax效果,即不刷新整个页面,只更新其中一个部分。

使用Callback,只需要做以下4步:

1、在你的页面中继承System.Web.UI.ICallbackEventHandler接口

public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
}
#region ICallbackEventHandler Members
public string GetCallbackResult()
{
}
public void RaiseCallbackEvent(string eventArgument)
{
}
#endregion
}

如果你没有使用code-behind,那你也可以在aspx页面顶部加入下面的代码:

<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>

2、在前台写一段自定义的javascript,更新页面

这一段javascript用来更新页面的某个局部,就像你平常操作的一样,写些document.getElementById("xxx").innerHTML="working on your request...."。

<script type="text/javascript">
function GetFlag(arg)//这里已经得到服务器端数据据了,服务器端数据就在这个参数arg里。
{
document.getElementById("result").innerHTML=arg;//我们不作处理,直接显示在页面上。
}
</script>

你可能有些迷糊,就得到了吗?连个什么XMLHttpRequest都没有哩……

3、在Page_Load中再注册一段javascript

string script = Page.ClientScript.GetCallbackEventReference(this, "arg", "GetFlag", "");
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), .......//省略了一大串

上面的GetCallbackEventReference是用来得到客户端函数的引用,发起一个callback到服务器端的,你不必知道详细内容。

你只需要了解:

  • 第一个参数填this,用来handle客户端的callback的,它必须继承ICallbackEventHandler接口并提供RaiseCallbackEvent方法,我们已经在继承了这个接口,上面第一点中的代码也有RaiseCallbackEvent方法,只是还没有具体写内容呢。
  • 第二个参数就是那个 从客户端传到服务器端的参数。如果你想要注册的检查用户是否可用,那么这里的值就是用户输的那个值。
  • 第三个参数是前台的javascript函数名,在第二步中我们写的名字是:GetFlag。当数据好了,这个javascript函数就会用到。
  • 第四个参数一般用不上。

返回值:一个函数的名字,是客户端调用的函数名。这个函数会调用到服务器端了。

4、调用你的函数。

<input type="button" value="check it!" onclick="callServer()" />

上面一定是 onclick="callServer()"吗?呵呵,这要看你了,你在Page.ClientScript.RegisterClientScriptBlock注册的什么javascript函数名字,就是什么名字了。(在第3步的第二行code中)

已经完了。如果你还是一头雾水,没关系,下面看一个实例

我们写一个检测用户是否已经注册的小程序,这在每个用户注册页面上都可以用到。

前台Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableViewState="false" %>
<!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>ICallbackEventHandler Demo</title>
<style type="text/css">
*{font: 12px "verdana";}
#user{border:1px solid #080; height:50px;width:500px;padding:20px;}
input{border:1px solid #508FCC;background:#FFF;}
.ok{color:#090;}
.bad{color:#F00}
#result{display:inline;margin: 0 5px 0;}
</style>
<script type="text/javascript">
function GetFlag(arg)//这里的javascript函数就是服务器查询完成要调用的函数,我们把服务器返回的数据直接显示上ID为result的div中。
{
document.getElementById("result").innerHTML=arg;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="user">
<input type="text" value="99love" maxlength="10" id="userid" />
<input type="button" value="check it!" onclick="callServer()" /><div id="result">查询用户是否被使用。</div>
</div>
</form>
</body>
</html>

上面有一个<input type="button" value="check it!" onclick="callServer()" />,这是我说的第5步的内容,这个函数名字callServer应该和Lage_Load中注册的相对应的。

后台Default.aspx.cs:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
private string _arg = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
string script = Page.ClientScript.GetCallbackEventReference(this, "arg", "GetFlag", "");//上面的第3步,取得这个客户端函数名,script的值可能是这样的:WebForm_DoCallback('__Page',arg,GetFlag,/"/",null,false)
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "callServer", "/nfunction callServer(){/ndocument.getElementById(/"result/").innerHTML=/"正在检查 /"+document.getElementById(/"userid/").value+/" 的可用性,请稍候.../";/nvar arg=document.getElementById(/"userid/").value;/n" + script + ";/n}", true);
//上面这一行有点长了,第二个参数最长,看到function callServer()了吗,这就是和前台对应的那个函数名<input onclick=XXX,请记得,一定要在callServer函数中加入script的值,也就是上一行的上一行(17行)那个值。注意后面的var arg=...,这个arg和17行的arg是对应的。
}
#region ICallbackEventHandler Members
public string GetCallbackResult()
{
System.Threading.Thread.Sleep(1000);//让线程睡一会,我们好看效果。这是用来模拟不良网络状况的。
return _arg;//返回一个string型,这个string在RaiseCallbackEvent函数中是赋过值的,看下面哦。
}
public void RaiseCallbackEvent(string eventArgument)
{
if (eventArgument.Equals("99love") || eventArgument.Equals("blueidea"))//假设这两个名字不能注册,实际操作中,你要是比对数据库记录的,我们现在简化处理了。
_arg = string.Format("<span class=/"bad/">很遗憾,{0} 已被使用。</span>", eventArgument);//要么已经注册了
else
_arg = string.Format("<span class=/"ok/">恭喜您,{0} 可以注册。</span>", eventArgument);//要么就可以注册
}
#endregion
}

相关文章:

  • SQL Server中关于基数估计如何计算预估行数的一些探讨
  • NodeJS安装第一个工程.
  • 丢失了'LINQ to SQL类’模板怎么办?
  • Linq O/R设计器的使用
  • 【linux】之内核升级
  • Tomcat端口被占用解决方法
  • SQL Server 不能创建数据库了,发生错误:1807 未能获得数据库 'model' 上的排它锁。请稍后重试操作。...
  • Linux中如何配置sudo用户
  • Drop it(去除元素)
  • 杂记
  • 在DataGridView_DragDrop事件中,确定DataGridView的单元格的位置
  • 对一个表中所有列数据模糊查询adoquery
  • EntityFramework [1]
  • SQLServer查询所有子节点
  • [转]Entity Framework 学习初级篇7--基本操作:增加、更新、删除、事务
  • 【前端学习】-粗谈选择器
  • Bytom交易说明(账户管理模式)
  • CentOS从零开始部署Nodejs项目
  • gf框架之分页模块(五) - 自定义分页
  • java小心机(3)| 浅析finalize()
  • Js基础——数据类型之Null和Undefined
  • Koa2 之文件上传下载
  • Leetcode 27 Remove Element
  • REST架构的思考
  • Spring Cloud中负载均衡器概览
  • Unix命令
  • Vue 2.3、2.4 知识点小结
  • vue.js框架原理浅析
  • 道格拉斯-普克 抽稀算法 附javascript实现
  • 汉诺塔算法
  • 模仿 Go Sort 排序接口实现的自定义排序
  • 消息队列系列二(IOT中消息队列的应用)
  • 要让cordova项目适配iphoneX + ios11.4,总共要几步?三步
  • 用Canvas画一棵二叉树
  • ​LeetCode解法汇总518. 零钱兑换 II
  • # Pytorch 中可以直接调用的Loss Functions总结:
  • # Swust 12th acm 邀请赛# [ E ] 01 String [题解]
  • #Linux(Source Insight安装及工程建立)
  • #调用传感器数据_Flink使用函数之监控传感器温度上升提醒
  • #我与虚拟机的故事#连载20:周志明虚拟机第 3 版:到底值不值得买?
  • (12)Hive调优——count distinct去重优化
  • (5)STL算法之复制
  • (转)Groupon前传:从10个月的失败作品修改,1个月找到成功
  • (转)jQuery 基础
  • (转载)(官方)UE4--图像编程----着色器开发
  • ****Linux下Mysql的安装和配置
  • *Algs4-1.5.25随机网格的倍率测试-(未读懂题)
  • .NET(C#、VB)APP开发——Smobiler平台控件介绍:Bluetooth组件
  • .NET中GET与SET的用法
  • ;号自动换行
  • @DependsOn:解析 Spring 中的依赖关系之艺术
  • [ 常用工具篇 ] POC-bomber 漏洞检测工具安装及使用详解
  • [1181]linux两台服务器之间传输文件和文件夹
  • [2017][note]基于空间交叉相位调制的两个连续波在few layer铋Bi中的全光switch——
  • [ActionScript][AS3]小小笔记