在Asp.net中使用jquery实现Ajax

     因为最近的项目需要使用在Asp.net下使用Ajax技术.进行了一些实际研究,原来想用Ext,但考虑到同组的哥几个一起开发,Ext的类库过大,并且它的优势在于UI方面;而对于微软官方的解决方案ASP.NET AJAX的类库还包括后台的类库觉得稍重量级了些.最后选择了jqury,轻量而优雅.

     对于jqury这个javascript类库,有官方的网站支持,感兴趣的想彻底研究的不妨移步过去:点这儿.

    这里只提供自已使用jqury在Asp.net中的应用方案。

     首先,要解决的问题是使用jQuery.getJSON(url,[data],[callback])方法中url,即要获取前台处理数据的地址。因为以前有过开发GIS的经验,所以知道一般GIS的解决方案是通过调用“一般处理程序”即以.ashx结尾的文件,它实际上是通过继承IHttpHandler这个接口来实现自定义返回给客户端自定义内容的。

      IHttpHandler这个接口比较简单只有一个属性和一个方法:

 

 1 using  System;
 2
 3 namespace  System.Web
 4 ExpandedBlockStart.gifContractedBlock.gif {
 5    public interface IHttpHandler
 6ExpandedSubBlockStart.gifContractedSubBlock.gif    {
 7ExpandedSubBlockStart.gifContractedSubBlock.gif        bool IsReusable get; }
 8
 9        void ProcessRequest(HttpContext context);
10    }

11}

      其中ProcessRequest(HttpContext context)这个方法是我们关心的。在我们的.ashx文件中,我们就是要实现自已的ProcessRequest(HttpContext contex),用它来给客户端返回前端数据。

     第二个要解决的问题是C#的数据结构和javascript是完全不同的,所以C#的数据要返回给javascript处理,必须的找个桥梁。这里有两个选择:1.xml;2.JSON。因为这里只是简单的应用实现,所以我选择的是相对简单的JSON。

     方案已定,下面在自己的.ashx文件中可以这么实现ProcessRequest(HttpContext contex)方法:

 

1          public   void  ProcessRequest(HttpContext context)
2 ExpandedBlockStart.gifContractedBlock.gif         {
3            context.Response.ContentType = "text/plain";
4            string data = "[{name:\"fan\",age:26},{name:\"wang\",age:25}]";//构建的json数据
5            //下面两句是用来测试前台向此页面发出的查询字符
6            context.Response.Write(data);
7        }

8

     

    OK,后台的部分完成,剩下的就简单很多,在前台页面中请求这个.ashx即可:

  

ContractedBlock.gif ExpandedBlockStart.gif Code
<script language="javascript" type="text/javascript" src="jquery-1.2.3.js"></script>
<script language="javascript" type="text/javascript">
  $(document).ready(
function(){
    $.getJSON(
    
"AjaxHandler.ashx",//产生JSON数据的服务端页面
   //对返回的JSON数据进行处理,本例以列表的形式呈现
    function(json){
   
//循环取json中的数据,并呈现在列表中
//
   debugger;
    $.each(json,function(i){
    $(
"#cat-list").append("<li>name:"+json[i].name+"&nbsp; Age:"+json[i].age+"</li>")
    })
    });
  });
</script>
<div id="categories">
<h3 title="选择一个分区"><span>选择</span></h3> 
<ul id="cat-list"></ul>
</div>

    按F5的话可以看到效果。

    当然这只是简单的Demo,如果想实际应用的话,可以写一个类库来专门处理C#转化为JSON格式,这样处理起来应该方便很多。如果有时间的话,等闲下来我来实现个。关于序列化JSON,可以用JavaScriptSerializer(否决的)或者DataContractJsonSerializer。谢谢九楼的兄弟!

    不知道这个轻量级的应用是否恰当,请各位兄弟指教!

    如果想要Demo的话可以留下邮箱    

    

    关于demo我没有想到这么多人想要,明天到单位我就把它上传上来,谢谢各位了,邮件我尽量回复,回不到的请见谅!

    Demo在这儿,点我

   

 在这里要谢谢Ants ,我应该以前读过他的这篇文章:

http://www.cnblogs.com/leleroyn/archive/2008/06/17/1224039.html

 demo也是借签他的,时间长了,忘记声明了,在这里谢谢Ants指出。

  各位可以移步去Ants 处看下!

转载于:https://www.cnblogs.com/phonefans/archive/2008/08/07/1262148.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值