Ajax无刷新删除行

简介: 一般处理程序代码:using System;using System.Web;using Ajax无刷新删除.DataSetDeleteDataTableAdapters;namespace Ajax无刷新删除{    ///     /// DeleteDataById 的摘要说明    /...

一般处理程序代码:

using  System;
using  System.Web;
using  Ajax无刷新删除.DataSetDeleteDataTableAdapters;

namespace  Ajax无刷新删除
{
    
///   <summary>
    
///  DeleteDataById 的摘要说明
    
///   </summary>
     public   class  DeleteDataById : IHttpHandler
    {

        
public   void  ProcessRequest(HttpContext context)
        {
            context.Response.ContentType 
=   " text/plain " ;
            
int  id  =  Convert.ToInt32(context.Request[ " id " ]);
            
new  T_CommentTableAdapter().DeleteDataById(id);
        }

        
public   bool  IsReusable
        {
            
get
            {
                
return   false ;
            }
        }
    }

 } 

Aspx页面代码:主要就是JQuery中的代码;

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ajax无刷新删除.Default" %>


<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
    
< title ></ title >
    
< script  src ="Scripts/jquery-1.4.1.js"  type ="text/javascript" ></ script >
    
< script  language ="javascript"  type ="text/javascript" >
        $(
function  () {
            
// 给有isremove=true属性的控件添加click事件;
            $( " input[isremove=true] " ).click( function  () {
                
var  id  =  $( this ).attr( " rowid " );   // 获取当前行的id
                 // 发送请求
                $.post( " DeleteDataById.ashx " , {  " id " : id },  function  (data, status) {
                    
if  (status  ==   " success " ) {
                        
// 如果处理成功,remove当前行  parent找他的父级元素
                        $( " input[rowid= "   +  id  +   " ] " ).parent().parent().hide( " slow " );
                    } 
else  {
                        alert(
" 删除失败 " );
                        
return ;
                    }
                });
            });
        });
    
</ script >
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
    
< div >
        
< asp:ObjectDataSource  ID ="ObjectDataSource1"  runat ="server"  DeleteMethod ="Delete"
            InsertMethod
="Insert"  OldValuesParameterFormatString ="original_{0}"  SelectMethod ="GetData"
            TypeName
="Ajax无刷新删除.DataSetDeleteDataTableAdapters.T_CommentTableAdapter"  UpdateMethod ="Update" >
            
< DeleteParameters >
                
< asp:Parameter  Name ="Original_Id"  Type ="Int32"   />
            
</ DeleteParameters >
            
< InsertParameters >
                
< asp:Parameter  Name ="IpAddress"  Type ="String"   />
                
< asp:Parameter  Name ="Comment"  Type ="String"   />
                
< asp:Parameter  Name ="PostDate"  Type ="DateTime"   />
            
</ InsertParameters >
            
< UpdateParameters >
                
< asp:Parameter  Name ="IpAddress"  Type ="String"   />
                
< asp:Parameter  Name ="Comment"  Type ="String"   />
                
< asp:Parameter  Name ="PostDate"  Type ="DateTime"   />
                
< asp:Parameter  Name ="Original_Id"  Type ="Int32"   />
            
</ UpdateParameters >
        
</ asp:ObjectDataSource >
        
< asp:ListView  ID ="ListView1"  runat ="server"  DataKeyNames ="Id"  DataSourceID ="ObjectDataSource1"
            InsertItemPosition
="LastItem" >
            
< EmptyDataTemplate >
                
< table  runat ="server"  style ="" >
                    
< tr >
                        
< td >
                            未返回数据。
                        
</ td >
                    
</ tr >
                
</ table >
            
</ EmptyDataTemplate >
            
< InsertItemTemplate >
                
< tr  style ="" >
                    
< td >
                        
< asp:Button  ID ="InsertButton"  runat ="server"  CommandName ="Insert"  Text ="插入"   />
                        
< asp:Button  ID ="CancelButton"  runat ="server"  CommandName ="Cancel"  Text ="清除"   />
                    
</ td >
                    
< td >
                        
&nbsp;
                    
</ td >
                    
< td >
                        
< asp:TextBox  ID ="IpAddressTextBox"  runat ="server"  Text ='<%#  Bind("IpAddress") % > ' />
                    
</ td >
                    
< td >
                        
< asp:TextBox  ID ="CommentTextBox"  runat ="server"  Text ='<%#  Bind("Comment") % > ' />
                    
</ td >
                    
< td >
                        
< asp:TextBox  ID ="PostDateTextBox"  runat ="server"  Text ='<%#  Bind("PostDate") % > ' />
                    
</ td >
                
</ tr >
            
</ InsertItemTemplate >
            
< ItemTemplate >
                
< tr  style ="" >
                    
< td >
                        
< asp:Button  ID ="EditButton"  runat ="server"  CommandName ="Edit"  Text ="编辑"   />
                        
< input  id ="btnDelete"  type ="button"  isremove ="true"  rowid ='<%#Eval("id")  % > ' value="无刷新删除" />
                    
</ td >
                    
< td >
                        
< asp:Label  ID ="IdLabel"  runat ="server"  Text ='<%#  Eval("Id") % > ' />
                    
</ td >
                    
< td >
                        
< asp:Label  ID ="IpAddressLabel"  runat ="server"  Text ='<%#  Eval("IpAddress") % > ' />
                    
</ td >
                    
< td >
                        
< asp:Label  ID ="CommentLabel"  runat ="server"  Text ='<%#  Eval("Comment") % > ' />
                    
</ td >
                    
< td >
                        
< asp:Label  ID ="PostDateLabel"  runat ="server"  Text ='<%#  Eval("PostDate") % > ' />
                    
</ td >
                
</ tr >
            
</ ItemTemplate >
            
< LayoutTemplate >
                
< table  runat ="server" >
                    
< tr  runat ="server" >
                        
< td  runat ="server" >
                            
< table  id ="itemPlaceholderContainer"  runat ="server"  border ="0"  style ="" >
                                
< tr  runat ="server"  style ="" >
                                    
< th  runat ="server" >
                                    
</ th >
                                    
< th  runat ="server" >
                                        Id
                                    
</ th >
                                    
< th  runat ="server" >
                                        IpAddress
                                    
</ th >
                                    
< th  runat ="server" >
                                        Comment
                                    
</ th >
                                    
< th  runat ="server" >
                                        PostDate
                                    
</ th >
                                
</ tr >
                                
< tr  id ="itemPlaceholder"  runat ="server" >
                                
</ tr >
                            
</ table >
                        
</ td >
                    
</ tr >
                    
< tr  runat ="server" >
                        
< td  runat ="server"  style ="" >
                        
</ td >
                    
</ tr >
                
</ table >
            
</ LayoutTemplate >
        
</ asp:ListView >
    
</ div >
    
</ form >
</ body >
</ html >

 

 

 

 

目录
相关文章
|
10月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
73 0
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
106 0
|
4月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
前端开发 JavaScript
jQuery中的Ajax请求----ajax请求篇(二)
在jQuery中的Ajax请求其实是在底层对原生js请求方式的封装,那么jQuery中的Ajax请求是怎样的呢?
57 0
|
4月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
42 0
|
4月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
68 0
|
4月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
4月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
79 0
|
4月前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
|
4月前
|
XML 缓存 JavaScript
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
39 0