如何创建一个客户端回调:js获得服务端的内容?
答案:表面上看去就是前端的js调用服务的C#方法,本质就是ajax,通过XMLHttpRequest对象和服务端进行交互。回调:就说回过头来调用,按理说js是一种脚本语言,怎么能用来调用服务端的呢?就是通过XMLHttpRequest实现的。
下面说一些具体的操作步骤
1.页面继承接口System.Web.UI.ICallbackEventHandler
//继承接口使得:该页面可以作为服务器上的回调事件的目录
2.定义前端代码如下
<div>
请输入信息:
<input type="text" id="txtEnter" />
<br />
<span id="lblShow"></span>
<br />
<input id="btnSubmit" type="button" value="提交1" onclick="CallServer()" />
</div>
3.定义脚本
function CallServer() {
//获取一个DOM对象
var inputcontrol = document.getElementById("txtEnter");
var lab = document.getElementById("lblShow");
//设置回调还没有处理完全时其预先加载的显示值
lab.innerHTML = "加载中......";
//为你在文本框中输入的信息,并且arg在这里就是将其值传递到
//RaiseCallbackEvent(String eventArgument)方法对应的eventArgument中
arg = inputcontrol.value;
//获取一个对客户端函数的引用;调用该函数时,将启动一个对服务器端事件的客户端回调。
UserCallback(arg, lab);
/*
arg参数:表示发送的参数值;
//context:表示一个用来接收处理数据的一个东西
*/
}
//result 服务端返回的数据 ;context;指的是lab对象
function ReceiveServerData(result, context) {
context.innerHTML = result;
// context指的就是lab,可不可以是一个函数呢?
}
4.后端代码如下
//1.获取一个对客户端函数的引用;调用该函数时,将启动一个对服务器事件的客户端回调
string cbref = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
//2.定义函数体,这个函数返回给前台调用
string cbjs = "function UserCallback(arg,context){" + cbref + ";" + "}";
//3.这一步关键:需要注册一个和前台同名的函数 要注册的启动脚本的类型 脚本的键
Page.ClientScript.RegisterStartupScript(this.GetType(), "UserCallback", cbjs, true);
代码下载:http://files.cnblogs.com/Sky-cloudless/DemoCallback.zip
如何创建一个客户端回调:js获得服务端的内容?的更多相关文章
- socket小程序写一个客户端,实现给服务端发送hello World字符串,将客户端发送的数据变成大写后返回
写一个客户端,实现给服务端发送hello World字符串,将客户端发送的数据变成大写后返回 本机id是192.168.xx.xy 服务端 import socket soc = socket.soc ...
- Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...
- MVC文件上传09-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹,并在其中创建分类子文件夹
为用户创建专属上传文件夹后,如果想在其中再创建分类子文件夹,该怎么做?可以在提交文件的视图中再添加一个隐藏域,并设置 name="uploadContext". 相关兄弟篇: MV ...
- MVC文件上传06-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义控制器上传多个文件
当需要在控制器中处理除了文件的其他表单字段,执行控制器独有的业务逻辑......等等,这时候我们可以自定义控制器. MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证 ...
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 ...
- Watcher详解 工作机制, Watcher客户端注册、Watcher 服务端注册
Watcher详解.接口 在 ZooKeeper 中, 接口类 Watcher 用于表示一个标注你的事件处理器,其定义了事件通知相关的逻辑,包含 KeeperState 和 EventType 两个枚 ...
- 客户端技术:Cookie 服务端技术:HttpSession
客户端技术:Cookie 服务端技术:HttpSession 07. 五 / android基础 / 没有评论 一.会话技术1.什么是会话:客户打开浏览器访问一个网站,访问完毕之后,关闭浏览器.这 ...
- MVC文件上传08-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹
当需要为每个用户建立一个专属上传文件夹的时候,可以在提交文件的视图中添加一个隐藏域,并设置name="objectContext". 相关兄弟篇: MVC文件上传01-使用jque ...
- MVC文件上传07-使用客户端jQuery-File-Upload插件和服务端Backload组件裁剪上传图片
本篇通过在配置文件中设置,对上传图片修剪后保存到指定文件夹. 相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 MVC文件上传02-使用HttpPostedFileB ...
随机推荐
- 查看perl及其模块
Perl本身自带了很丰富的文档,如果把它们都打印出来,恐怕要耗费大量纸墨.我们试图清点过,但数到2000页左右的时候就数不清了(不用担心,我们用虚拟打印机计算页面数量,这样不会对树木造成威胁,挺环保的 ...
- kakfa的常用命令总结
Kafka的版本间差异较大,下面是0.8.2.1的操作方法 首先cd到kafaka的bin目录下; #step1启动zookeeper服务 nohup bin/zookeeper-server-s ...
- git学习笔记06-创建分支合并分支-比svn快多了,因为只有指针在改变
一开始git只有一条时间线,这个分支叫主分支,即master分支. HEAD严格来说不是指向提交,而是指向master,master才是指向提交的,所以,HEAD指向的就是当前分支. 每次提交,mas ...
- jquery的隐式类型转换
jquery的选择器想用变量来传,然后就纠结怎么写引号的问题??? 当时脑子就犯轴了,这个我要是传变量怎么写引号啊,我要是在最外层在加一层引号就不对了,就没法识别变量了,不加反而对了 那就用conso ...
- CSS中应用position的absolute和relative的属性制作浮动层
我的浮动层结构大概如下: <div id="father"> <div id="son"> </div> </div& ...
- angularjs探秘<一>
首先聊聊angularjs是啥. 首先AngularJS 是一个 JavaScript 框架.(PS:其实就是外部引用的js文件) 所以AngularJS的使用依然是外部引用js文件. 附上引用地址 ...
- Linux的中断 & 中断和异常的区别
参考 http://www.yesky.com/20010813/192117.shtml 结构化程序设计思想认为:程序 = 数据结构 + 算法.数据结构体现了整个系统的构架,所以数据结构通常都是代码 ...
- hdu 5476 Explore Track of Point(2015上海网络赛)
题目链接:hdu 5476 今天和队友们搞出3道水题后就一直卡在这儿了,唉,真惨啊……看着被一名一名地挤出晋级名次,确实很不好受,这道恶心的几何题被我们3个搞了3.4个小时,我想到一半时发现样例输出是 ...
- golang执行linux命令
golang exec 执行系统命令 golang 2014-09-25 13:17:44 2779 0 0 exec.Command() 最简单的方法: cmd := exe ...
- [html] 前端角度出发做好SEO需要考虑什么
Meta标签优化 主要包括主题(Title),网站描述(Description),和关键词(Keywords).还有一些其它的隐藏文字比如Author(作者),Category(目录),Languag ...