javascript - 从客户端获取代码隐藏中的输入文本框值

Question

我创建了一个 JavaScript 按钮，它将在客户端浏览器上添加 4 个文本框和一个文件上传控件。他们也可以根据需要添加任意数量的这些。

我现在的问题是提交按钮，我如何循环遍历这些控件以获取要放入我的数据库中的值？

JavaScript

<script type="text/javascript">
var rownum = 1;

function AddRow() {

  var div = document.createElement("div")

  var divid = "dv" + rownum
  div.setAttribute("ID", divid)
  rownum++

  var txtFName = document.createElement("input")
  txtFName.setAttribute("ID", "txtFName" + rownum)
  txtFName.placeholder = "First Name";
  txtFName.style.width = "190px";
  rownum++
  var txtLName = document.createElement("input")
  txtLName.setAttribute("ID", "txtLName" + rownum)
  txtLName.placeholder = "Last Name";
  txtLName.style.width = "190px";
  rownum++
  var txtEmail = document.createElement("input")
  txtEmail.setAttribute("ID", "txtEmail" + rownum)
  txtEmail.placeholder = "Email";
  txtEmail.style.width = "289px";
  rownum++
  var txtInst = document.createElement("input")
  txtInst.setAttribute("ID", "txtAge" + rownum)
  txtInst.placeholder = "Age";
  txtInst.style.width = "100px";
  rownum++
  var _upload = document.createElement("input")
  _upload.setAttribute("type", "file")
  _upload.setAttribute("ID", "upload" + rownum)
  _upload.setAttribute("runat", "server")
  _upload.setAttribute("name", "uploads" + rownum)      
  _upload.style.width = "610px";
  rownum++

  var btnRemove = document.createElement("input")
  btnRemove.type = "button";      
  btnRemove.setAttribute("onclick", "return RemoveDv('" + divid + "');");
  btnRemove.innerText = "Remove";
  rownum++

  var _pdiv = document.getElementById("ParentDiv")

  div.appendChild(document.createElement('br'))      
  div.appendChild(txtFName)      
  div.appendChild(txtLName)      
  div.appendChild(txtEmail)
  div.appendChild(document.createElement('br'))
  div.appendChild(txtInst)
  div.appendChild(document.createElement('br'))
  div.appendChild(_upload)
  div.appendChild(document.createElement('br'))
  div.appendChild(btnRemove)
  div.appendChild(document.createElement('br'))      
  _pdiv.appendChild(div)
}

function RemoveDv(obj) {
  var p = document.getElementById("ParentDiv")
  var chld = document.getElementById(obj)
  p.removeChild(chld)
}

ASP.aspx

<table width="100%" class="pagetext_10">
<tr>
    <td colspan="10">
      <input type="button" onclick="AddRow(); 
           return false;" value="Add Employees" />&nbsp;
      <div id="ParentDiv" style="width:100%;">
      </div><br /><br />          
    </td>
   </tr>    
</table>

Answer 1

要遍历 Request 对象中的所有值，请尝试:

foreach (string s in Request.Form.Keys )        
{       
   var formValue = Request.Form[s];      
}

只要您知道您的字段前缀，您就应该能够识别您的动态前缀。

---

如果您有固定的 12 个字段控件、3 个上传控件，而不是使用 JavaScript 创建表单字段，您可以显示/隐藏隐藏字段的服务器控件，然后这些值将在页面生命周期中正常可用。

如果未使用的用 display: none; 包裹在元素中，那么它们将不会被设置到服务器。

---

由于您只有 4 个动态字段，因此您可以直接从请求中读取它们:

var result1 = Request.Form("txtFName1");
// etc ..

如果您可以在没有这些字段的情况下提交，请检查是否为空:

if (Request.Form["txtFName1"] != null)
{
   // do stuff
}

如果按钮的数量是动态的，只要您也可以提交回该数字，您就应该能够循环访问。

然后您需要添加一个按钮来提交表单:

aspx:

<asp:Button id="Submit" Text="Submit" runat="server" OnClick="Submit_Click" />

代码隐藏:

public void Submit_Click(Object sender, EventArgs e)
{
    // ...do stuff...
}