ASP.NET AJAX动态创建表格输入部信息教程

在ASP.NET中，当需要处理动态创建的表单元素，如文本框，特别是与AJAX交互时，可以采用以下技术方案。在这个特定的例子中，我们要在同一个页面上录入公司及其多个部门的信息。以下是对给定代码和场景的详细解释： 首先，页面HTML代码和JavaScript脚本用于动态创建表格行，每个行包含部门的相关信息，如经理和联系电话。`addRow()`函数负责添加新行，而`delRow(obj)`函数则用于删除选定的行。这些功能通过在JavaScript中操作DOM（文档对象模型）实现。 ```html <table id="tbl"> <!-- 表格内容将在这里动态生成 --> </table> <script language="javascript" type="text/javascript"> function addRow() { // ... } function delRow(obj) { // ... } </script> ``` `addRow()`函数中，`tbl.insertRow(rows)`用于在表格的末尾插入一行，然后通过`tr.insertCell(i)`在新行中插入单元格。如果单元格位置是最后一个（即部门的联系电话），则插入一个删除链接；否则，插入一个文本输入框。 为了获取这些动态创建的文本框的值，我们可以使用AJAX技术，如jQuery的`$.ajax()`方法，向服务器发送异步请求，更新数据库。然而，给定的代码片段中没有包含这部分内容。通常，你需要在JavaScript中创建一个事件监听器，比如在提交按钮的点击事件中，调用一个函数来收集所有文本框的值，并通过AJAX发送到服务器。 ```javascript function getPageData() { var companyName = /* 获取公司名称的逻辑 */; // 遍历表格，获取所有部门信息 var departments = []; var tbl = document.getElementById('tbl'); for (var i = 1; i < tbl.rows.length; i++) { // 从第1行开始，因为第0行可能是表头 var department = {}; department.manager = tbl.rows[i].cells[0].getElementsByTagName('input')[0].value; department.phone = tbl.rows[i].cells[1].getElementsByTagName('input')[0].value; departments.push(department); } // 使用AJAX发送数据到服务器 $.ajax({ url: 'SaveDepartmentInfo.aspx', // 服务器端处理页面 type: 'POST', data: JSON.stringify({ companyName: companyName, departments: departments }), contentType: 'application/json; charset=utf-8', dataType: 'json', success: function(response) { // 处理服务器返回的结果 }, error: function(xhr, status, error) { // 错误处理 } }); } ``` 在服务器端，如ASP.NET，你需要一个接收这些数据并处理的页面，例如`SaveDepartmentInfo.aspx`。使用C#代码，你可以从`Request.Form`或`Request.InputStream`获取JSON数据，解码并填充到对应的类或结构体中，然后将这些信息保存到数据库。 ```csharp [WebMethod] public static void SaveDepartmentInfo(string companyName, Department[] departments) { // 解析JSON数据到强类型对象 JavaScriptSerializer serializer = new JavaScriptSerializer(); Company company = new Company { Name = companyName }; List<Department> parsedDepartments = serializer.Deserialize<List<Department>>(departments); // 存储到数据库的逻辑 using (var db = new YourDbContext()) { // 插入或更新公司信息 db.Companies.AddOrUpdate(company); db.SaveChanges(); // 插入部门信息 foreach (var department in parsedDepartments) { department.CompanyId = company.Id; db.Departments.Add(department); } db.SaveChanges(); } } public class Department { public int Id { get; set; } public int CompanyId { get; set; } public string Manager { get; set; } public string PhoneNumber { get; set; } } public class Company { public int Id { get; set; } public string Name { get; set; } // 公司其他属性... } ``` 这个示例展示了如何在ASP.NET中使用AJAX与动态创建的表单元素交互，以及如何将这些数据提交到服务器进行存储。确保在实际应用中，考虑数据验证、异常处理和安全性，如防止SQL注入等。