asp.net中利用ajax获取动态创建表中文本框的值

时间:2022-06-20 13:29:56

假设现在主表为公司表(公司ID,公司名称,公司类型,公司规模),从表为部门表(部门ID,公司ID,经理,联系电话),现在一个公司有四个部门,要在同一个页面上录入公司信息以及四个部门的信息,如何动态创建部门信息录入口,以及如何获取数据存储到数据库中,请看下面的代码。 
页面HTML代码及js脚本 
代码 

复制代码代码如下:


<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebApp._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>Untitled Page</title> 
<script language="javascript" type="text/javascript"> 
function addRow() 

var tbl = document.getElementById("tbl"); 
var rows = tbl.rows.length; 
var tr = tbl.insertRow(rows); 
var td; 
for(var i=0;i<4;i++) 

td = tr.insertCell(i); 
if(i==3) 
td.innerHTML = "<a id='a"+rows+"' href='#' onclick='delRow(this)'>删除</a>"; 
else 
td.innerHTML = "<input id='txt"+rows+i+"' type='text' />"; 


function delRow(obj) 

var tbl = document.getElementById("tbl"); 
tbl.deleteRow(obj.parentNode.parentNode.rowIndex); 

function getPageData() 

var companyName = document.getElementById("txtCompanyName"); 
var companySize = document.getElementById("txtCompanySize"); 
var companyType = document.getElementById("ddlCompanyType"); 
var tbl = document.getElementById("tbl"); 
var txt; 
var datas = new Array(tbl.rows.length-1); 
for(var i=1;i<tbl.rows.length;i++) 

txt = tbl.rows[i].getElementsByTagName("input"); 
datas[i-1] = txt[0].value +","+ txt[1].value+","+ txt[2].value; 

PageMethods.GetData(companyName.value,companySize.value,companyType.options[companyType.selectedIndex].value, datas, showResult); 

function showResult(msg) 

alert(msg); 

</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager> 
<table> 
<tr> 
<td> 
公司名称:</td> 
<td> 
<asp:TextBox ID="txtCompanyName" runat="server"></asp:TextBox></td> 
<td> 
公司规模:</td> 
<td> 
<asp:TextBox ID="txtCompanySize" runat="server"></asp:TextBox></td> 
<td> 
公司类型:</td> 
<td> 
<asp:DropDownList ID="ddlCompanyType" runat="server"> 
</asp:DropDownList></td> 
</tr> 
</table> 
<input id="btnAddRow" type="button" value="新增一行" onclick="addRow();" /> 
<table id="tbl"> 
<tr> 
<td> 
部门</td> 
<td> 
电话</td> 
<td> 
经理</td> 
<td> 
</td> 
</tr> 
<tr> 
<td> 
<input id="txt10" type="text" /></td> 
<td> 
<input id="txt11" type="text" /></td> 
<td> 
<input id="txt12" type="text" /></td> 
<td> 
<a id="a1" href='#' onclick="delRow(this)">删除</a></td> 
</tr> 
</table> 
<input id="btnOK" type="button" value="确定" onclick="getPageData();" /> 
<br /> 
</form> 
</body> 
</html> 


后置代码 
代码 

复制代码代码如下:


using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Collections.Generic; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Text; 
using System.Web.UI.HtmlControls; 
namespace WebApp 

public partial class _Default : System.Web.UI.Page 

protected void Page_Load(object sender, EventArgs e) 

if (!IsPostBack) 

//绑定公司类型 
ddlCompanyType.Items.Add(new ListItem("国营企业", "1")); 
ddlCompanyType.Items.Add(new ListItem("民营企业", "2")); 
ddlCompanyType.Items.Add(new ListItem("外资企业", "3")); 
ddlCompanyType.SelectedValue = "1"; 


[System.Web.Services.WebMethod] 
public static string GetData(string companyName, string companySize, string companyType, string[] depts) 

StringBuilder buider = new StringBuilder();//显示一下提取到的数据 
buider.AppendLine(string.Format("公司名称:{0}", companyName)); 
buider.AppendLine(string.Format("公司规模:{0}", companySize)); 
buider.AppendLine(string.Format("公司性质:{0}", companyType)); 
CompanyInfo info = new CompanyInfo(companyName, companySize, companyType);//将数据插入到公司实体对象中 
List<DepartmentInfo> infos = new List<DepartmentInfo>(); 
DepartmentInfo info1 = null; 
string[] temp; 
for (int i = 0; i < depts.Length; i++) 

temp = depts[i].Split(new char[] { ',' }); 
buider.AppendLine(string.Format("部门:{0},经理:{1},电话:{2}", temp[0], temp[1], temp[2])); 
info1 = new DepartmentInfo(); 
info1.DeptName = temp[0]; 
info1.Mamanger = temp[1]; 
info1.Phone = temp[2]; 
infos.Add(info1);//将数据插入到部门实体对象List集合中 

//数据提取出来插入到数据库就是很简单的事情了。 
  
return buider.ToString(); 


public class CompanyInfo 

private string _companyName; 
private string _companySize; 
private string _companyType; 
public string CompanyType 

get { return _companyType; } 
set { _companyType = value; } 

public string CompanyName 

get { return _companyName; } 
set { _companyName = value; } 

public string CompanySize 

get { return _companySize; } 
set { _companySize = value; } 

public CompanyInfo() 
{ } 
public CompanyInfo(string companyName,string companySize,string companyType) 

this._companyName = companyName; 
this._companySize = companySize; 
this._companyType = companyType; 


public class DepartmentInfo 

private string _deptName; 
private string _mamanger; 
private string _phone; 
public string Phone 

get { return _phone; } 
set { _phone = value; } 

public string Mamanger 

get { return _mamanger; } 
set { _mamanger = value; } 

public string DeptName 

get { return _deptName; } 
set { _deptName = value; } 

public DepartmentInfo() 




首先是用JS实现动态新增一行、删除指定行的操作,然后利用AJAX的PageMethod方式,调用后台代码实现数据提取,然后把数据装载到公司实体对象与部门实体对象集合中,提交到数据库(这部分没有去实现,不用多说了,大家都会)。其中需要注意几个方面 
、必须在 ScriptManager 设置 EnablePageMethods="true",这样才能使用PageMethod方式 
、在JS中调用的服务端函数必须加上[System.Web.Services.WebMethod] 
其它的代码太简单,就不用一一说明。