在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注入等。
我的内容管理
展开
