通过ajax向sql数据库插入、修改数据，并获取从.net后台传回的信息（涉及Ajax，webservice，js，xml）

最新推荐文章于 2022-11-28 22:14:50 发布

原创最新推荐文章于 2022-11-28 22:14:50 发布 · 3.1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#.NET #c# #javascript #ajaxxml #webservice

本文介绍了一个使用C# Web窗体和Ajax技术的商品信息编辑页面实现方法。通过客户端HTML页面与服务器端交互，实现了商品信息的增加、修改和删除功能。

编写时间：2017/12/28

先介绍一下环境。我用的是vs2017，SQL server2017，浏览器火狐和Microsoft edge，其他的浏览器应该也行。涉及到的技术有c#，js（jQuery），Ajax，xml，除c#建议在微软技术文档中心学习外，其它的都可以在w3school进行简单的学习。下面正式开始。本实验的目的是创建商品信息的编辑页面。下图是文件结构：

目的是在浏览器实现商品信息的增加，修改，删除。数据传输的方式是Ajax、wbeservice，拒绝使用表单提交数据，因为这中页面用表单提交总是要不断地刷新的，体验不好。

首先创建客户端HTML页面，我用的是c#web窗体页面，文件名为Default.aspx,代码如下（用了一点vs的控件，比较简单不多说）：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type ="text/css">
        body{
            margin:30px auto;
             width:80%;
        }
        #div1{float:left;}
        caption {background-color:#cdcdcd;}
        th,td {
            padding:5px 10px;
        }
        #table1{
            border-width:1px;
            border-style:solid;
        }

        #form1 {
            width:400px;
            margin-left:10px;
            float:left;
            border-width:1px;
            border-style:solid;
        }
        .td1 {
            width:100px;
            text-align:right;
        }
        .td2 {width:300px;}
        #Button5,#Button6,#Button3{margin:20px;}
        .edit, .delet {
            cursor:pointer;
            color:blue;
        }
        #Button4,#hideDiv,#Button1,#Button2 {display:none;}
    </style>
</head>
<body>
    <div id="div1" runat ="server">
        <table id="table1" runat ="server">
            <caption>销售表</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>生日</th>
                <th>生产编号</th>
                <th>数量</th>
                <th>价格</th>
                <th>操作</th>
                <th>  </th>
            </tr>
        </table>
    </div>
    <form id="form1" runat="server" method ="post">
        <div>
            <table>
                <tr>
                    <td class ="td1">ID</td>
                    <td class ="td2" runat ="server">
                        <asp:TextBox ID="editId" runat="server" ReadOnly ="true" BorderStyle="None">--自动生成--</asp:TextBox></td>
                </tr>
                <tr>
                    <td class ="td1">Name</td>
                    <td class ="td2">
                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td class ="td1">Sex</td>
                    <td class ="td2">
                       
                        <input id="RadioButton1" type="radio" name="Sex" value ="rd1"/><label for="RadioButton1">男</label>
                        <input id="RadioButton2" type="radio" name="Sex" value ="rd2"/><label for="RadioButton2">女</label>
                    </td>
                </tr>
                <tr>
                    <td class ="td1">Birthday</td>
                    <td class ="td2">
                        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td class ="td1">ProductID</td>
                    <td class ="td2">
                        <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td class ="td1">Quantity</td>
                    <td class ="td2">
                        <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td class ="td1">Price</td>
                    <td class ="td2">
                        <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox></td>
                </tr>
            </table>
            <hr />
            <input id="Button5" type="button" value="增加" onclick ="myfunc('1')"/>
            <input id="Button6" type="button" value="修改" onclick ="myfunc('2')"/>
            <input id="Button3" type="button" value="取消"/>
        </div>
        

    </form>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
    <script type ="text/javascript" src ="JavaScript.js"></script>
</body>
</html>

