asp.net ajax客户端编程+jquery:实现泛型数据的客户端数据调用、添加、删除-xxlinux.com




┊linux社区┊ 爱心援助 ┊ Linux认证┊系列教程 ┊ 业界动态┊ 站务新闻 ┊ 公司招聘┊网络学院┊网址大全 ┊LPI专题┊ CISCO专题

设为首页

加入收藏

管理团队

联盟首页	入门区	安装配置	使用技巧	桌面应用	开发区	WEB开发	数据库	内核研究	SHELL	软件开发
软件下载	网络区	服务器	网络应用	网络安全	UNIX区	UNIX入门	UNIX提高	C专题	JAVA专题	嵌入应用
开发语言	PHP	JSP	ASP	ASP.NET	JAVA	C/C++/C#	PERL	JavaScript	Basic	Delphi

		您的位置：首页 > 开发语言 > asp.net >

栏目导栏

php

JSP

ASP

asp.net

JAVA

c/c++/c#

perl

JavaScript

Basic

Delphi

资料搜索

最新文章

·Ajax Control Toolkit Animati

·讨论一下类似BlogEngine内一次

·使用CSS+SiteMap+UserControl+

·Asp.net中多彩下拉框的实现

·浅谈ASP.NET的Postback

·分清ASP.NET AJAX中的Extender

·Tip：在使用AjaxControlTookit

·有关注册DataItem的一些可能被

