我一个朋友，因为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{ 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=" 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/