asp.net USES ajax to get the value of the text box in the dynamically created table

2020-05-09 18:25:48
OfStack

ID hypothesis is now the main table for the company (company, company name, company type, company size), from the table for the department table (department ID, company ID, manager, contact phone number), now a company has four departments, with 1 page entry company information and four departments of information, how to dynamically create department information input, and how to get the data stored in the database, please see the following code.
Page HTML code and js script
code

 
<%@ 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)'> delete </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> 
 Company name: </td> 
<td> 
<asp:TextBox ID="txtCompanyName" runat="server"></asp:TextBox></td> 
<td> 
 Company size: </td> 
<td> 
<asp:TextBox ID="txtCompanySize" runat="server"></asp:TextBox></td> 
<td> 
 Company type: </td> 
<td> 
<asp:DropDownList ID="ddlCompanyType" runat="server"> 
</asp:DropDownList></td> 
</tr> 
</table> 
<input id="btnAddRow" type="button" value=" new 1 line " onclick="addRow();" /> 
<table id="tbl"> 
<tr> 
<td> 
 department </td> 
<td> 
 The phone </td> 
<td> 
 The manager </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)"> delete </a></td> 
</tr> 
</table> 
<input id="btnOK" type="button" value=" determine " onclick="getPageData();" /> 
<br /> 
</form> 
</body> 
</html>

Post code
code

 
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) 
{ 
// Bind company type  
ddlCompanyType.Items.Add(new ListItem(" State-owned enterprises ", "1")); 
ddlCompanyType.Items.Add(new ListItem(" The private enterprise ", "2")); 
ddlCompanyType.Items.Add(new ListItem(" The foreign capital enterprise ", "3")); 
ddlCompanyType.SelectedValue = "1"; 
} 
} 
[System.Web.Services.WebMethod] 
public static string GetData(string companyName, string companySize, string companyType, string[] depts) 
{ 
StringBuilder buider = new StringBuilder();// According to 1 The data extracted below  
buider.AppendLine(string.Format(" Company name: {0}", companyName)); 
buider.AppendLine(string.Format(" Company size: {0}", companySize)); 
buider.AppendLine(string.Format(" Company nature: {0}", companyType)); 
CompanyInfo info = new CompanyInfo(companyName, companySize, companyType);// Inserts the data into the corporate entity object  
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(" Department: {0} The manager: {1} , telephone: {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);// Inserts the data into the department entity object List In the collection  
} 
// It's easy to extract data and insert it into the database.  
　 
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() 
{ 
} 
} 
}

First, JS is used to dynamically add 1 line and delete the specified line. Then, AJAX's PageMethod method is used to call the background code to realize data extraction, and then the data is loaded into the collection of corporate entity objects and department entity objects, and submitted to the database (this part is not implemented, needless to say, everyone will). There are several aspects to note
, EnablePageMethods="true" must be set in ScriptManager to use PageMethod mode
, JS invokes the function of a service must be combined with [System. Web. Services. WebMethod]
The rest of the code is too simple to say 11.