Suppose the main table is now a company table (company ID, company name, company type, company size), from the table for the department table (Department ID, company ID, manager, contact telephone), now a company has four departments, to the same page input company information and four departments of information, how to dynamically create Department information input port, And how to get the data stored in the database, see the code below.
Page HTML code and JS script
Code
Copy Code code as follows:
<%@ 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>
<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>
<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= "Add one line" onclick= "AddRow ();"/>
<table id= "TBL" >
<tr>
<td>
Department </td>
<td>
Telephone </td>
<td>
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= "determines" onclick= "getpagedata ();"/>
<br/>
</form>
</body>
Post Code
Code
Copy Code code as follows:
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)
{
Binding company Type
DDLCOMPANYTYPE.ITEMS.ADD (New ListItem ("State Enterprise", "1"));
DDLCOMPANYTYPE.ITEMS.ADD (New ListItem ("Private Enterprise", "2"));
DDLCOMPANYTYPE.ITEMS.ADD (New ListItem ("Foreign 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 ()//show the extracted data
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);//Insert data into Company entity objects
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}, Manager: {1}, Tel: {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);//Insert data into Department entity object List Collection
}
It is easy to extract the 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 ()
{
}
}
}
The first is to use JS to implement dynamic new row, delete the operation of the specified row, and then use Ajax Pagemethod Way, call back code to achieve data extraction, and then load the data into the corporate entity object and Department entity object collection, submitted to the database (this part has not been implemented, needless to say, Everyone will). Several aspects need to be noted
, you must set enablepagemethods= "true" in ScriptManager to use the Pagemethod method
, the service-side function called in JS must be added [System.Web.Services.WebMethod]
The other code is too simple, no one by one instructions.