然后在APP_Code文件下创建Class1.cs文件，用来编写自己的c#类，将类写在一个单独的文件中我认为是一个好习惯。介绍一下MyClass_1.GetData()方法，该方法的第一步是创建datatable对象；第二步是从数据库中取出数据，并附加到datatable中，第三步是将datatable中的数据读出，并使之成为符合HTML/xml格式的字符串，这个字符串就是本方法要return（返回）的内容——一个table表。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Web.UI.HtmlControls;
using System.Data;
using System.Text;
using System.Web.Services;
using System.Xml.Serialization;

/// <summary>
/// Class1 的摘要说明
/// </summary>
namespace myclass
{
    public class MyClass_1 
    {
        public static string GetData()
        {

            SqlConnection conn = new SqlConnection(@"Data Source=DESKTOP-USCN62E\SQLEXPRESS;Initial Catalog=last;Integrated Security=True");
            string sql = "select * from goods";
            SqlCommand cmd = new SqlCommand(sql, conn);
            DataTable table = new DataTable("goods");
            table.Columns.Add("ID");
            table.Columns.Add("姓名");
            table.Columns.Add("性别");
            table.Columns.Add("生日");
            table.Columns.Add("生产编号");
            table.Columns.Add("数量");
            table.Columns.Add("价格");
            table.Columns.Add("编辑");
            table.Columns.Add("删除");
            conn.Open();
            SqlDataReader reader = cmd.ExecuteReader(); 
            while (reader.Read())
            {
                //reader.GetOrdinal("id")是得到ID所在列的index,  
                //reader.GetInt32(int n)这是将第n列的数据以Int32的格式返回  
                //reader.GetString(int n)这是将第n列的数据以string 格式返回  
                int id = reader.GetInt32(reader.GetOrdinal("ID"));
                string name1 = reader.GetString(reader.GetOrdinal("NAME1"));
                string sex = reader.GetString(reader.GetOrdinal("SEX"));
                string birthday = reader.GetString(reader.GetOrdinal("BIRTHDAY"));
                int productid = reader.GetInt32(reader.GetOrdinal("PRODUCTID"));
                int quantity = reader.GetInt32(reader.GetOrdinal("QUANTITY"));
                double price = reader.GetDouble(reader.GetOrdinal("PRICE"));
                table.Rows.Add(id, name1, sex, birthday, productid, quantity, price, "编辑", "删除");
            }
            reader.Close();
            conn.Close();
            
            //获取datatable中的内容并输出为HTML/xml字符串
            StringBuilder strHTMLBuilder = new StringBuilder();
            strHTMLBuilder.Append(" <table id='table1' runat ='server'><caption>销售表</caption>");
            strHTMLBuilder.Append("<tr>");
            foreach (DataColumn myColumn in table.Columns)
            {
                strHTMLBuilder.Append("<th >");
                strHTMLBuilder.Append(myColumn.ColumnName);
                strHTMLBuilder.Append("</th>");

            }
            strHTMLBuilder.Append("</tr>");

            int j = 100;
            foreach (DataRow myRow in table.Rows)
            {
                int i = 0;
                strHTMLBuilder.Append("<tr >");
                foreach (DataColumn myColumn in table.Columns)
                {
                    strHTMLBuilder.Append("<td id = 'row"+j+"cell"+i+"'>");
                    if(i == 7) { strHTMLBuilder.Append("<span class ='edit'> 编辑</span>"); }
                    else if(i == 8) { strHTMLBuilder.Append("<span class ='delet'>删除</span>"); }
                    else { strHTMLBuilder.Append(myRow[myColumn.ColumnName].ToString()); }
                    strHTMLBuilder.Append("</td>");
                    i++;

                }
                strHTMLBuilder.Append("</tr>");
                j++;
            }
            strHTMLBuilder.Append("</table>");

            string Htmltext = strHTMLBuilder.ToString();
            return Htmltext;
        }
    }
}

这个方法的第一次调用是在Default.aspx.cs中的Page_Load中，代码和实现的表格效果如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Web.UI.HtmlControls;
using myclass;


public partial class _Default : System.Web.UI.Page
{
    //页面加载时提取数据库中的记录并添加到表格中
    protected void Page_Load(object sender, EventArgs e)
    {
       string a = MyClass_1.GetData();
        div1.InnerHtml = a;
    }
}

