ASP.NET AJAX动态创建表格获取文本框值及删除行示例

"ASP.NET中使用Ajax获取动态创建表格中输入框的值" 在ASP.NET开发中，有时候我们需要实现动态创建表单以便处理多条数据的录入，例如在一个页面上同时录入主表和从表的数据。这样的场景下，Ajax技术可以帮助我们实现实时更新和异步提交，提高用户体验。下面我们将详细探讨如何在ASP.NET中利用Ajax获取动态创建的表格中的文本框值，并将其存储到数据库中。 首先，让我们看下页面HTML代码和JavaScript脚本部分。在这个例子中，我们有一个名为"tbl"的表格，用于动态添加部门信息。通过调用`addRow()`函数，我们可以向表格中添加一行，包含四个单元格，每个单元格内都有一个文本框用于输入数据，最后一个单元格包含一个删除链接，用于移除该行。文本框的ID是动态生成的，如"txt0"、"txt1"等，以便于后续处理。 ```html <table id="tbl"> <!-- 表格内容将在这里动态生成 --> </table> <script language="javascript" type="text/javascript"> function addRow() { // 添加行的逻辑 } function delRow(obj) { // 删除行的逻辑 } </script> ``` 接下来，我们需要在后端（C#）处理这些动态生成的文本框的值。在ASP.NET中，可以通过`Request.Form`对象来获取POST请求中的表单数据。由于文本框的ID是动态生成的，因此我们需要遍历`Request.Form`集合来获取所有文本框的值。 ```csharp protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { // 获取所有文本框的值 for (int i = 0; i < Request.Form.Count; i++) { string key = Request.Form.AllKeys[i]; if (key.StartsWith("txt")) // 检查是否是我们的文本框 { string value = Request.Form[key]; // 处理每个文本框的值，例如存储到数据库 } } } } ``` 为了使用Ajax进行异步提交，我们可以使用jQuery库的`$.ajax`方法。在JavaScript中添加以下代码： ```javascript function submitData() { var data = {}; $('input[id^="txt"]').each(function () { data[this.id] = this.value; }); $.ajax({ url: 'SubmitData.aspx', // 后端处理页面 type: 'POST', contentType: 'application/json; charset=utf-8', data: JSON.stringify({ formData: data }), dataType: 'json', success: function (response) { alert('数据已成功提交!'); }, error: function (xhr, status, error) { alert('提交失败，请检查网络或服务器状态。'); } }); } ``` 这个`submitData`函数收集所有文本框的值，然后使用Ajax发送POST请求到后端处理页面`SubmitData.aspx`。后端接收到数据后，可以进一步处理并存储到数据库中。 总结来说，ASP.NET结合Ajax技术可以有效地处理动态创建的表单数据。通过JavaScript动态添加表格行，利用Ajax进行异步提交，然后在C#后端处理并存储数据。这种方法提高了用户体验，避免了页面的完整刷新，同时也方便地处理了动态生成的数据。