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

　　假设现在主表为公司表(公司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">

　　<title>Untitled Page</title>

　　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>

　　<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>

　　<tr>

　　<td>

　　部门</td>

　　<td>

　　电话</td>

　　<td>

　　经理</td>

　　<td>

　　</td>

　　</tr>

　　<tr>

　　<td>

　　<td>

　　<td>

　　<td>

　　</tr>

　　</table>

　　<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]

　　其它的代码太简单，就不用一一说明。

教程首页更多教程