下面我们要创建webservice.asms文件，这个文件附带一个webservice.cs文件自动创建在App_Code文件夹下。由上一张图大家可以明白“增加”和“修改”功能需要传送id，sex，birthday等数据，而”删除“功能只要有一个id就足以了，因此webservice.cs中创建两个类分别满足两种需求。第一个HeLloWorld方法接收8个变量，x值是1时执行数据插入、是2时执行数据修改，其它的变量是商品信息（数据插入时id自动生成）。最后都调用MyClass1.GetData()方法返回table字符串。第二个DoSome方法只接收id值并进行数据删除。下面就是webservice.cs的代码，.asms文件中的代码不用管。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using myclass;
using System.Data;
using System.Text;
using System.Data.SqlClient;

/// <summary>
/// WebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 
//[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

    public WebService()
    {

        //如果使用设计的组件，请取消注释以下行 
        //InitializeComponent(); 
    }

    [WebMethod]
    public string HelloWorld(string x, string y, string a, string b, string c, string d, string e, string f)
    {
        string name1 = a;
        string sex = b;
        string birthday = c;
        Int64 productid = Convert.ToInt64(d);
        Int64 quantity = Convert.ToInt64(e);
        double price = Convert.ToDouble(f);
        if (x == "1")
        {
            DateTime dt = DateTime.Now;
            int id = Convert.ToInt32(dt.ToString("ddHHmmss"));
            //连接数据库
            SqlConnection conn = new SqlConnection(@"Data Source=DESKTOP-USCN62E\SQLEXPRESS;Initial Catalog=last;Integrated Security=True");
            string sql = "insert into goods (ID, NAME1, SEX, BIRTHDAY, PRODUCTID, QUANTITY, PRICE) values ('" + id + "', '" + name1 + "', '" + sex + "', '" + birthday + "', '" + productid + "', '" + quantity + "', '" + price + "')";
            SqlCommand cmd = new SqlCommand(sql, conn);
            conn.Open();
            cmd.ExecuteNonQuery();
            conn.Close();
        }
        if (x == "2")
        {
            int id = Convert.ToInt32(y);
            //连接数据库
            SqlConnection conn = new SqlConnection(@"Data Source=DESKTOP-USCN62E\SQLEXPRESS;Initial Catalog=last;Integrated Security=True");
            string sql = "update goods set NAME1 = '" + name1 + "', SEX = '" + sex + "',BIRTHDAY = '" + birthday + "', PRODUCTID = '" + productid + "', QUANTITY = '" + quantity + "', PRICE = '" + price + "' where ID ='" + id + "'";
            SqlCommand cmd = new SqlCommand(sql, conn);
            conn.Open();
            cmd.ExecuteNonQuery();
            conn.Close();
        }
        string answer = MyClass_1.GetData().ToString();
        return answer;
    }

    [WebMethod]
    public string DoSome(string x)
    {
        int id = Convert.ToInt32(x);
        //连接数据库
        SqlConnection conn = new SqlConnection(@"Data Source=DESKTOP-USCN62E\SQLEXPRESS;Initial Catalog=last;Integrated Security=True");
        string sql = "delete from goods where ID = '" + id + "'";
        SqlCommand cmd = new SqlCommand(sql, conn);
        conn.Open();
        cmd.ExecuteNonQuery();
        conn.Close();
        string answer = MyClass_1.GetData().ToString();
        return answer;
    }
}

下面我们可以先看一下webservice是否能用，在浏览器中查看asmx文件，会出现这样的界面。

点击helloworld。

我输入了以上字段（提前已配置好数据库，且数据库中存在该记录。x为2要进行的是数据的更新），并调用该服务，返回的信息是xml格式的，如下：

如果返回了类似字符串就表明webservice配置成功。DoSome方法也一样。

下面就是编写js代码了，大家先看代码，我再来介绍。

