asp.net中利用ajax获取动态创建表中文本框的值
2023-06-13 09:14:16 时间
假设现在主表为公司表(公司ID，公司名称，公司类型，公司规模)，从表为部门表（部门ID，公司ID，经理，联系电话），现在一个公司有四个部门，要在同一个页面上录入公司信息以及四个部门的信息，如何动态创建部门信息录入口，以及如何获取数据存储到数据库中，请看下面的代码。
页面HTML代码及js脚本
代码
复制代码代码如下:
页面HTML代码及js脚本
代码
<%@PageLanguage="C#"AutoEventWireup="true"Codebehind="Default.aspx.cs"Inherits="WebApp._Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>UntitledPage</title>
<scriptlanguage="javascript"type="text/javascript">
functionaddRow()
{
vartbl=document.getElementById("tbl");
varrows=tbl.rows.length;
vartr=tbl.insertRow(rows);
vartd;
for(vari=0;i<4;i++)
{
td=tr.insertCell(i);
if(i==3)
td.innerHTML="<aid="a"+rows+""href="#"onclick="delRow(this)">删除</a>";
else
td.innerHTML="<inputid="txt"+rows+i+""type="text"/>";
}
}
functiondelRow(obj)
{
vartbl=document.getElementById("tbl");
tbl.deleteRow(obj.parentNode.parentNode.rowIndex);
}
functiongetPageData()
{
varcompanyName=document.getElementById("txtCompanyName");
varcompanySize=document.getElementById("txtCompanySize");
varcompanyType=document.getElementById("ddlCompanyType");
vartbl=document.getElementById("tbl");
vartxt;
vardatas=newArray(tbl.rows.length-1);
for(vari=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);
}
functionshowResult(msg)
{
alert(msg);
}
</script>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server"EnablePageMethods="true"></asp:ScriptManager>
<table>
<tr>
<td>
公司名称：</td>
<td>
<asp:TextBoxID="txtCompanyName"runat="server"></asp:TextBox></td>
<td>
公司规模：</td>
<td>
<asp:TextBoxID="txtCompanySize"runat="server"></asp:TextBox></td>
<td>
公司类型：</td>
<td>
<asp:DropDownListID="ddlCompanyType"runat="server">
</asp:DropDownList></td>
</tr>
</table>
<inputid="btnAddRow"type="button"value="新增一行"onclick="addRow();"/>
<tableid="tbl">
<tr>
<td>
部门</td>
<td>
电话</td>
<td>
经理</td>
<td>
</td>
</tr>
<tr>
<td>
<inputid="txt10"type="text"/></td>
<td>
<inputid="txt11"type="text"/></td>
<td>
<inputid="txt12"type="text"/></td>
<td>
<aid="a1"href="#"onclick="delRow(this)">删除</a></td>
</tr>
</table>
<inputid="btnOK"type="button"value="确定"onclick="getPageData();"/>
<br/>
</form>
</body>
</html>
后置代码
代码
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Collections.Generic;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Text;
usingSystem.Web.UI.HtmlControls;
namespaceWebApp
{
publicpartialclass_Default:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
if(!IsPostBack)
{
//绑定公司类型
ddlCompanyType.Items.Add(newListItem("国营企业","1"));
ddlCompanyType.Items.Add(newListItem("民营企业","2"));
ddlCompanyType.Items.Add(newListItem("外资企业","3"));
ddlCompanyType.SelectedValue="1";
}
}
[System.Web.Services.WebMethod]
publicstaticstringGetData(stringcompanyName,stringcompanySize,stringcompanyType,string[]depts)
{
StringBuilderbuider=newStringBuilder();//显示一下提取到的数据
buider.AppendLine(string.Format("公司名称：{0}",companyName));
buider.AppendLine(string.Format("公司规模：{0}",companySize));
buider.AppendLine(string.Format("公司性质：{0}",companyType));
CompanyInfoinfo=newCompanyInfo(companyName,companySize,companyType);//将数据插入到公司实体对象中
List<DepartmentInfo>infos=newList<DepartmentInfo>();
DepartmentInfoinfo1=null;
string[]temp;
for(inti=0;i<depts.Length;i++)
{
temp=depts[i].Split(newchar[]{","});
buider.AppendLine(string.Format("部门：{0}，经理：{1}，电话：{2}",temp[0],temp[1],temp[2]));
info1=newDepartmentInfo();
info1.DeptName=temp[0];
info1.Mamanger=temp[1];
info1.Phone=temp[2];
infos.Add(info1);//将数据插入到部门实体对象List集合中
}
//数据提取出来插入到数据库就是很简单的事情了。
returnbuider.ToString();
}
}
publicclassCompanyInfo
{
privatestring_companyName;
privatestring_companySize;
privatestring_companyType;
publicstringCompanyType
{
get{return_companyType;}
set{_companyType=value;}
}
publicstringCompanyName
{
get{return_companyName;}
set{_companyName=value;}
}
publicstringCompanySize
{
get{return_companySize;}
set{_companySize=value;}
}
publicCompanyInfo()
{}
publicCompanyInfo(stringcompanyName,stringcompanySize,stringcompanyType)
{
this._companyName=companyName;
this._companySize=companySize;
this._companyType=companyType;
}
}
publicclassDepartmentInfo
{
privatestring_deptName;
privatestring_mamanger;
privatestring_phone;
publicstringPhone
{
get{return_phone;}
set{_phone=value;}
}
publicstringMamanger
{
get{return_mamanger;}
set{_mamanger=value;}
}
publicstringDeptName
{
get{return_deptName;}
set{_deptName=value;}
}
publicDepartmentInfo()
{
}
}
}
首先是用JS实现动态新增一行、删除指定行的操作，然后利用AJAX的PageMethod方式，调用后台代码实现数据提取，然后把数据装载到公司实体对象与部门实体对象集合中，提交到数据库（这部分没有去实现，不用多说了，大家都会）。其中需要注意几个方面
、必须在ScriptManager设置EnablePageMethods="true"，这样才能使用PageMethod方式
、在JS中调用的服务端函数必须加上[System.Web.Services.WebMethod]
其它的代码太简单，就不用一一说明。
相关文章
- Telerik RadControls for ASP.NET AJAX
- asp.net中DropDownList控件各种属性研究汇总
- 宝塔面板Linux系统通过Docker部署VB.NET Asp.Net Core WebAPI应用
- [接上篇]在Window10/11的Linux子系统Docker上部署VB.NET Asp.Net Core WebAPI应用
- ASP.NET WebForm也可以这样用Ajax（程序猿，你知道不）
- 基于ASP的MySQL数据库连接实现（asp连接数mysql）
- ASP.NET设计网络硬盘之文件夹实现
- asp.net下jqueryjason高效传输数据
- asp.net相关文章实现方法
- asp.net合并GridView中某列相同信息的行（单元格）
- ASP.NET(AJAX+JSON)实现对象调用
- asp.net获取某个时间段的星期并以表格形式排列出来
- 点击图片,AJAX删除后台图片文件的实现代码(asp.net)
- 答你所问.NET小常识方便学习asp.net的朋友
- Ajax+asp.net智能匹配检索（含图含完整代码）
- 浅析ASP.NET安全性分析(加强asp.net1.1/2.0安全性)
- iis配置asp.net常见问题解决方案
- asp.net中在用ajax格式传递数据到aspx页面时出现乱码
- ASP.NET中使用Ajax的方法
- ASP.NET中TextBox使用Ajax控件显示日期不全的问题解决方法
- asp.net读取excel文件的三种方法示例
- asp.net操作xml增删改示例分享
- ASP.NET如何获取两个日期之间的天数
- 设置ASP.NET页面的运行超时时间详细到单个页面及站点
- ASP.net全局程序文件Global.asax用法分析
- ASP.NET中MVC使用AJAX调用JsonResult方法并返回自定义错误信息
- ASP.NET使用TreeView显示文件的方法