jquery+Handler实现淘宝收藏列表导航功能
我一个朋友,因为jquery不怎么会写,他工作大部分都是用服务器控件,所以他看到这样的效果不好做,叫我帮他做,我答应他了,因为很忙,所以就今晚抽了点时间来做做,在里面最重要的是用到了现在很流行的jquery,他的效果,大家用过淘宝的收藏就知道,就是一个列表,然后鼠标移上去右边就显示【编辑/删除】功能,当点击编辑时对收藏类就行编辑,然后点击保存,整个过程就这样,我在这里分享一下,就是想以后我们园子的朋友有遇到这样的问题,看到这个例子可以有一种豁然开朗的感觉。
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head runat="server">
5 <title>jquery+handler实现的淘宝收藏列表的导航功能---aXinNo1</title>
6 <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
7 <style type="text/css">
8 .show{list-style: none;margin: 0px;padding: 0px;}
9 .show li{width: 300px;height: 25px;margin: 0px;border: 1px #ccc solid;}
10 .show li a{float: left;padding-left: 5px;padding-top: 5px;}
11 .show li span{display: none;float: left;margin-left: 110px;}
12 .show li dl{display: none;float: left;border: 1px red solid;margin: 0px;padding: 0px;}
13 </style>
14 </head>
15 <body>
16 <form id="form1" runat="server">
17 <div><ul class="show">
18 <%for (int i = 0; i < list.Count; i++)
19 {
20 UserModel uModel = list[i] as UserModel;%>
21 <li><a href="#">
22 <%=uModel.cname %></a>
23 <dl><dd><table style="width: 100%; margin: 0px; padding: 0px;">
24 <tr>
25 <td style="text-align: left;">
26 <input type="text" id='uname<%=uModel.ID %>' value='<%=uModel.cname %>' />
27 </td>
28 <td style="text-align: right">
29 <a id='save<%=uModel.ID %>' href="javascript:doSave(<%=uModel.ID %>)">保存</a>
30 </td>
31 <td style="text-align: right">
32 <a id="doDelete<%=uModel.ID %>" href="javascript:doClose(<%=uModel.ID %>)">取消</a>
33 </td></tr></table></dd></dl>
34 <span><a id="edit<%=uModel.ID %>" href="javascript:doEdit(<%=uModel.ID %>)">编辑</a> <a
35 href="javascript:doDelete(<%=uModel.ID %>)" onclick="javascript:return confirm('你确定删除?');">
36 删除</a> </span></li> <% } %>
37 </ul></div>
38 </form>
39 </body>
40 <script type="text/javascript">
41 $(document).ready(function(){
42 $('ul li').hover(function(){
43 $(this).find('span').css({"display":"block"});
44 },function(){
45 $(this).find('span').css({"display":"none"});
46 });
47 $('ul li:even').css({"background-color":"#ccc"});
48 });
49 function doEdit(id){
50 $('#edit'+id).parents('span').css({"display":"none"});
51 $('#edit'+id).parents('span').siblings('a').css({"display":"none"});
52 $('#edit'+id).parents('span').siblings('dl').css({"display":"block"});
53 if($('#edit'+id).parents('span').siblings('dl').css("display")=="block"){
54 $('#edit'+id).parents('span').parent().hover(function(){
55 $('#edit'+id).parents('span').css({"display":"none"});
56 });
57 }
58 }
59 function doClose(id){
60 $('#doDelete'+id).parent().parent().parent().
61 parent().parents('dl').css({"display":"none"});
62 $('#doDelete'+id).parent().parent().parent()
63 .parent().parents('dl').siblings('a').css({"display":"block"});
64 $('#doDelete'+id).parent().parent().parent()
65 .parent().parents('dl').siblings("span").css({"display":"none"});
66 $('ul li').hover(function(){
67 $(this).find('span').css({"display":"block"});
68 },function(){
69 $(this).find('span').css({"display":"none"});
70 });
71 }
72 function doDelete(id){
73 $.ajax({
74 type:'post',
75 data:{cmd:"delete",id:id},
76 url:"Handler.ashx",
77 success:function(result){
78 window.location.reload();
79 }
80 });
81 }
82 function doSave(id){
83 var data={cname:document.getElementById("uname"+id).value,cmd:"save",id:id};
84 $.ajax({
85 type:'post',
86 data:data,
87 url:"Handler.ashx",
88 success:function(result){
89 window.location.reload();
90 }
91 });
92 }
93 </script>
94 </html>
95
Handler处理文件
<%@ WebHandler Language="C#" Class="Handler" Debug="true" %> using System; using System.Web; using System.Web.Services; using System.Web.Script.Serialization; public class Handler : IHttpHandler { protected HttpContext ctx; public void ProcessRequest(HttpContext context) { ctx = context; ctx.Response.ContentType = "text/plain; charset=UTF-8"; if (ctx.Request["cmd"].Equals("save")) { this.dosave(); //其实是修改的 } else if (ctx.Request["cmd"].Equals("delete")) { this.dodelete();//删除 } } protected void dosave() { UserInfoBll uBll = new UserInfoBll(); string id = ctx.Request["id"].ToString(); string cname = ctx.Request["cname"].ToString(); string result = ""; JavaScriptSerializer serializer = new JavaScriptSerializer(); UserModel uModel = new UserModel { cname = cname, ID = Convert.ToInt32(id) }; try { uBll.Update(uModel); result = "操作成功"; } catch { result = "操作失败"; } string strJson = serializer.Serialize(result); ctx.Response.Write(strJson); } protected void dodelete() { UserInfoBll uBll = new UserInfoBll(); string id = ctx.Request["id"].ToString(); bool flag= uBll.Delete(Convert.ToInt32(id)); JavaScriptSerializer serializer = new JavaScriptSerializer(); string strJson = serializer.Serialize(flag); ctx.Response.Write(strJson); } public bool IsReusable { get { return false; } } }
出处,博客园aXinNo1:http://www.cnblogs.com/axinno1/