BlogEngine学习二：基于ICallbackEventHandler的轻量级Ajax方式
在项目实践过程中，经常要使用Ajax的方式来处理数据，一般上如果使用js或者jQuery方式来处理，都是需要通过第三方页面来中转，才能达到效果的。当然了，微软本身也为我们提供了一个轻量级的Ajax回调接口：ICallbackEventHandler，通过这个接口，我们不需要通过第三方的中转页面来进行数据请求和处理，直接写到后台即可。下面来说明一下：
首先按照微软官方的说法是，这个接口用于指示控件可以作为服务器上的回调事件的目标。实现它必须要在页面上继承自本接口，然后实现接口中的两个方法：GetCallbackResult()方法和RaiseCallbackEvent()方法。其中前面一个方法主要是返回处理结果，而后面一个方法主要是处理传过来的数据。如何在页面上使用呢？
页面上的引用顺序可以解释如下
1、 在页面前端，需要注册
ClientScript.GetCallbackEventReference(this,"arg","rServer","context")脚本，其中，arg是需要向后台传送的参数，rServer是实现回调后需要处理的函数。Context可以暂时略过。
所以，在前台，一般都这么写：
//这里处理回调后的结果
}
function raiseEvent(arg, context)
{ //这里为arg添加参数
<%=ClientScript.GetCallbackEventReference(this,"arg","rServer","context") %>;
}
这样，注册完事件后，只需要调用raiseEvent()即可。
2、在页面后端，需要继承自ICallbackEventHandler接口，然后实现
RaiseCallbackEvent(string eventArgument)和GetCallbackResult()两个方法，其中前面一个主要是针对前台通过arg传来的参数，进行处理；后面一个主要是将结果返回。
页面调用的图例化调用流程如下：
光说不练，不如不干，下面以两个示例来说明其使用方法，第一个就是通过Ajax聊天室来说明，第二个就通过JQuery的TreeView控件来说明，首先是第一个：
基于ICallBackEventHandler接口的聊天室
首先看成功后的截图：
就是这个效果，具体代码如下：
首先是前台部分，我做了详细的注释：
function checkNick(){
var _val = $("#txtNick").val();
var _say=$("#txtSay").val();
if (_val == "") {
alert("昵称不能为空！");
return;
}
if(_say=="")
{
alert("发言不能为空！");
return;
}
}
function rServer(arg, context) {
/***********************************
这个是回调成功后的处理函数，相当于上面图片流程中的（4），注意，arg参数就是返回的内容
****************************/
$("#chartMain").html(arg);
}
function raiseEvent(arg, context) {
/***********************************
本函数主要是发起ajax请求，相当于上面图片流程中的（1），注意，arg参数
****************************/
checkNick();
arg=$("#txtNick").val()+"|"+$("#txtSay").val();
<%=ClientScript.GetCallbackEventReference(this,"arg","rServer","context") %>;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="chartMain"></div>
<div id="chartUser">
<ul>
<li>请输入昵称:</li>
<li><input id="txtNick" type="text" /></li>
<li>请发言：<input id="txtSay" type="text" /></li>
<li><input id="btnSay" type="button" value="请你发言" onclick="raiseEvent();" /></li></ul>
</div>
</form>
</body>
后台部分：
{
public static string str;
protected void Page_Load(object sender, EventArgs e)
{
}
/****************
* 这个就是将处理完成的结果返回到前台，相当于图片流程(3)中的秒速
* *********************/
public string GetCallbackResult()
{
return str;
}
/****************
* 这个就是处理的函数，接受前台传过来的arg参数的值，然后进行处理，相当于图片流程（2）所描述
* **********************/
public void RaiseCallbackEvent(string eventArgument)
{
if (!String.IsNullOrEmpty(eventArgument))
{
string[] _str = eventArgument.Split('|');
string sql = "Insert into ChartInfo values('"+_str[0]+"','"+_str[1]+"','"+DateTime.Now.ToString()+"')";
int flag = DB.Exec(sql);
string sql1 = " select * from (select top 10 * from ChartInfo order by ID desc) t order by ID asc ";
using (SqlConnection conn = DB.GetConn())
{
SqlCommand cmd = new SqlCommand(sql1,conn);
SqlDataReader sdr = cmd.ExecuteReader();
StringBuilder sbStr = new StringBuilder();
while (sdr.Read())
{
sbStr.Append("<br><font color='red'>" + sdr["ChartPerson"].ToString()
}
sdr.Close();
str = sbStr.ToString();
}
}
}
}
基于ICallBackEventHandler接口的大树（TreeView）
在实际项目中，treeview用的是很多的，不论是人员组织关系，还是系统节点显示。可以说TreeView是相当重要的一个控件，今天要介绍的就是利用回调接口实现的JQuery的TreeView，本TreeView是由博客园的假正经哥哥所写的，我这里直接拿来用。
本TreeView主要是采用JSON数据进行组织的，通过页面的节点层次形成了树形结构。在实际使用中，发现很好用，不敢独享，先看下结果：
首先，要说明的是树的形成方式，主要是通过后台取JSON数据组合而成，在页面开始加载的时候，通过页面的RaiseCallBack()方法去调用后台的处理方法。
前台：
$(document).ready(function() {
raiseEvent();
});
function rServer(arg, context) {
var o = { showcheck: true,onnodeclick:nav }; //显示checkbox，同时加上节点点击的单击事件：nav();
o.data = eval(arg);
$("#showTree").treeview(o); //绑定到树上
}
function raiseEvent(arg, context) {
<%=ClientScript.GetCallbackEventReference(this,"arg","rServer","context") %>;
}
function getValues()
{
var obj=$("#showTree");
var thstest=obj.getTSVs(); //本方法可以获取选取的节点的值
var count=obj[0].t.getSelectedNodes().length;
var val= obj[0].t.getSelectedNodes();
for(var i=0;i<count;i++)
{
alert(val[i].text+"-"+val[i].value); //可以获取选取的节点的值和文本
/*******************************************************************
当然一点，需要说明的是，如果想向上回溯，可以利用val.parent方法来进行一一查找即可
********************************************************************/
}
}
function nav(item)
{
$("#txtNode").val(item.text);
}
{
arg=item.text+"-"+item.value;
raiseEvent(arg,"");
}
</script>
后台：
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
/*******************************************************
* 基于ICallbackEventHandler的轻量级ajax回调方法
* 使用方式:首先页面需要继承自ICallbackEventHandler接口
* 然后页面必须实现RaiseCallbackEvent和GetCallbackResult
* 方法,其中注意的是,前面一个函数先被调用,用来接收从前台
* 传送来的数据,后面一个函数是将处理过的函数返回到前台
* ****************************************************/
public partial class _Default : System.Web.UI.Page,ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
}
public string jsonStr = string.Empty;
public string GetJson()
{
string json = "[";
IList<Tree> t = DB.returnParentTree();
foreach (Tree model in t)
{
if (model != t[t.Count - 1])
{
json += GetJsonByModel(model) + ",";
}
else
{
json += GetJsonByModel(model);
}
}
json += "]";
json = json.Replace("'", "\"");
return json;
}
public string GetJsonByModel(Tree t)
{
string json = "";
bool flag = DB.isHaveChild(t.ModuleID);
json = "{"
+ "'id':'" + t.ModuleID + "',"
+ "'text':'" + t.ModuleName + "',"
+ "'value':'" + t.ModuleID + "',"
+ "'showcheck':true,"
+ "'checkstate':'0',"
+ "'hasChildren':" + flag.ToString().ToLower() + ","
+ "'isexpand':false,"
+ "'ChildNodes':";
if (!flag)
{
json += "null,";
json += "'complete':false}";
}
else
{
json += "[";
IList<Tree> list = DB.getChild(t.ModuleID);
foreach (Tree tree in list)
{
if (tree != list[list.Count - 1])
{
json += GetJsonByModel(tree) + ",";
}
else
{
json += GetJsonByModel(tree);
}
}
json += "],'complete':true}";
}
return json;
}
public string GetCallbackResult()
{
return jsonStr;
}
public void RaiseCallbackEvent(string eventArgument)
{
jsonStr = GetJson();
}
}
终篇
好了，上面的就是不ICallBackEventHandler接口的一些使用方法，这里主要谈论方法，如果能够正确使用，相信会在项目中发挥出巨大作用的。
转载于:https://www.cnblogs.com/scy251147/archive/2011/04/05/2005813.html
BlogEngine学习二：基于ICallbackEventHandler的轻量级Ajax方式相关推荐
- [solidity语法学习二]基于Remix以太坊的BlindAuction模板代码分析
前言 编译环境:Remix. 代码来源:SolidityDoc. 疑难解决来源:Ethereum gitter. 例子三参考:例图. 以太币单位换算:以太币单位. 本文主要由三个例子构成.分别是Sim ...
- solr4.3纠错源码学习二——基于主索引
在用户传入搜索词queryString(例如:String queryString = "中国";)suggestionsNumber 推荐的最大数量后, 调用suggestSim ...
- Go学习(二十):启动HTTP服务的方式
1. 怎么启动Web服务? Go语言标准库内置的net/http包,可以实现HTTP服务端.实现HTTP服务端就是能够启动Web服务,相当于搭建起了一个Web服务器. http.ListenAndSe ...
- 初探强化学习(7)基于模型的强化学习的应用综述
本文是直接翻译一篇文章的,我先把原文地址放在这里. 原文名字为:Survey of Model-Based Reinforcement Learning: Applications on Roboti ...
- Thinking in AJAX(二) —— 基于AJAX的WEB设计
Thinking in AJAX(二) -- 基于AJAX的WEB设计 一.AJAX最值得称赞的是异步交互,而不是无刷新 很多人都看好AJAX无刷新的技术,以至于认同AJAX就是用来做无刷新的.这个认 ...
- 【深度学习】基于Pytorch进行深度神经网络计算(二)
[深度学习]基于Pytorch进行深度神经网络计算(二) 文章目录 1 延后初始化 2 Pytorch自定义层2.1 不带参数的层2.2 带参数的层 3 基于Pytorch存取文件 4 torch.n ...
- 【深度学习】基于Pytorch的卷积神经网络概念解析和API妙用(二)
[深度学习]基于Pytorch的卷积神经网络API妙用(二) 文章目录1 Padding和Stride 2 多输入多输出Channel 3 1*1 Conv(笔者在看教程时,理解为降维和升维) 4 池 ...
- 【深度学习】基于Pytorch多层感知机的高级API实现和注意力机制(二)
[深度学习]基于Pytorch多层感知机的高级API实现和注意力机制(二) 文章目录1 代码实现 2 训练误差和泛化误差 3 模型复杂性 4 多项式回归4.1 生成数据集4.2 对模型进行训练和测试4 ...
- 【深度学习】基于Pytorch的softmax回归问题辨析和应用(二)
[深度学习]基于Pytorch的softmax回归问题辨析和应用(二) 文章目录1 softmax回归的实现1.1 初始化模型参数1.2 Softmax的实现1.3 优化器1.4 训练 2 多分类问题 ...
- 【深度学习】基于Pytorch的线性模型概念辨析和实现(二)
[深度学习]基于Pytorch的线性模型概念辨析和实现(二) 文章目录 [深度学习]基于Pytorch的线性模型概念辨析和实现(二) 1 线性回归的从零开始实现 2 训练 3 关于with 4 关于w ...
最新文章
- FPGA中如何实现双边沿采样？
- 异常：fatal: unable to access 'https://git.oschina.net/pcmpcs/library.git/': Could not resolve host...
- ff7重制版青魔法_狂父重制版发布+妖精的尾巴首次打折￥244+最终幻想4解锁国区新增中文...
- 使用Canvas基于手势可以使树秋千
- vue3 main.js引入 axios_Vue3.0新特性探索
- 实现迭代服务器端和客户端
- python 2.7安装pandas失败
- 如何把一张图片做成一个好看的电脑图标
- Oracle优化新常态 前半生
- uni-app运行到微信小程序模拟器
- 华为云服务器价格表（CPU内存/磁盘/带宽收费标准）
- 5G学习笔记之RRC_IDLE/RRC_INACTIVE态UE功能概述
- 第一章 公共政策学的学科要素
- 『MongoDB』MongoDB的数据存储格式Bson比Json有哪些优势？
- Tomcat多实例Nginx负载均衡
- 由于使用计算机编制会计报表,《计算机会计学》1
- ★Kali信息收集★8.Nmap ：端口扫描
- MyBatis主键回填
- python量化交易策略实例_python量化交易策略入门（一）：MACD的威力
- 《教学设计》考试内容
热门文章
- android 的NDK在Windwos环境搭建（一）
- js pug 代码_网页模板pug基本语法
- Nginx源码分析 - 模块的赋值及编号 --- 方便了解nginx模块
- 广度搜索 -- 9.1 Word Ladder -- 求是否有解 -- 图解
- Linux系统编程 -- 可执行文件结构与进程在内存中的分布
- Jtopo Demo源码下载方式
- Springboot2.x 集成 jedis和spring-boot-starter-data-redis的性能测试比较（Jedis完胜：附带源码）
- c语言创建增加删除单向动态链表,C语言实现简单的单向链表（创建、插入、删除）及等效STL实现代码...
- 学51单片机需要专门把C语言学透吗
- layui 滚动加载与ajax,909422229_layUi关于ajax与loading问题