通过AJAX与ASP.NET结合实现的仿GridView增删改查功能！

2025-01-31 技术教程

jQurey代码部分：

<scripttype="text/javascript"> varflag=0; //添加新行 functionaddRow(){ varnrow="<tr><td><inputname='hideid'type='hidden'value=''/><inputname='username'type='text'value=''size='15'maxlength='15'/></td><td><selectname='seltype'id=seltype1><optionvalue='Text'>文本框</option><optionvalue='textarea'>多行文本区</option><optionvalue='Select'>下拉框</option><optionvalue='Radio'>单选框</option><optionvalue='Checkbox'>复选框</option></select></td><td><spanclass='heb'name='buttonspan'><inputvalue='添加'onclick='addData(this)'type='button'class='se_buton'/> <inputvalue='取消'type='button'onclick='deleteNewRow(this)'class='se_buton'/></span></td></tr>"; if(flag==0){ $('#attributetable').append(nrow); flag=1; } } //添加新行中的数据到后台 functionaddData(obj){ vartrobj=$(obj).parents('tr'); varusername=$(trobj).find(':text[name=username]').val(); varseltype=$(trobj).find('select[name=seltype]').val(); $.post("SupplyAJAX.aspx",{username:username,seltype:seltype,type:"add"},function(data){ if(data.toString()!="0"){ $(trobj).find(':hidden[name=hideid]').val(data.toString()); changeDisable(obj,0); } else{ deleteNewRow(obj); alert('添加失败'); } }); flag=0; } //更新行 functionupdData(obj){ vartrobj=$(obj).parents('tr'); varid=$(trobj).find(':hidden[name=hideid]').val(); varusername=$(trobj).find(':text[name=usrname]').val(); varseltype=$(trobj).find('select[name=seltype]').val(); $.post("SupplyAJAX.aspx",{id:id,username:username,seltype:seltype,type:"update"}, function(data){ if(data.toString()!="0"){ changeDisable(obj,0); } else{ alert('更新失败'); } }); } //删除新行 functiondeleteNewRow(obj){ $(obj).parents('tr').replaceWith(''); flag=0; } //删除数据库中的行 functiondeleteRow(obj){ vartrobj=$(obj).parents('tr'); varid=$(trobj).find(':hidden[name=hideid]').val(); $.post("SupplyAJAX.aspx",{id:id,type:"delete"}, function(data){ if(data.toString()!="0"){ $(obj).parents('tr').replaceWith(''); } else{ alert('删除失败'); } }); } //改变编辑状态 functionchangeDisable(obj,type){ vartrobj=$(obj).parents('tr'); if(type==0){ $(trobj).find(':text').attr('disabled','disabled'); $(trobj).find('select').attr('disabled','disabled'); $(trobj).find('span[name=buttonspan]').html("<inputname='gx'value='更新'type='button'onclick='changeDisable(this,1)'class='se_buton'/> <inputvalue='删除'type='button'name='qx'onclick='deleteRow(this)'class='se_buton'/>"); } if(type==1){ $(trobj).find(':text').attr('disabled',''); $(trobj).find('select').attr('disabled',''); $(trobj).find('span[name=buttonspan]').html("<inputname='gx'value='确定'type='button'onclick='updData(this)'class='se_buton'/> <inputvalue='取消'type='button'name='qx'onclick='changeDisable(this,0)'class='se_buton'/>"); } } </script>

HTML代码部分：

SupplyAJAX类

publicpartialclassSupplyAJAX:System.Web.UI.Page { staticList<UserModel>UmList=newList<UserModel>(); protectedvoidPage_Load(objectsender,EventArgse) { switch(Request.QueryString["type"]) { case"add": Add(); break; case"update": Update(); break; case"delete": Delete(); break; } Response.End(); } privatestringAdd() { UserModelum=newUserModel(); um.Id=UmList.Count+1;//自动为ID加1 um.Username=Request.Form["username"]; um.Seltype=Request.Form["seltype"]; UmList.Add(um); returnum.Id.ToString(); } privatestringUpdate() { intid=int.Parse(Request.QueryString["id"]); for(inti=0;i<UmList.Count;i++) { if(id==UmList[i].Id) { UmList[i].Username=Request.Form["username"]; UmList[i].Seltype=Request.Form["seltype"]; returnUmList[i].Id.ToString(); } } return"0"; } privatestringDelete() { intid=int.Parse(Request.Form["id"]); for(inti=0;i<UmList.Count;i++) { if(id==UmList[i].Id) { UmList.Remove(UmList[i]); returnUmList[i].Id.ToString(); } } return"0"; } }

附件：http://down.51cto.com/data/2359030