asp.net 中利用ajax获取动态创建表中文本框的值
通常在做主从表的数据录入中，会碰到在一个页面上同时录入主表数据和从表数据，主表的数据只有一条，从表的数据有一条到多条，这样就要动态创建从表数据录入入口。
假设现在主表为公司表(公司ID，公司名称，公司类型，公司规模)，从表为部门表（部门ID，公司ID，经理，联系电话），现在一个公司有四个部门，要在同一个页面上录入公司信息以及四个部门的信息，如何动态创建部门信息录入口，以及如何获取数据存储到数据库中，请看下面的代码。
页面HTML代码及js脚本
代码
1 <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebApp._Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title>Untitled Page</title>
7
8 <script language="javascript" type="text/javascript">
9 function addRow()
10 {
11 var tbl = document.getElementById("tbl");
12 var rows = tbl.rows.length;
13
14 var tr = tbl.insertRow(rows);
15 var td;
16 for(var i=0;i<4;i++)
17 {
18 td = tr.insertCell(i);
19 if(i==3)
20 td.innerHTML = "<a id='a"+rows+"' href='#' onclick='delRow(this)'>删除</a>";
21 else
22 td.innerHTML = "<input id='txt"+rows+i+"' type='text' />";
23 }
24 }
25 function delRow(obj)
26 {
27 var tbl = document.getElementById("tbl");
28 tbl.deleteRow(obj.parentNode.parentNode.rowIndex);
29 }
30 function getPageData()
31 {
32 var companyName = document.getElementById("txtCompanyName");
33 var companySize = document.getElementById("txtCompanySize");
34 var companyType = document.getElementById("ddlCompanyType");
35 var tbl = document.getElementById("tbl");
36 var txt;
37 var datas = new Array(tbl.rows.length-1);
38 for(var i=1;i<tbl.rows.length;i++)
39 {
40 txt = tbl.rows[i].getElementsByTagName("input");
41 datas[i-1] = txt[0].value +","+ txt[1].value+","+ txt[2].value;
42 }
43
44 PageMethods.GetData(companyName.value,companySize.value,companyType.options[companyType.selectedIndex].value, datas, showResult);
45 }
46 function showResult(msg)
47 {
48 alert(msg);
49 }
50 </script>
51
52 </head>
53 <body>
54 <form id="form1" runat="server">
55 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
56 <table>
57 <tr>
58 <td>
59 公司名称：</td>
60 <td>
61 <asp:TextBox ID="txtCompanyName" runat="server"></asp:TextBox></td>
62 <td>
63 公司规模：</td>
64 <td>
65 <asp:TextBox ID="txtCompanySize" runat="server"></asp:TextBox></td>
66 <td>
67 公司类型：</td>
68 <td>
69 <asp:DropDownList ID="ddlCompanyType" runat="server">
70 </asp:DropDownList></td>
71 </tr>
72 </table>
73 <input id="btnAddRow" type="button" value="新增一行" onclick="addRow();" />
74 <table id="tbl">
75 <tr>
76 <td>
77 部门</td>
78 <td>
79 电话</td>
80 <td>
81 经理</td>
82 <td>
83 </td>
84 </tr>
85 <tr>
86 <td>
87 <input id="txt10" type="text" /></td>
88 <td>
89 <input id="txt11" type="text" /></td>
90 <td>
91 <input id="txt12" type="text" /></td>
92 <td>
93 <a id="a1" href='#' onclick="delRow(this)">删除</a></td>
94 </tr>
95 </table>
96 <input id="btnOK" type="button" value="确定" onclick="getPageData();" />
97 <br />
98 </form>
99 </body>
100 </html>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title>Untitled Page</title>
7
8 <script language="javascript" type="text/javascript">
9 function addRow()
10 {
11 var tbl = document.getElementById("tbl");
12 var rows = tbl.rows.length;
13
14 var tr = tbl.insertRow(rows);
15 var td;
16 for(var i=0;i<4;i++)
17 {
18 td = tr.insertCell(i);
19 if(i==3)
20 td.innerHTML = "<a id='a"+rows+"' href='#' onclick='delRow(this)'>删除</a>";
21 else
22 td.innerHTML = "<input id='txt"+rows+i+"' type='text' />";
23 }
24 }
25 function delRow(obj)
26 {
27 var tbl = document.getElementById("tbl");
28 tbl.deleteRow(obj.parentNode.parentNode.rowIndex);
29 }
30 function getPageData()
31 {
32 var companyName = document.getElementById("txtCompanyName");
33 var companySize = document.getElementById("txtCompanySize");
34 var companyType = document.getElementById("ddlCompanyType");
35 var tbl = document.getElementById("tbl");
36 var txt;
37 var datas = new Array(tbl.rows.length-1);
38 for(var i=1;i<tbl.rows.length;i++)
39 {
40 txt = tbl.rows[i].getElementsByTagName("input");
41 datas[i-1] = txt[0].value +","+ txt[1].value+","+ txt[2].value;
42 }
43
44 PageMethods.GetData(companyName.value,companySize.value,companyType.options[companyType.selectedIndex].value, datas, showResult);
45 }
46 function showResult(msg)
47 {
48 alert(msg);
49 }
50 </script>
51
52 </head>
53 <body>
54 <form id="form1" runat="server">
55 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
56 <table>
57 <tr>
58 <td>
59 公司名称：</td>
60 <td>
61 <asp:TextBox ID="txtCompanyName" runat="server"></asp:TextBox></td>
62 <td>
63 公司规模：</td>
64 <td>
65 <asp:TextBox ID="txtCompanySize" runat="server"></asp:TextBox></td>
66 <td>
67 公司类型：</td>
68 <td>
69 <asp:DropDownList ID="ddlCompanyType" runat="server">
70 </asp:DropDownList></td>
71 </tr>
72 </table>
73 <input id="btnAddRow" type="button" value="新增一行" onclick="addRow();" />
74 <table id="tbl">
75 <tr>
76 <td>
77 部门</td>
78 <td>
79 电话</td>
80 <td>
81 经理</td>
82 <td>
83 </td>
84 </tr>
85 <tr>
86 <td>
87 <input id="txt10" type="text" /></td>
88 <td>
89 <input id="txt11" type="text" /></td>
90 <td>
91 <input id="txt12" type="text" /></td>
92 <td>
93 <a id="a1" href='#' onclick="delRow(this)">删除</a></td>
94 </tr>
95 </table>
96 <input id="btnOK" type="button" value="确定" onclick="getPageData();" />
97 <br />
98 </form>
99 </body>
100 </html>
后置代码
代码
1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Collections.Generic;
6 using System.Web;
7 using System.Web.Security;
8 using System.Web.UI;
9 using System.Web.UI.WebControls;
10 using System.Text;
11 using System.Web.UI.HtmlControls;
12
13 namespace WebApp
14 {
15 public partial class _Default : System.Web.UI.Page
16 {
17 protected void Page_Load(object sender, EventArgs e)
18 {
19 if (!IsPostBack)
20 {
21 //绑定公司类型
22 ddlCompanyType.Items.Add(new ListItem("国营企业", "1"));
23 ddlCompanyType.Items.Add(new ListItem("民营企业", "2"));
24 ddlCompanyType.Items.Add(new ListItem("外资企业", "3"));
25 ddlCompanyType.SelectedValue = "1";
26 }
27
28 }
29 [System.Web.Services.WebMethod]
30 public static string GetData(string companyName, string companySize, string companyType, string[] depts)
31 {
32 StringBuilder buider = new StringBuilder();//显示一下提取到的数据
33 buider.AppendLine(string.Format("公司名称：{0}", companyName));
34 buider.AppendLine(string.Format("公司规模：{0}", companySize));
35 buider.AppendLine(string.Format("公司性质：{0}", companyType));
36
37 CompanyInfo info = new CompanyInfo(companyName, companySize, companyType);//将数据插入到公司实体对象中
38 List<DepartmentInfo> infos = new List<DepartmentInfo>();
39 DepartmentInfo info1 = null;
40 string[] temp;
41 for (int i = 0; i < depts.Length; i++)
42 {
43 temp = depts[i].Split(new char[] { ',' });
44 buider.AppendLine(string.Format("部门：{0}，经理：{1}，电话：{2}", temp[0], temp[1], temp[2]));
45 info1 = new DepartmentInfo();
46 info1.DeptName = temp[0];
47 info1.Mamanger = temp[1];
48 info1.Phone = temp[2];
49 infos.Add(info1);//将数据插入到部门实体对象List集合中
50 }
51 //数据提取出来插入到数据库就是很简单的事情了。
52
53 return buider.ToString();
54 }
55 }
56
57 public class CompanyInfo
58 {
59 private string _companyName;
60 private string _companySize;
61 private string _companyType;
62
63 public string CompanyType
64 {
65 get { return _companyType; }
66 set { _companyType = value; }
67 }
68
69 public string CompanyName
70 {
71 get { return _companyName; }
72 set { _companyName = value; }
73 }
74
75 public string CompanySize
76 {
77 get { return _companySize; }
78 set { _companySize = value; }
79 }
80
81 public CompanyInfo()
82 { }
83
84 public CompanyInfo(string companyName,string companySize,string companyType)
85 {
86 this._companyName = companyName;
87 this._companySize = companySize;
88 this._companyType = companyType;
89 }
90 }
91
92 public class DepartmentInfo
93 {
94 private string _deptName;
95 private string _mamanger;
96 private string _phone;
97
98 public string Phone
99 {
100 get { return _phone; }
101 set { _phone = value; }
102 }
103
104 public string Mamanger
105 {
106 get { return _mamanger; }
107 set { _mamanger = value; }
108 }
109
110 public string DeptName
111 {
112 get { return _deptName; }
113 set { _deptName = value; }
114 }
115
116 public DepartmentInfo()
117 {
118 }
119 }
120 }
121
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Collections.Generic;
6 using System.Web;
7 using System.Web.Security;
8 using System.Web.UI;
9 using System.Web.UI.WebControls;
10 using System.Text;
11 using System.Web.UI.HtmlControls;
12
13 namespace WebApp
14 {
15 public partial class _Default : System.Web.UI.Page
16 {
17 protected void Page_Load(object sender, EventArgs e)
18 {
19 if (!IsPostBack)
20 {
21 //绑定公司类型
22 ddlCompanyType.Items.Add(new ListItem("国营企业", "1"));
23 ddlCompanyType.Items.Add(new ListItem("民营企业", "2"));
24 ddlCompanyType.Items.Add(new ListItem("外资企业", "3"));
25 ddlCompanyType.SelectedValue = "1";
26 }
27
28 }
29 [System.Web.Services.WebMethod]
30 public static string GetData(string companyName, string companySize, string companyType, string[] depts)
31 {
32 StringBuilder buider = new StringBuilder();//显示一下提取到的数据
33 buider.AppendLine(string.Format("公司名称：{0}", companyName));
34 buider.AppendLine(string.Format("公司规模：{0}", companySize));
35 buider.AppendLine(string.Format("公司性质：{0}", companyType));
36
37 CompanyInfo info = new CompanyInfo(companyName, companySize, companyType);//将数据插入到公司实体对象中
38 List<DepartmentInfo> infos = new List<DepartmentInfo>();
39 DepartmentInfo info1 = null;
40 string[] temp;
41 for (int i = 0; i < depts.Length; i++)
42 {
43 temp = depts[i].Split(new char[] { ',' });
44 buider.AppendLine(string.Format("部门：{0}，经理：{1}，电话：{2}", temp[0], temp[1], temp[2]));
45 info1 = new DepartmentInfo();
46 info1.DeptName = temp[0];
47 info1.Mamanger = temp[1];
48 info1.Phone = temp[2];
49 infos.Add(info1);//将数据插入到部门实体对象List集合中
50 }
51 //数据提取出来插入到数据库就是很简单的事情了。
52
53 return buider.ToString();
54 }
55 }
56
57 public class CompanyInfo
58 {
59 private string _companyName;
60 private string _companySize;
61 private string _companyType;
62
63 public string CompanyType
64 {
65 get { return _companyType; }
66 set { _companyType = value; }
67 }
68
69 public string CompanyName
70 {
71 get { return _companyName; }
72 set { _companyName = value; }
73 }
74
75 public string CompanySize
76 {
77 get { return _companySize; }
78 set { _companySize = value; }
79 }
80
81 public CompanyInfo()
82 { }
83
84 public CompanyInfo(string companyName,string companySize,string companyType)
85 {
86 this._companyName = companyName;
87 this._companySize = companySize;
88 this._companyType = companyType;
89 }
90 }
91
92 public class DepartmentInfo
93 {
94 private string _deptName;
95 private string _mamanger;
96 private string _phone;
97
98 public string Phone
99 {
100 get { return _phone; }
101 set { _phone = value; }
102 }
103
104 public string Mamanger
105 {
106 get { return _mamanger; }
107 set { _mamanger = value; }
108 }
109
110 public string DeptName
111 {
112 get { return _deptName; }
113 set { _deptName = value; }
114 }
115
116 public DepartmentInfo()
117 {
118 }
119 }
120 }
121
首先是用JS实现动态新增一行、删除指定行的操作，然后利用AJAX的PageMethod方式，调用后台代码实现数据提取，然后把数据装载到公司实体对象与部门实体对象集合中，提交到数据库（这部分没有去实现，不用多说了，大家都会）。其中需要注意几个方面
1、必须在 ScriptManager 设置 EnablePageMethods="true"，这样才能使用PageMethod方式
2、在JS中调用的服务端函数必须加上[System.Web.Services.WebMethod]
其它的代码太简单，就不用一一说明。
