Asp.net使用JQuery弹出层加载数据代码

首先我们新建一个网站，在网站里面新增一般处理程序，命名为ReadData.ashx。然后在里面输入如下代码：复制代码代码如下：使用系统；使用系统。集合。通用；使用系统Linq .使用系统网络.使用系统。网络服务；使用系统数据。SqlClient//引入命名空间使用系统。数据；命名空间加载层{///summary///$ code before类名$的摘要说明////摘要[WebServiCe(NameSpace=' http://tempuri。org/')][WebServiceBinding(CONFOrmSTO=WSiprofiles .base cprofile 1 _ 1)])公共类ReadData : IHttpHandler { public void process request(HttpContext)上下文){//context .响应。内容类型='文本/纯文本；//上下文。回应。写('你好世界');//获取外部传进来的变量值i int i=Int32 .解析（上下文请求。查询字符串[' I '])；//连接数据库SqlConnection con=新的SqlConnection(“”数据源=。用户id=sapwd=5239898数据库=library database ')；con . Open()；sqldatadapter ada=new sqldatadapter('从读取器中选择*其中序号='' i ' ' '，con)；SqlCommandBuilder com=new SqlCommandBuilder(ada)；数据集ds=新数据集();艾达。填充(ds，‘reader’)；con . Close()；//读取表中栏位为"姓名"的字段值，并传出语境。回应。写。表[《朗读者》].行[0]['姓名'].ToString())；} public bool IsReuse { get { return false；} } } } 然后我们需要新建一个Java脚本语言文件，命名为loaddata.js。输入如下代码：复制代码代码如下： /*当数字正射影像图加载完毕之后就自动为两个链接添加点击事件*/$("文档")。ready(function(){ $(' a[href=JavaScript]).click(function(){ chk form()；返回false}) $('a[href=test]').单击(函数(){ $('#load ')).css('display '，' none ')；$('#mark ').css('display '，' none ')；返回false })})；var chkform=function(){ new Request({/*调用一般处理程序进行后台抓取数据并返回文本文件(文本文件)变量*/url: 'ReadData.ashx？i=' $('#Text1 ').attr('值'),/*抓取数据成功之后*/onSuccess:函数(txt) { $('#load ').追加(' P ' txt '/P ')；$('#load ').css('display '，' block ')；$('#mark ').css('display '，' block ')；}, /*正在抓取*/onRequest:函数(){ $('#load ').追加(' P正在加载/P’)；}, /*数据加载失败*/onFailure:函数(){ alert('信息加载失败！');} }).send()；} 还没完，我们还要新增一个半铸钢钢性铸铁(铸造半钢)文件，命名为main.css，深入如下样式：复制代码代码如下： #标记{宽度： 100%；背景-颜色：白色；位置：绝对；left: 0pxtop: 0px高度： 700像素；filter:alpha(不透明度=70);-moz-opa城336070；opacity:70z索引：2;display:none} # load {底色：灰色；border: 1px固体# 999;font-size : 12px位置：相对；margin :0 auto margin-top :100 px；宽度宽度：200像素高度：150 pxz索引：99;display:none}我们在网站的首页里面源码输入如下代码：复制代码代码如下： %@页面语言='C#' AutoEventWireup='true '代码隐藏='Default.aspx.cs' Inherits='加载层。_默认"%!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title加载层/title link type=' text/CSS ' href=' main。CSS ' rel='样式表'/脚本类型=' text/JAVAScript ' src=' http : ootools。js /脚本//记得引入这个爪哇岛描述语言库文件脚本类型=' text/JAVAScript ' src=' http : jquery-1。3 .1-vsdoc。js /脚本//VS支持智能提示的文件，可有可无脚本类型=' text/JAVAScript ' src=' http : jquery-1。3 .1 .js '/script//记得引入框架脚本类型=' text/JavaScript ' src=' http : load data。js /脚本/head body div id=' me ' a href=' JAVAScript '点击加载/a输入id='Text1 '类型=' text '/div div id=' load '加载a href='test '试试/a/div div id=' mark '/div/body/html至此完成了我们要的效果。效果图及演示一会放出

看，上面的链接和文本框处于“灰色”状态，无法编辑。点击中间弹出层的链接，返回初始状态。整个过程页面没有刷新！演示下载地址：http://xiaozai.jb51.net/200911/yuanma/ASP.net _ jquery _ jiazhaiing.rar。