asp.net中利用ajax获取动态创建表中文本框的值
程序员文章站
2024-03-07 23:13:21
假设现在主表为公司表(公司id，公司名称，公司类型，公司规模)，从表为部门表（部门id，公司id，经理，联系电话），现在一个公司有四个部门，要在同一个页面上录入公司信息以及...
假设现在主表为公司表(公司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]
其它的代码太简单，就不用一一说明。
页面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]
其它的代码太简单，就不用一一说明。