//将表格中的内容搬运到表单中
'use strict';
$(".edit").live("click",function (e) {
	$("#Button5").attr('disabled',true);  
	var Like = $(e.target).parent().attr("id"); //通过e.target获取被点击的元素，与this不同
	var idLike = Like.substring(0, 10); // 从索引0开始到8（不包括8）
	var idLike0 = idLike + "0";
	var idLike1 = idLike + "1";
	var idLike2 = idLike + "2";
	var idLike3 = idLike + "3";
	var idLike4 = idLike + "4";
	var idLike5 = idLike + "5";
	var idLike6 = idLike + "6";

	document.getElementById("editId").value = document.getElementById(idLike0).innerText;
	document.getElementById("TextBox2").value = document.getElementById(idLike1).innerText;
	var radio_1 = document.getElementById("RadioButton1");
	var radio_2 = document.getElementById("RadioButton2");
	if (document.getElementById(idLike2).innerText === "男") {
		$(radio_1).attr("checked", "checked");
	}
	if (document.getElementById(idLike2).innerText === "女") {
		$(radio_2).attr("checked", "checked");
	}
	document.getElementById("TextBox4").value = document.getElementById(idLike3).innerText;
	document.getElementById("TextBox5").value = document.getElementById(idLike4).innerText;
	document.getElementById("TextBox6").value = document.getElementById(idLike5).innerText;
	document.getElementById("TextBox7").value = document.getElementById(idLike6).innerText;
});


function myfunc(x) {
    $("#Button5").attr('disabled', false); 
	var y = $("#editId").val();
	var a = $("#TextBox2").val();
	var b;
    if ($("#RadioButton1").attr("checked") == true) {
		b = "男";
	}
    if ($("#RadioButton2").attr("checked") == true) {
		b = "女";
	}
	var c = $("#TextBox4").val();
	var d = $("#TextBox5").val();
	var e = $("#TextBox6").val();
	var f = $("#TextBox7").val();

	$.ajax({

		url: "WebService.asmx/HelloWorld", //发送到本页面后台AjaxMethod方法
		type: "POST",
		dataType: "text/xml",
		async: true, //async翻译为异步的，false表示同步，会等待执行完成，true为异步
		//contentType: "application/json; charset=utf-8", //不可少
		data: {
			x: x,
			y: y,
			a: a,
			b: b,
			c: c,
			d: d,
			e: e,
			f: f
		},
		success: function (data) {

			//将返回的xml信息转义
			var str = data;
			var reg = /</g;
			str = str.replace(reg, '<');
			reg = />/g;
			str = str.replace(reg, '>');
			reg = /&/g;
			str = str.replace(reg, '&');
			reg = /'/g;
			str = str.replace(reg, "'");
			reg = /"/g;
			str = str.replace(reg, '"');

			var myStr = "<table id ='table1'><caption>销售表</caption><tr><th>ID</th><th>姓名</th><th>性别</th><th>生日</th><th>生产编号</th><th>数量</th><th>价格</th><th>编辑</th><th>删除</th></tr>";
			var z = $(str).find("tr");
			for (var i = 1; i < z.length; i++) {
				myStr += "<tr>";
				var v = $(z[i]).find("td");
				for (var j = 0; j < v.length; j++) {
					var text, attri, attribu;
					if (j == 7 || j == 8) {
						attri = v[j].getAttribute("id");
						text = $(v[j]).find("span").text();
						attribu = $(v[j]).find("span").attr("class");
						myStr += "<td id ='" + attri + "'><span class='"+attribu+"'>";
						myStr += text;
						myStr += "</td>";
					} else {
						text = v[j].childNodes[0].nodeValue;
						attri = v[j].getAttribute("id");
						myStr += "<td id ='" + attri + "'>";
						myStr += text;
						myStr += "</td>";
					}
				}
				myStr += "</tr>";
			}
			myStr += "</table>";
			$("#div1").html(myStr);
			//document.getElementById("div1").innerHTML = myStr;
		},
		error: function (XMLHttpRequest, textStatus, errorThrown) {
			alert(XMLHttpRequest.status);
			alert(XMLHttpRequest.readyState);
			alert(textStatus);
		}
	});
	clear();
}

