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

Get input textbox values in the codebehind from the client

本文关键字：输入 文本 客户端 获取 取代码 隐藏      更新时间：2023-09-26

我创建了一个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>

要遍历 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...
}
相关文章：