当前位置:首页 > asp.net ajax客户端编程+jquery:实现泛型数据的客户端数据调用、添加、删除

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

点击次数:1232  更新日期:2010-12-29
\n

   学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。)\n

\n


个人认为最好用的几个扩展:
var cityList=new Sys.StringBuilder(“”); //具体功能类似asp.net的StringBuilder:在字符串的连接中可提高速度\n

\n


for(var i=0;i<result.length;i++)\n

\n

{\n

\n

//String.formate:它在asp.net中大家应该常用它吧,用在客户端编程也超爽。\n

\n


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);\n

\n


cityList.append(tabRow);\n

\n


}
\n

\n

还有很多扩展,及其javascript面向对象编程,都是挺有意思的。\n

\n


需要微软对javascript作了大量的扩展,但个人认为易用性还是不够,所以我在使用的时时候,客户端编程大多还是用Jquery去做,至于jquery库我就没啥资资格说了。\n

\n

转入正题:下面是我用asp.net ajax客户端编程结合jquery实现泛型数据的客户端调用,数据的添加和删除操作。\n

\n



\n

第一步:相关环境配置:\n

\n


(一)、Web.config配置(后边提供一个完整的供下载)\n

\n


(二)、页面上一的一些配置\n

\n


<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>\n

\n


<Scripts>\n

\n


<asp:ScriptReference Path=”AjaxScript/CityList.js” />
\n

\n

</Scripts>\n

\n


<Services>\n

\n


<asp:ServiceReference Path=”service/CityService.asmx” />\n

\n


</Services>\n

\n


</asp:ScriptManager>\n

\n


ScriptManager的声明重要性不说了,一名话:你要用asp.net ajax编程就不能没有这主。<scripts>:调用js文件;<Services>:调用web services文件,\n

\n

我是把客户端的代码是写在CityList.js文件中的,而ajax调用的服务端程序是放在:CityService.asmx里的.当然页面上还有:<script type=”text/javascript” src=”scripts/jquery.js”></script> jquery的调用.

\n

\n

下面是:CityList.js完整程序:
\n

\n

第二步:JS文件\n

\n

\n


\n

// JScript 文件\n

\n



// JScript 文件
\n

var cityClass=new Object(); //定义类别,添加时使用.


\n

// 页面加载处理
(document).ready(function() {
hiddeProgress();
onShow();
});


\n

// (公用函数)显示操作进程
var showProgress=function()
{
(“#progress”).fadeIn(“fast”);
}


\n

// (公用函数)隐藏操作进程
var hiddeProgress=function()
{
(“#progress”).hide();
}


\n


\n

//显示列表:显示调用
var onShow=function()
{
showProgress();
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);
cityList.append(tabRow);
}
(“#divList”).html(cityList.toString());
}


\n


//添加:函数调用
var onCityAdd=function()
{
showProgress();
//为对象赋值
cityClass.ClassID=11;
cityClass.ClassName=(“#CityName”).val();
CityService.AddCity(cityClass,onaddSuccees)
}
//添加:处理添加返回结果
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);
}


\n


//删除:删除提示
var onDelMessage=function(ClassID)
{
if(confirm(“你真的要删除此记录吗?”)==true)
onDel(ClassID);
}
//删除:删除调用
var onDel=function(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()
{

}

第三步:服务器端程序\n

\n

这个好办了,大多数都挺简单的:(以下注明红色请大家注意了)
\n

\n

<%@ WebService Language=”C#” Class=”CityService” %>\n

\n


\n

using System;\n

\n

using System.Web;
\n

\n

using System.Collections.Generic;
\n

\n

using System.Web.Services;
\n

\n

using System.Web.Services.Protocols;
\n

\n

using System.Web.Script.Services;
\n

\n

using Test.Model;\n

\n

using Test.BLL;\n

\n


\n

[WebService(Namespace = http://tempuri.org/)]
\n

\n

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
\n

\n

[GenerateScriptType(typeof(Test.Model.CityClassEntity))] //注意这个地方必面声明数据类型\n

\n

[ScriptService]
\n

\n

public class CityService : System.Web.Services.WebService {
\n

/// <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);
}

}


\n

来源:cnblogs

\n