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

2020-01-18 00:54:51

字体：大中小

来源：转载

供稿：网友

假设现在主表为公司表(公司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]
其它的代码太简单，就不用一一说明。

上一篇：ASP.NET Sql Server安装向导（aspnet_regsql.exe）错误解决一例

下一篇：Asp.NET 生成静态页面并分页的代码