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

时间:2016-02-22 20:22:02

标签: javascript c# asp.net database code-behind

我创建了一个JavaScript按钮,它将在客户端浏览器上添加4个文本框和一个fileupload控件。他们可以根据需要添加尽可能多的这些内容。

我现在的问题是在提交按钮上如何循环浏览这些控件以获取要放入数据库的值?

的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>

1 个答案:

答案 0 :(得分: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 ..

如果您可以在没有这些字段的情况下提交,请检查null:

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...
}