一般處理程序+htm C#簡單的增刪查改

首先引用兩個文件一個dll：

 

數據庫表已創建

首先編寫數據讀取部分

        /// <summary>
        /// 查詢
        /// </summary>
        /// <param name="username"></param>
        /// <returns></returns>
        private DataTable GetDataTable(string username) {
            sql = @"select  *from Fct_User where  [UserName] like'%" + username + "%' order by UserName";
            return db.ExecuteQuery(sql);
        }
        /// <summary>
        /// 新增
        /// </summary>
        /// <param name="username"></param>
        /// <param name="pwd"></param>
        /// <param name="note"></param>
        /// <returns></returns>
        private string AddData(string username,string pwd,string note, out int num) {
            string userid = Guid.NewGuid().ToString();
            sql = @"insert into[Fct_User]([UserID],[UserName],[PassWord],[Note])values('" + userid + "','" + username + "','" + pwd + "','" + note + "')";
            num= db.ExecuteNonQuery(sql);
             return userid;
        }
        /// <summary>
        /// 修改
        /// </summary>
        /// <param name="userid"></param>
        /// <param name="username"></param>
        /// <param name="pwd"></param>
        /// <param name="note"></param>
        /// <returns></returns>
        private int UpData(string userid, string username, string pwd, string note) {
             sql = @"update Fct_User set[UserName]='" + username + "' ,[PassWord]='" + pwd + "' ,[Note]='" + note + "' where UserID='" + userid + "' ";
            return db.ExecuteNonQuery(sql);
        }
        /// <summary>
        /// 刪除
        /// </summary>
        /// <param name="userid"></param>
        /// <returns></returns>
        private int DeleteData(string userid) {
            sql = @"delete Fct_User where UserID='" + userid + "'";
            return db.ExecuteNonQuery(sql);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

其次編寫調用：

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using DALBase;

namespace MyTest
{
    /// <summary>
    /// IndexHandler 的摘要說明
    /// </summary>
    public class IndexHandler : IHttpHandler
    {
        protected DBAccess db=DBConnection.CreateDB(1);
      public  string sql = "";
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            try
            {
                string userid = "", username = "", pwd = "", note = "", json="";
                if (context.Request.Form["userid"] != null) userid = context.Request.Form["userid"].ToString();
                if(context.Request.Form["UserName"]!=null) username=context.Request.Form["UserName"].ToString();
                if (context.Request.Form["pwd"] != null) pwd = context.Request.Form["pwd"].ToString();
                if (context.Request.Form["note"] != null) note = context.Request.Form["note"].ToString();
                string method = context.Request.Params["Type"].ToString();
                switch (method)
                {
                    case "GetDataTable":
                        json = "[]";
                        DataTable dt = GetDataTable(username);
                         json = DataTableToJson.ToJson(dt); 
                        break;
                    case "AddData":
                        int num=0;
                        userid = AddData(username, pwd, note,out num).ToString();
                        json = "{\"num\":\"" + num + "\",\"userid\":\"" + userid + "\"}";
                        break;
                    case "UpData":
                        json = UpData(userid, username, pwd, note).ToString();
                        break;
                    case "DeleteData":
                        json = DeleteData(userid).ToString();
                        break;
                    default:
                        break;
                }
                context.Response.Write(json);
            }
            catch (Exception e)
            {
                context.Response.Write(e.ToString());
            }

            //context.Response.Write("Hello World");
        }

　　然后創建html頁面結構

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.10.2.js"></script>
</head>
<body>
    <table style="border-right: silver 1px; border-top: silver 1px; border-left: silver 1px;
               border-bottom: silver 1px; border-collapse: collapse; background-color: white"
           bordercolor="silver" cellspacing="0" cellpadding="4" rules="all" width="1000px"
           border="1">
        <tr>
            <td style="width:100px;">
                用戶名
            </td>
            <td> 
                <input type="text" id="userName" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="button" id="Query" value="查詢" onclick="QueryData()" />
                <input type="button" id="Add" value="新增" onclick="AddData()" />
            </td>
        </tr>
    </table>
    <table style="border-right: silver 1px; border-top: silver 1px; border-left: silver 1px;
               border-bottom: silver 1px; border-collapse: collapse; background-color: white"
           bordercolor="silver" cellspacing="0" cellpadding="4" rules="all" width="1000px"
           border="1">
        <tr>
            <th style="width: 100px;">
                操作
            </th>
            <th>
                用戶名
            </th>
            <th>
                密碼
            </th>
            <th>
                備注
            </th>
        </tr>
        <tbody id="UserData"></tbody>
    </table>
</body>
</html>

最后寫JavaScript

<script type="text/javascript">
    function QueryData() {
        $("#UserData").html('');
        $.ajax({
            type: "POST",
            dataType: "JSON",
            //cache: false,
            //naync: false,
            url: "IndexHandler.ashx?Type=GetDataTable",
            data: { "UserName": $("#userName").val() },
            success: function (data) {
                $.each(data, function (index, item) {
                    var html = '<tr><td><input type="button" data-code="' + item.UserID + '" value="更新" onclick="UpdateData(this)" />';
                    html += '<input type="button" data-code="' + item.UserID + '" value="刪除" onclick="DeleteData(this)" /></td>';
                    html += '<td>' + item.UserName + '</td>';
                    html += '<td>' + item.PassWord + '</td>';
                    html += '<td>' + item.Note + '</td></tr>';
                    $("#UserData").append(html);
                })
            }
        });
    }
    function AddData() { 
        var newRow = '<tr><td><input type="button"  value="保存" onclick="SaveAddData(this)" /></td>';
        newRow += '<td><input type="text" id="txtusername" /></td><td><input type="text" id="txtpwd" /></td><td><input type="text" id="txtnote" /></td>'
        if ($("#UserData").html() != "") {
            $("#UserData tr").eq(0).0(newRow);
        }
    else { $("#UserData").append(newRow) }
    }

    function SaveAddData(e) {
        var username = $(e).parent().parent().find("td").find("#txtusername").val();
        var pwd = $(e).parent().parent().find("td").find("#txtpwd").val();
        var note = $(e).parent().parent().find("td").find("#txtnote").val();

        $.ajax({
            type: "POST",
            dataType: "JSON",
            //cache: false,
            //naync: false,
            url: "IndexHandler.ashx?Type=AddData",
            data: { "UserName": username, "pwd": pwd, "note": note },
            success: function (data) {
                debugger;
                if (parseInt($.trim(data.num)) > 0) {
                    alert("添加成功！");
                    userid = data.userid;
                     username = $(e).parent().parent().find("td").find("#txtusername").val();
                     pwd = $(e).parent().parent().find("td").find("#txtpwd").val();
                     note = $(e).parent().parent().find("td").find("#txtnote").val();
                    var upRow = '<td><input type="button" data-code="' + userid + '" value="更新" onclick="UpdateData(this)" />';
                    upRow += '<input type="button" data-code="' + userid + '" value=" 刪除" onclick="DeleteData(this)" /></td>';
                    upRow += '<td>' + username + '</td><td>' + pwd + '</td><td>' + note + '</td>'
                    $(e).parent().parent().html(upRow);
                } else { alert("添加失敗！"); }
            }
        });
    }

    function UpdateData(e) {
        var userid = $(e).data("code");
        var username = $(e).parent().parent().find("td").eq(1).html();
        var pwd = $(e).parent().parent().find("td").eq(2).html();
        var note = $(e).parent().parent().find("td").eq(3).html();
        var upRow = '<td><input type="button" data-code="' + userid + '" value="取消" onclick="ResUpdateData(this)" />';
        upRow += '<input type="button" data-code="' + userid + '" value=" 保存" onclick="SaveUpdateData(this)" /></td>';
        upRow += '<td><input type="text" id="txtusername" value="' + username + '" /></td><td><input type="text" value="' + pwd + '" id="txtpwd" /></td><td><input  value="' + note + '" type="text" id="txtnote" /></td>'
        $(e).parent().parent().html(upRow);
    }
    function SaveUpdateData(e) {
        debugger;
        var userid = $(e).data("code");
        var username = $(e).parent().parent().find("td").find("#txtusername").val();
        var pwd = $(e).parent().parent().find("td").find("#txtpwd").val();
        var note = $(e).parent().parent().find("td").find("#txtnote").val();
        $.ajax({
            type: "POST",
            dataType: "JSON",
            //cache: false,
            //naync: false,
            url: "IndexHandler.ashx?Type=UpData",
            data: { "userid": userid, "UserName": username, "pwd": pwd, "note": note },
            success: function (num) {
                if (parseInt($.trim(num)) > 0) {
                    alert("修改成功！");
                     userid = $(e).data("code");
                     username = $(e).parent().parent().find("td").find("#txtusername").val();
                     pwd = $(e).parent().parent().find("td").find("#txtpwd").val();
                     note = $(e).parent().parent().find("td").find("#txtnote").val();
                     upRow = '<td><input type="button" data-code="' + userid + '" value="更新" onclick="UpdateData(this)" />';
                    upRow += '<input type="button" data-code="' + userid + '" value=" 刪除" onclick="DeleteData(this)" /></td>';
                    upRow += '<td>' + username + '</td><td>' + pwd + '</td><td>' + note + '</td>'
                    $(e).parent().parent().html(upRow);
                } else { alert("修改失敗！"); }
            }
        });
    }
    function ResUpdateData(e) {
        var userid = $(e).data("code");
        var username = $(e).parent().parent().find("td").find("#txtusername").val();
        var pwd = $(e).parent().parent().find("td").find("#txtpwd").val();
        var note = $(e).parent().parent().find("td").find("#txtnote").val();
        var upRow = '<td><input type="button" data-code="' + userid + '" value="更新" onclick="UpdateData(this)" />';
        upRow += '<input type="button" data-code="' + userid + '" value=" 刪除" onclick="DeleteData(this)" /></td>';
        upRow += '<td>' + username + '</td><td>' + pwd + '</td><td>' + note + '</td>'
        $(e).parent().parent().html(upRow); 
    }

    function DeleteData(e) {
        var userid = $(e).data("code"); $.ajax({
            type: "POST",
            dataType: "JSON",
            //cache: false,
            //naync: false,
            url: "IndexHandler.ashx?Type=DeleteData",
            data: { "userid": userid},
            success: function (num) {
                if (parseInt($.trim(num)) > 0) {
                    alert("刪除成功！");
                    $(e).parent().parent().html('');
                } else { alert("刪除失敗！"); }
            }
        });
    }
</script>

效果圖

通過練習此項目可以對ajax的運用更加熟練 

jQuery ：遍歷JSON數據 $.each(data,function(index,item){});

獲取指定行td的值：$(this).parent().Parent().find(td).eq(1).html();

添加table行：$("#UserData tr").eq(0).beford(newrow);

JQuery函數：$.trim(' ad')