文/hwtthwtt 出处/博客园
学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.ClassID,result.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="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.ClassID,result.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);
}
}
| 感谢原创者的辛勤劳动，希望对您有所帮助，转载请注明原出处。 |
