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

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

　　 学 asp.net ajax 客户端编程有一段时间了，决定押空把这段时间学的作一个总结。个人认为 asp.net ajax 是众多 ajax 框架中功能最强大，也是最完善的（呵呵：究竟也是微软公司的产品嘛）。并且在客户端的许多编程风格经过微软公司对 javascrpt 的扩展后，很像 asp.net 编程风格：（关于 asp.net ajax 对 javascript 的扩展文档请参照， Dflying 大大的文章： http://www.cnblogs.com/dflying/archive/<?xml:namespace prefix = st1 />2007/02/09/639638.html 。 )<?xml:namespace prefix = o />

 
  个人认为最好用的几个扩展：
   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)' οnclick='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="scripts/jquery.js"></script> jquery 的调用 .

下面是 :CityList.js 完整程序：

第二步：JS 文件

 

// JScript 文件

 // JScript 文件

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

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

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

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

 

//显示列表：显示调用
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)' οnclick='onDel({0})'>Del</a></div>",result[i].ClassID,result[i].ClassName);
     cityList.append(tabRow);
   }
  $("#divList").html(cityList.toString());
}

//添加:函数调用
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)' οnclick='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)
{
  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);
    }
   
}

对不起时间太晚了：明天附上原码供参考，如有不对的敬请大家指正。谢放大家

posted on 2007-12-10 23:42  了无痕 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/hwtthwtt/archive/2007/12/10/990030.html