AJAX与ASP.NET结合仿GridView增删改查功能

 

jQurey代码部分：

1.    <script type="text/javascript"> 

2.            var flag = 0; 

3.   

4.            //添加新行 

5.            function addRow() { 

6.                var nrow = "<tr><td><input name='hideid' type='hidden' value='' /><input name='username' type='text' value='' size='15' maxlength='15'  /></td><td><select name='seltype' id=seltype1><option value='Text'>文本框</option><option value='textarea'>多行文本区</option><option value='Select'>下拉框</option><option value='Radio'>单选框</option><option value='Checkbox'>复选框</option></select></td><td><span class='heb' name='buttonspan'><input  value='添加' οnclick='addData(this)' type='button'  class='se_buton'/>&nbsp;<input  value='取消' type='button' οnclick='deleteNewRow(this)' class='se_buton'/></span></td></tr>"; 

7.                if (flag == 0) { 

8.                    $('#attributetable').append(nrow); 

9.                    flag = 1; 

10.               } 

11.           } 

12.  

13.           //添加新行中的数据到后台 

14.           function addData(obj) { 

15.  

16.  

17.               var trobj = $(obj).parents('tr'); 

18.               var username = $(trobj).find(':text[name=username]').val(); 

19.               var seltype = $(trobj).find('select[name=seltype]').val(); 

20.  

21.               $.post("SupplyAJAX.aspx", { username: username, seltype: seltype, type: "add" }, function (data) { 

22.                   if (data.toString() != "0") { 

23.                       $(trobj).find(':hidden[name=hideid]').val(data.toString()); 

24.                       changeDisable(obj, 0); 

25.                   } 

26.                   else { 

27.                       deleteNewRow(obj); 

28.                       alert('添加失败'); 

29.                   } 

30.               }); 

31.               flag = 0; 

32.           } 

33.            

34.           //更新行 

35.           function updData(obj) { 

36.  

37.                

38.               var trobj = $(obj).parents('tr'); 

39.               var id = $(trobj).find(':hidden[name=hideid]').val(); 

40.               var username = $(trobj).find(':text[name=usrname]').val(); 

41.             

42.               var seltype = $(trobj).find('select[name=seltype]').val(); 

43.               $.post("SupplyAJAX.aspx", { id: id, username: username, seltype: seltype, type: "update" },  

44.               function (data) { 

45.            

46.                   if (data.toString() != "0") { 

47.                       changeDisable(obj, 0); 

48.                   } 

49.                   else { 

50.                       alert('更新失败'); 

51.                   } 

52.               }); 

53.           } 

54.           //删除新行 

55.           function deleteNewRow(obj) { 

56.               $(obj).parents('tr').replaceWith(''); 

57.               flag = 0; 

58.           } 

59.           //删除数据库中的行 

60.           function deleteRow(obj) { 

61.               var trobj = $(obj).parents('tr'); 

62.               var id = $(trobj).find(':hidden[name=hideid]').val(); 

63.               $.post("SupplyAJAX.aspx", { id: id, type: "delete" },  

64.               function (data) { 

65.                   if (data.toString() != "0") { 

66.                       $(obj).parents('tr').replaceWith(''); 

67.                   } 

68.                   else { 

69.                       alert('删除失败'); 

70.                   } 

71.               }); 

72.           } 

73.  

74.           //改变编辑状态 

75.           function changeDisable(obj, type) { 

76.               var trobj = $(obj).parents('tr'); 

77.               if (type == 0) { 

78.                   $(trobj).find(':text').attr('disabled', 'disabled'); 

79.                   $(trobj).find('select').attr('disabled', 'disabled'); 

80.                   $(trobj).find('span[name=buttonspan]').html("<input name='gx' value='更新' type='button' οnclick='changeDisable(this,1)'  class='se_buton'/>&nbsp;<input value='删除' type='button' name='qx' οnclick='deleteRow(this)'  class='se_buton' />");  

81.               } 

82.               if (type == 1) { 

83.                   $(trobj).find(':text').attr('disabled', ''); 

84.                   $(trobj).find('select').attr('disabled', ''); 

85.                   $(trobj).find('span[name=buttonspan]').html("<input name='gx' value='确定' type='button' οnclick='updData(this)'  class='se_buton'/>&nbsp;<input value='取消' type='button' name='qx' οnclick='changeDisable(this,0)'  class='se_buton' />"); 

 

86.               } 

87.           } 

88.       </script>

HTML代码部分：

1.    <body>

2.   

3.    <table id="attributetable">

4.    </table>

5.      <div class=" heb"><input value="增加一行" type="button" οnclick='addRow()' class="se_buton"/> </div>

6.    </body>

SupplyAJAX类

1.   

2.    public partial class SupplyAJAX : System.Web.UI.Page 

3.    { 

4.        static List<UserModel> UmList = new List<UserModel>(); 

5.   

6.        protected void Page_Load(object sender, EventArgs e) 

7.        { 

8.            switch (Request.QueryString["type"]) 

9.            {  

10.               case "add": 

11.                   Add(); 

12.                   break; 

13.               case "update": 

14.                   Update(); 

15.                   break; 

16.               case "delete": 

17.                   Delete(); 

18.                   break; 

19.           } 

20.           Response.End(); 

21.       } 

22.  

23.       private string Add() 

24.       { 

25.           UserModel um = new UserModel(); 

26.           um.Id = UmList.Count + 1; //自动为ID加1 

27.           um.Username = Request.Form["username"]; 

28.           um.Seltype = Request.Form["seltype"]; 

29.           UmList.Add(um); 

30.           return um.Id.ToString(); 

31.       } 

32.  

33.       private string Update() 

34.       { 

35.           int id = int.Parse(Request.QueryString["id"]); 

36.           for (int i = 0; i < UmList.Count; i++) 

37.           { 

38.               if (id == UmList[i].Id) 

39.               { 

40.                   UmList[i].Username = Request.Form["username"]; 

41.                   UmList[i].Seltype = Request.Form["seltype"]; 

42.                   return UmList[i].Id.ToString(); 

43.               } 

44.           } 

45.           return "0"; 

46.       } 

47.  

48.       private string Delete() 

49.       { 

50.           int id = int.Parse(Request.Form["id"]); 

51.           for (int i = 0; i < UmList.Count; i++) 

52.           { 

53.               if (id == UmList[i].Id) 

54.               { 

55.                   UmList.Remove(UmList[i]); 

56.                   return UmList[i].Id.ToString(); 

57.               } 

58.           } 

59.           return "0"; 

60.       } 

61.  

62.   }