平台：VS.Net2005或VS.Net2003
准备工作：
新建DataShow.aspx和DataProcess.aspx页面
创建access数据库，名为：ajaxDB.mdb，放在文件夹App_Data下
在数据库中创建表T_user【u_id（主键）,u_name,u_sex,u_address】
DataShow用于数据呈现；
DataProcess用于处理各种与数据库的交互操作，并返回数据集或操作结果；
删除操作
1.读取数据库数据并显示到DataShow.aspx页面；
注意：
其中的Show变量必须是public类型的，以确保前台页面能取到它的值！
为table表的每行设定行号（tr1，tr2......在删除操作中没有用到行号，留以后备用）
DataShow后台代码如下：
DataShow后台代码
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.OleDb;
public partial class DataShow : System.Web.UI.Page
{
public string Show;
protected void Page_Load(object sender, EventArgs e)
{
BindTable();
}
//从数据库中读取数据并显示到当前页面
private void BindTable()
{
string connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data source=" + Server.MapPath("App_Data/ajaxDB.mdb");
OleDbConnection conn = new OleDbConnection(connstr);
if (conn.State == ConnectionState.Open)
{
conn.Close();
}
conn.Open();
OleDbDataAdapter adapter = new OleDbDataAdapter("select u_id,u_name,u_sex,u_address from T_user", conn);
DataTable tb = new DataTable();
adapter.Fill(tb);
for (int i = 0; i < tb.Rows.Count;i++ )
{
Show += "<tr id='tr"+i+"'>";//行id
Show += "<td>" + tb.Rows[i]["u_id"] + "</td>";
Show += "<td>" + tb.Rows[i]["u_name"] + "</td>";
Show += "<td>" + tb.Rows[i]["u_sex"] + "</td>";
Show += "<td>" + tb.Rows[i]["u_address"] + "</td>";
Show += "<td><a href='' onclick='javascript:return update(this);'>修改</a></td>";
Show += "<td><a href='' onclick='javascript:return del(this);'>删除</a></td>";
Show += "<td><a href='' onclick='javascript:return add();'>增加</a></td>";
Show += "</tr>";
}
}
}
DataShow前台HTML代码如下：
DataShow前台HTML代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataShow.aspx.cs" Inherits="DataShow" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script src="./js/myxmlhttp.js" type="text/jscript"></script>
<script language=javascript>
//创建XMLHttpRequest对象
var xmlhttp = new MyXmlHttp();
//弹出删除提示 obj："删除"对象（位于td内的对象）
function del(obj)
{
if(confirm("您确定删除？"))confimdel(obj);
return false;
}
//处理删除操作
//先删除数据库中数据，如果执行成功则删除页面上相应的行
function confimdel(obj)
{
var tr=obj.parentElement.parentElement;//本行的tr对象
var url="DataProcess.aspx?Flag=delete&uid="+escape(tr.cells[0].innerText);//处理删除操作
var result=xmlhttp.getPage(url);//返回操作结果
if(result=="delete_1")//操作成功
{
//tr.tbody.table.deleteRow(tr.rowIndex)
tr.parentElement.parentElement.deleteRow(tr.rowIndex);//删除页面上相应的行
document.all("lab_flag").innerText="删除成功！";
}
if(result=="delete_0")//操作失败
{
document.all("lab_flag").innerText="删除失败！";
}
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr><td>用户编号</td><td>用户名称</td><td>用户性别</td><td>用户地址</td><td>修改</td><td>删除</td><td>增加</td></tr>
<%=Show %>
</table>
<label id="lab_flag" style="color:Red;"></label>
</form>
</body>
</html>
2.点击删除触发del(obj)函数，弹出删除提示；
3.选择确定删除后，触发confimdel（obj）函数；
4.通过“删除”这个连接对象得到其所在的行对象tr；
var tr=obj.parentElement.parentElement
5.通过行对象取到其第一个td内的用户编号；
tr.cells[0].innerText
6.将用户编号传到DataProcess.aspx 页面；
DataProcess后台代码如下：
DataProcess后台代码
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.OleDb;
public partial class DataProcess : System.Web.UI.Page
{
public string Result;
private string Flag,uid;
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["Flag"] != null) Flag = Request.QueryString["Flag"];
if (Request.QueryString["uid"] != null) uid = Request.QueryString["uid"];
if (Flag == "delete") FunDel();
}
//处理删除操作
private void FunDel()
{
string connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data source=" + Server.MapPath("App_Data/ajaxDB.mdb");
OleDbConnection conn = new OleDbConnection(connstr);
if (conn.State == ConnectionState.Open)
{
conn.Close();
}
conn.Open();
OleDbCommand cmd = new OleDbCommand("delete from T_user where u_id="+uid, conn);
int count=cmd.ExecuteNonQuery();
cmd.Dispose();
if (conn.State == ConnectionState.Open)
{
conn.Close();
}
if (count == 0)
Result = "delete_0";
else
Result = "delete_1";
}
}
DataProcess前台HTML代码如下：
DataProcess前台HTML代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataProcess.aspx.cs" Inherits="DataProcess" %><%=Result%>
7.DataProcess后台通过FunDel（）方法对数据库进行操作，并将操作结果存储在全局变量Result中；
8.DataShow页面的xmlhttp.getPage(url)方法获取到DataProcess的操作结果，即Result的值；
9.根据Result返回值的不同对当前页面元素进行操作,即javascript操作html元素；
10.删除table表的一行用以下代码：
tr.parentElement.parentElement.deleteRow(tr.rowIndex)，其中tr表示行对象，如果该行的id为tr1则tr=document.all("tr1")
注意：xmlhttp.getPage(url)方法会取到DataProcess.aspx页面上所有你通过查看源文件看到的东西。
所以<%=Result%>和
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataProcess.aspx.cs" Inherits="DataProcess" %> 在同一行，
否则要处理换行