·IIRF(Ionic's Isapi Rewrite

asp.net ajax客户端编程+jquery:实现泛型数据的客户端数据调用、添加、删除

[ 作者: 加入时间:2007-12-13 15:50:59 来自:Linux联盟收集整理 ]

	学asp.net ajax客户端编程有一段时间了，决定押空把这段时间学的作一个总结。个人认为asp.net ajax是众多ajax框架中功能最强大，也是最完善的（呵呵：究竟也是微软公司的产品嘛）。并且在客户端的许多编程风格经过微软公司对javascrpt的扩展后，很像asp.net编程风格：（关于asp.net ajax对javascript的扩展文档请参照，Dflying大大的文章：http://www.cnblogs.com/dflying/archive/2007/02/09/639638.html。) mBvLinux联盟 mBvLinux联盟个人认为最好用的几个扩展： mBvLinux联盟 mBvLinux联盟 var cityList=new Sys.StringBuilder(""); //具体功能类似asp.net的StringBuilder:在字符串的连接中可提高速度 mBvLinux联盟 mBvLinux联盟 for(var i=0;i<result.length;i++) mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 //String.formate:它在asp.net中大家应该常用它吧，用在客户端编程也超爽。 mBvLinux联盟 mBvLinux联盟 var tabRow=String.format("<div class='row' id='lb{0}'><label>{0}:</label>{1} <a href='javascript:void(0)' onclick='onDel({0})'>Del</a></div>",result[i].ClassID,result[i].ClassName); mBvLinux联盟 mBvLinux联盟 cityList.append(tabRow); mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟还有很多扩展，及其javascript面向对象编程，都是挺有意思的。 mBvLinux联盟 mBvLinux联盟需要微软对javascript作了大量的扩展，但个人认为易用性还是不够，所以我在使用的时时候，客户端编程大多还是用Jquery去做,至于jquery库我就没啥资资格说了。 mBvLinux联盟 mBvLinux联盟转入正题：下面是我用asp.net ajax客户端编程结合jquery实现泛型数据的客户端调用，数据的添加和删除操作。 mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 mBvLinux联盟第一步：相关环境配置： mBvLinux联盟 mBvLinux联盟 (一)、Web.config配置(后边提供一个完整的供下载) mBvLinux联盟 mBvLinux联盟 (二)、页面上一的一些配置 mBvLinux联盟 mBvLinux联盟 <asp:ScriptManager ID="ScriptManager1" runat="server"> mBvLinux联盟 mBvLinux联盟 <Scripts> mBvLinux联盟 mBvLinux联盟 <asp:ScriptReference Path="AjaxScript/CityList.js" /> mBvLinux联盟 mBvLinux联盟 </Scripts> mBvLinux联盟 mBvLinux联盟 <Services> mBvLinux联盟 mBvLinux联盟 <asp:ServiceReference Path="service/CityService.asmx" /> mBvLinux联盟 mBvLinux联盟 </Services> mBvLinux联盟 mBvLinux联盟 </asp:ScriptManager> mBvLinux联盟 mBvLinux联盟 ScriptManager的声明重要性不说了，一名话：你要用asp.net ajax编程就不能没有这主。<scripts>:调用js文件;<Services>:调用web services文件, mBvLinux联盟 mBvLinux联盟我是把客户端的代码是写在CityList.js文件中的，而ajax调用的服务端程序是放在：CityService.asmx里的.当然页面上还有:<script type="text/javascript" src="scripts/jquery.js"></script> jquery的调用. mBvLinux联盟 mBvLinux联盟下面是:CityList.js完整程序： mBvLinux联盟 mBvLinux联盟第二步：JS文件 mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 // JScript 文件 mBvLinux联盟 mBvLinux联盟 var cityClass=new Object(); //定义对象，添加时使用,这个在asp.net中相当于定义了一个实体。 mBvLinux联盟 mBvLinux联盟 // 页面加载处理 mBvLinux联盟 mBvLinux联盟 $(document).ready(function() { mBvLinux联盟 mBvLinux联盟 hiddeProgress();//隐藏加载动画的div mBvLinux联盟 mBvLinux联盟 showCityList();//实现数据的调用 mBvLinux联盟 mBvLinux联盟 }); mBvLinux联盟 mBvLinux联盟 // (公用函数)显示加载进程 mBvLinux联盟 mBvLinux联盟 var showProgress=function() mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 $("#progress").fadeIn("fast"); mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 // (公用函数)隐藏加载进程 mBvLinux联盟 mBvLinux联盟 var hiddeProgress=function() mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 $("#progress").hide(); mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 //显示列表：显示调用 mBvLinux联盟 mBvLinux联盟 var showCityList=function() mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 showProgress(); mBvLinux联盟 mBvLinux联盟 CityService.CityList(onSuccees); //调用web service中的过程,其中CityService是类名,CityList是函数,返回调用成功处理函数是onSuccees mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 //显示列表明：处理显示结果 mBvLinux联盟 mBvLinux联盟 var onSuccees=function(result) mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 hiddeProgress(); mBvLinux联盟 mBvLinux联盟 var cityList=new Sys.StringBuilder(""); mBvLinux联盟 mBvLinux联盟 for(var i=0;i<result.length;i++) //通过循环直接调用泛型数据记录集，太牛了 mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 var tabRow=String.format("<div class='row' id='lb{0}'><label>{0}:</label>{1} <a href='javascript:void(0)' onclick='onDel({0})'>Del</a></div>",result[i].ClassID,result[i].ClassName); //这里就是String.format取数据的格式 mBvLinux联盟 mBvLinux联盟 cityList.append(tabRow); mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 $("#divList").html(cityList.toString()); //注意：如果用StringBuilder定义来接收数据的话，最后显示的时候一定要转换在字符串 mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 //添加:函数调用 mBvLinux联盟 mBvLinux联盟 var onCityAdd=function() mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 showProgress(); mBvLinux联盟 mBvLinux联盟 //为对象定义属性并赋值 mBvLinux联盟 mBvLinux联盟 cityClass.ClassID=11; mBvLinux联盟 mBvLinux联盟 cityClass.ClassName=$("#CityName").val(); mBvLinux联盟 mBvLinux联盟 CityService.AddCity(cityClass,onaddSuccees) //将这个对象直接传递到web service去处理，这也是我感到惊叹的地方 mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 //添加：处理添加返回结果(添加后显示添加的效果：注意，这里是取客户端的数据添加到列表中，没有读取数据库中的数据，这样做是有好处理的：速度) mBvLinux联盟 mBvLinux联盟 var onaddSuccees=function(result) mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 hiddeProgress(); mBvLinux联盟 mBvLinux联盟 //向数据列表中添加一列 mBvLinux联盟 mBvLinux联盟 var tabRow=String.format("<div class='row' id='lb{0}'><label>{0}:</label>{1} <a href='javascript:void(0)' onclick='onDelMessage({0})'>Del</a></div>",result,$("#CityName").val()); mBvLinux联盟 mBvLinux联盟 $("#divList").append(tabRow); //将数据添加到末尾 mBvLinux联盟 mBvLinux联盟 $("#result").html("添加成功，添加的ID值为:"+result); mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 //删除：删除提示 mBvLinux联盟 mBvLinux联盟 var onDelMessage=function(ClassID) mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 if(confirm("你真的要删除此记录吗?")==true) mBvLinux联盟 mBvLinux联盟 onDel(ClassID); mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 //删除:删除调用 mBvLinux联盟 mBvLinux联盟 var onDel=function(ClassID) mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 //注意这里显示了返回结果的全部参数(?)，onDelSuccees:调用成功后的处理函数，onDelFailed:调用错误的处理函数 :ClassID:上下文(这个是传参数及其它) mBvLinux联盟 mBvLinux联盟 CityService.CityClassDel(ClassID,onDelSuccees,onDelFailed,ClassID); mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 //删除：删除调用处理 mBvLinux联盟 mBvLinux联盟 var onDelSuccees=function(result,context) mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 if(result>0) mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 $("#lb"+context).fadeOut("fast"); mBvLinux联盟 mBvLinux联盟 $("#result").html("成功删除了,ID为"+context+"的记录."); mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 else mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 $("#result").html("删除失败！"); mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 //删除：错误处理 mBvLinux联盟 mBvLinux联盟 var onDelFailed=function() mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 mBvLinux联盟第三步：服务器端程序 mBvLinux联盟 mBvLinux联盟这个好办了，大多数都挺简单的:(以下注明红色请大家注意了) mBvLinux联盟 mBvLinux联盟 <%@ WebService Language="C#" Class="CityService" %> mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 using System; mBvLinux联盟 mBvLinux联盟 using System.Web; mBvLinux联盟 mBvLinux联盟 using System.Collections.Generic; mBvLinux联盟 mBvLinux联盟 using System.Web.Services; mBvLinux联盟 mBvLinux联盟 using System.Web.Services.Protocols; mBvLinux联盟 mBvLinux联盟 using System.Web.Script.Services; mBvLinux联盟 mBvLinux联盟 using Test.Model; mBvLinux联盟 mBvLinux联盟 using Test.BLL; mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 [WebService(Namespace = "http://tempuri.org/")] mBvLinux联盟 mBvLinux联盟 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] mBvLinux联盟 mBvLinux联盟 [GenerateScriptType(typeof(Test.Model.CityClassEntity))] //注意这个地方必面声明数据类型 mBvLinux联盟 mBvLinux联盟 [ScriptService] mBvLinux联盟 mBvLinux联盟 public class CityService : System.Web.Services.WebService { mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 /// <summary> mBvLinux联盟 mBvLinux联盟 /// 添加 mBvLinux联盟 mBvLinux联盟 /// </summary> mBvLinux联盟 mBvLinux联盟 /// <param name="model"></param> mBvLinux联盟 mBvLinux联盟 /// <returns></returns> mBvLinux联盟 mBvLinux联盟 [WebMethod] mBvLinux联盟 mBvLinux联盟 public int AddCity(CityClassEntity model) mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 return CityClassBLLBase.Create_CityClassInsert(model); mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 /// <summary> mBvLinux联盟 mBvLinux联盟 /// 显示列表 mBvLinux联盟 mBvLinux联盟 /// </summary> mBvLinux联盟 mBvLinux联盟 /// <returns>泛型数据</returns> mBvLinux联盟 mBvLinux联盟 [WebMethod] mBvLinux联盟 mBvLinux联盟 public IList<CityClassEntity> CityList() mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 return CityClassBLLBase.Get_CityClassAll(); mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 /// <summary> mBvLinux联盟 mBvLinux联盟 /// 删除 mBvLinux联盟 mBvLinux联盟 /// </summary> mBvLinux联盟 mBvLinux联盟 /// <param name="ClassID"></param> mBvLinux联盟 mBvLinux联盟 /// <returns></returns> mBvLinux联盟 mBvLinux联盟 [WebMethod] mBvLinux联盟 mBvLinux联盟 public int CityClassDel(int ClassID) mBvLinux联盟 mBvLinux联盟 { mBvLinux联盟 mBvLinux联盟 return CityClassBLLBase.Create_CityClassDelete(ClassID); mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 mBvLinux联盟 } mBvLinux联盟 Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论

【评论】【加入收藏夹】【大中小】【打印】【关闭】

※ 相关链接

·Asp.net Ajax 1.0 异步回调时,服务器端Render原理 (2007-11-30 13:27:11)

·asp.net ajax 使用updatepanel进行更新后的提示 (2007-11-20 15:20:28)

·Asp.net Ajax 1.0 异步回调时,服务器端Render原理1 (2007-11-20 15:19:45)

·ASP.NET AJAX 客户端生命周期事件3 (2007-11-12 16:44:09)

·ASP.NET AJAX 客户端生命周期事件2 (2007-11-12 16:41:31)

·ASP.NET AJAX 客户端生命周期事件1 (2007-11-12 16:40:37)

·让 SortTable 和 Asp.net Ajax 和睦相处 (2007-10-26 13:21:44)

·Jimmy’s 使用Asp.Net Ajax 构建三层式Web 应用程序 (2007-10-26 13:14:20)

·理想的 ASP.NET AJAX完全版 (2007-10-26 12:07:39)



	© CopyRight 2006-2009 xxlinux.com.Inc All Rights Reserved
	Powered by xxlinux.com