//live方法实时监测html，耗用资源
$(".delet").live("click",function (e) {
	var Like = $(e.target).parent().attr("id"); //通过e.target获取被点击的元素，与this不同
	var idLike = Like.substring(0, 10); // 从索引0开始到8（不包括8）
	var idLike0 = idLike + "0";
	var x = document.getElementById(idLike0).innerText;
		$.ajax({
		url: "WebService.asmx/DoSome", //发送到本页面后台AjaxMethod方法
		type: "POST",
		dataType: "text/xml",
		async: true, //async翻译为异步的，false表示同步，会等待执行完成，true为异步
		//contentType: "application/json; charset=utf-8", //不可少
		data: {
			x: x
		},
		success: function (data) {

			//将返回的xml信息转义
			var str = data;
			var reg = /</g;
			str = str.replace(reg, '<');
			reg = />/g;
			str = str.replace(reg, '>');
			reg = /&/g;
			str = str.replace(reg, '&');
			reg = /'/g;
			str = str.replace(reg, "'");
			reg = /"/g;
			str = str.replace(reg, '"');

			var myStr = "<table id ='table1'><caption>销售表</caption><tr><th>ID</th><th>姓名</th><th>性别</th><th>生日</th><th>生产编号</th><th>数量</th><th>价格</th><th>编辑</th><th>删除</th></tr>";
			var z = $(str).find("tr");
			for (var i = 1; i < z.length; i++) {
				myStr += "<tr>";
				var v = $(z[i]).find("td");
				for (var j = 0; j < v.length; j++) {
					var text, attri, attribu;
					if (j == 7 || j == 8) {
						attri = v[j].getAttribute("id");
						text = $(v[j]).find("span").text();
						attribu = $(v[j]).find("span").attr("class");
						myStr += "<td id ='" + attri + "'><span class='"+attribu+"'>";
						myStr += text;
						myStr += "</td>";
					} else {
						text = v[j].childNodes[0].nodeValue;
						attri = v[j].getAttribute("id");
						myStr += "<td id ='" + attri + "'>";
						myStr += text;
						myStr += "</td>";
					}
				}
				myStr += "</tr>";
			}
			myStr += "</table>";

			document.getElementById("div1").innerHTML = myStr;
		},
		error: function (XMLHttpRequest, textStatus, errorThrown) {
			alert(XMLHttpRequest.status);
			alert(XMLHttpRequest.readyState);
			alert(textStatus);
		}
	});
});


$("#Button3").click(function () {
    $("#Button5").attr('disabled', false); 
	clear();
});


function clear(){
	document.getElementById("editId").value = "--自动生成--";
	document.getElementById("TextBox2").value = "";
	document.getElementById("RadioButton1").setAttribute("checked", false);
	document.getElementById("RadioButton2").setAttribute("checked", false);
	document.getElementById("TextBox4").value = "";
	document.getElementById("TextBox5").value = "";
	document.getElementById("TextBox6").value = "";
	document.getElementById("TextBox7").value = "";
}

js中第一大块代码所要做的任务是：当用户点击编辑按钮时把表格中该行的数据搬移到右边的表单中（参考前面的前台图片），并且增加按钮失效。第二大块代码的任务是：当用户点击增加，或者修改按钮时激发该函数，首先将传入的参数（1或者2）及从表单中获取的信息通过Ajax的方法传送给webservice中的helloworld方法，返回的数据是被转义过的xml信息，类似下面:

需要对其转换为正常格式，然后再提取其中的内容生成html格式的字符串，填充进页面中。动态添加的数据需要用实时监测的方法才能有效激发函数，因此我在第一块代码中使用了live方法来实时监测edit元素（原理我也有点模糊，大家百度吧），结尾调用或编写的clear函数清除表单内容。第三块代码与第二块类似，不再赘述。

好了至此本实验就结束了，在浏览器中可以随意的操纵数据库的内容（千万别太随意，表单中的内容一定要符合数据库的格式要求，最好再做个验证）。

谢谢大家！希望能对你有所帮助！