asp.net ajax客户端编程+jquery:实现泛型数据的客户端数据调用、添加、删除
点击次数：19 次 发布日期：2008-11-26 10:33:40 作者：源代码网
|
源代码网推荐 学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。) 源代码网推荐 源代码网推荐 个人认为最好用的几个扩展： 源代码网推荐 源代码网推荐 var cityList=new Sys.StringBuilder(""); //具体功能类似asp.net的StringBuilder:在字符串的连接中可提高速度 源代码网推荐 源代码网推荐 for(var i=0;i<result.length;i++) 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 //String.formate:它在asp.net中大家应该常用它吧，用在客户端编程也超爽。 源代码网推荐 源代码网推荐 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); 源代码网推荐 源代码网推荐 cityList.append(tabRow); 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 还有很多扩展，及其javascript面向对象编程，都是挺有意思的。 源代码网推荐 源代码网推荐 需要微软对javascript作了大量的扩展，但个人认为易用性还是不够，所以我在使用的时时候，客户端编程大多还是用Jquery去做,至于jquery库我就没啥资资格说了。 源代码网推荐 源代码网推荐 转入正题：下面是我用asp.net ajax客户端编程结合jquery实现泛型数据的客户端调用，数据的添加和删除操作。 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 第一步：相关环境配置： 源代码网推荐 源代码网推荐 (一)、Web.config配置(后边提供一个完整的供下载) 源代码网推荐 源代码网推荐 (二)、页面上一的一些配置 源代码网推荐 源代码网推荐 <asp:ScriptManager ID="ScriptManager1" runat="server"> 源代码网推荐 源代码网推荐 <Scripts> 源代码网推荐 源代码网推荐 <asp:ScriptReference Path="AjaxScript/CityList.js" /> 源代码网推荐 源代码网推荐 </Scripts> 源代码网推荐 源代码网推荐 <Services> 源代码网推荐 源代码网推荐 <asp:ServiceReference Path="service/CityService.asmx" /> 源代码网推荐 源代码网推荐 </Services> 源代码网推荐 源代码网推荐 </asp:ScriptManager> 源代码网推荐 源代码网推荐 ScriptManager的声明重要性不说了，一名话：你要用asp.net ajax编程就不能没有这主。<scripts>:调用js文件;<Services>:调用web services文件, 源代码网推荐 源代码网推荐 我是把客户端的代码是写在CityList.js文件中的，而ajax调用的服务端程序是放在：CityService.asmx里的.当然页面上还有:<script type="text/javascript" src="http://www.zzchn.com/edu/20080727/scripts/jquery.js"></script> jquery的调用. 源代码网推荐 源代码网推荐 下面是:CityList.js完整程序： 源代码网推荐 源代码网推荐 第二步：JS文件 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 // JScript 文件 源代码网推荐 源代码网推荐 var cityClass=new Object(); //定义对象，添加时使用,这个在asp.net中相当于定义了一个实体。 源代码网推荐 源代码网推荐 // 页面加载处理 源代码网推荐 源代码网推荐 $(document).ready(function() { 源代码网推荐 源代码网推荐 hiddeProgress();//隐藏加载动画的div 源代码网推荐 源代码网推荐 showCityList();//实现数据的调用 源代码网推荐 源代码网推荐 }); 源代码网推荐 源代码网推荐 // (公用函数)显示加载进程 源代码网推荐 源代码网推荐 var showProgress=function() 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 $("#progress").fadeIn("fast"); 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 // (公用函数)隐藏加载进程 源代码网推荐 源代码网推荐 var hiddeProgress=function() 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 $("#progress").hide(); 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 //显示列表：显示调用 源代码网推荐 源代码网推荐 var showCityList=function() 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 showProgress(); 源代码网推荐 源代码网推荐 CityService.CityList(onSuccees); //调用web service中的过程,其中CityService是类名,CityList是函数,返回调用成功处理函数是onSuccees 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 //显示列表明：处理显示结果 源代码网推荐 源代码网推荐 var onSuccees=function(result) 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 hiddeProgress(); 源代码网推荐 源代码网推荐 var cityList=new Sys.StringBuilder(""); 源代码网推荐 源代码网推荐 for(var i=0;i<result.length;i++) //通过循环直接调用泛型数据记录集，太牛了 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 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取数据的格式 源代码网推荐 源代码网推荐 cityList.append(tabRow); 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 $("#divList").html(cityList.toString()); //注意：如果用StringBuilder定义来接收数据的话，最后显示的时候一定要转换在字符串 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 //添加:函数调用 源代码网推荐 源代码网推荐 var onCityAdd=function() 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 showProgress(); 源代码网推荐 源代码网推荐 //为对象定义属性并赋值 源代码网推荐 源代码网推荐 cityClass.ClassID=11; 源代码网推荐 源代码网推荐 cityClass.ClassName=$("#CityName").val(); 源代码网推荐 源代码网推荐 CityService.AddCity(cityClass,onaddSuccees) //将这个对象直接传递到web service去处理，这也是我感到惊叹的地方 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 //添加：处理添加返回结果(添加后显示添加的效果：注意，这里是取客户端的数据添加到列表中，没有读取数据库中的数据，这样做是有好处理的：速度) 源代码网推荐 源代码网推荐 var onaddSuccees=function(result) 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 hiddeProgress(); 源代码网推荐 源代码网推荐 //向数据列表中添加一列 源代码网推荐 源代码网推荐 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()); 源代码网推荐 源代码网推荐 $("#divList").append(tabRow); //将数据添加到末尾 源代码网推荐 源代码网推荐 $("#result").html("添加成功，添加的ID值为:"+result); 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 //删除：删除提示 源代码网推荐 源代码网推荐 var onDelMessage=function(ClassID) 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 if(confirm("你真的要删除此记录吗?")==true) 源代码网推荐 源代码网推荐 onDel(ClassID); 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 //删除:删除调用 源代码网推荐 源代码网推荐 var onDel=function(ClassID) 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 //注意这里显示了返回结果的全部参数(?)，onDelSuccees:调用成功后的处理函数，onDelFailed:调用错误的处理函数 :ClassID:上下文(这个是传参数及其它) 源代码网推荐 源代码网推荐 CityService.CityClassDel(ClassID,onDelSuccees,onDelFailed,ClassID); 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 //删除：删除调用处理 源代码网推荐 源代码网推荐 var onDelSuccees=function(result,context) 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 if(result>0) 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 $("#lb"+context).fadeOut("fast"); 源代码网推荐 源代码网推荐 $("#result").html("成功删除了,ID为"+context+"的记录."); 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 else 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 $("#result").html("删除失败！"); 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 //删除：错误处理 源代码网推荐 源代码网推荐 var onDelFailed=function() 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 第三步：服务器端程序 源代码网推荐 源代码网推荐 这个好办了，大多数都挺简单的:(以下注明红色请大家注意了) 源代码网推荐 源代码网推荐 <%@ WebService Language="C#" Class="CityService" %> 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 using System; 源代码网推荐 源代码网推荐 using System.Web; 源代码网推荐 源代码网推荐 using System.Collections.Generic; 源代码网推荐 源代码网推荐 using System.Web.Services; 源代码网推荐 源代码网推荐 using System.Web.Services.Protocols; 源代码网推荐 源代码网推荐 using System.Web.Script.Services; 源代码网推荐 源代码网推荐 using Test.Model; 源代码网推荐 源代码网推荐 using Test.BLL; 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 [WebService(Namespace = "http://tempuri.org/")] 源代码网推荐 源代码网推荐 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 源代码网推荐 源代码网推荐 [GenerateScriptType(typeof(Test.Model.CityClassEntity))] //注意这个地方必面声明数据类型 源代码网推荐 源代码网推荐 [ScriptService] 源代码网推荐 源代码网推荐 public class CityService : System.Web.Services.WebService { 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 /// <summary> 源代码网推荐 源代码网推荐 /// 添加 源代码网推荐 源代码网推荐 /// </summary> 源代码网推荐 源代码网推荐 /// <param name="model"></param> 源代码网推荐 源代码网推荐 /// <returns></returns> 源代码网推荐 源代码网推荐 [WebMethod] 源代码网推荐 源代码网推荐 public int AddCity(CityClassEntity model) 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 return CityClassBLLBase.Create_CityClassInsert(model); 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 /// <summary> 源代码网推荐 源代码网推荐 /// 显示列表 源代码网推荐 源代码网推荐 /// </summary> 源代码网推荐 源代码网推荐 /// <returns>泛型数据</returns> 源代码网推荐 源代码网推荐 [WebMethod] 源代码网推荐 源代码网推荐 public IList<CityClassEntity> CityList() 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 return CityClassBLLBase.Get_CityClassAll(); 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 /// <summary> 源代码网推荐 源代码网推荐 /// 删除 源代码网推荐 源代码网推荐 /// </summary> 源代码网推荐 源代码网推荐 /// <param name="ClassID"></param> 源代码网推荐 源代码网推荐 /// <returns></returns> 源代码网推荐 源代码网推荐 [WebMethod] 源代码网推荐 源代码网推荐 public int CityClassDel(int ClassID) 源代码网推荐 源代码网推荐 { 源代码网推荐 源代码网推荐 return CityClassBLLBase.Create_CityClassDelete(ClassID); 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 } 源代码网推荐 源代码网推荐 做人要厚道，请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
