动态添加控件 javascript Asp.net C#
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13989741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically add controls javascript Asp.net C#
提问by Saghir A. Khatri
I am trying to add controls on asp.net c# page, when user clicks on add another. I am using table and want to append controls in that table. Also let me know, How I will get controls values in code behind once form is submitted to server.
我正在尝试在 asp.net c# 页面上添加控件，当用户单击添加另一个控件时。我正在使用表并希望在该表中附加控件。也让我知道，一旦表单提交到服务器，我将如何在代码中获取控件值。
回答by Denys Wessels
Here's a jQuery example, hope it helps!
这是一个 jQuery 示例，希望对您有所帮助！
ASPX:
ASPX：
<head id="Head1" runat="server">
<title>Controls</title>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnAdd").click(function () {
var field = $("#field").val();
var input = "<input name='parameters' id='field' type='text' />";
var newRow = "<tr><td>" + field + "</td><td>" + input + "</td></tr>";
$('#controls').append(newRow);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="field" type="text" />
<input id="btnAdd" type="button" value="Add" />
<table id="controls" cellpadding="10" cellspacing="10">
</table>
<asp:Button ID="btnProcess" runat="server" Text="Process" OnClick="Process" />
</div>
</form>
</body>
Code behind
背后的代码
protected void Process(object sender, EventArgs e)
{
var parameters = Request.Form["parameters"];
if (parameters != null && parameters.Count() > 0)
{
//Now you have access to the textbox values,perform any additional processing
parameters.Split(',').ToList().
ForEach(p =>
{
Response.Write(p + "<br />");
});
}
}
And here's another if you want to do everything on the server.Problem with this approach is that when you adding controls dynamically they disappear on post back and you have to keep re-creating them in Page_Loadwhich will add substantial processing to your server, I would suggest sticking with the jQuery option
如果你想在服务器上做所有事情，这是另一个问题。这种方法的问题是，当你动态添加控件时，它们会在回发时消失，你必须不断重新创建它们，Page_Load这将为你的服务器增加大量处理，我会建议坚持使用 jQuery 选项
ASPX:
ASPX：
<asp:TextBox ID="txtFieldName" runat="server"></asp:TextBox>
<asp:Button ID="btnAddControl" runat="server" Text="Add" OnClick="Add" />
<asp:Table EnableViewState="true" CellPadding="2" CellSpacing="2" BorderWidth="2" BorderStyle="Solid" GridLines="Both" ID="table"
runat="server">
<asp:TableHeaderRow>
<asp:TableHeaderCell Text="Field" />
<asp:TableHeaderCell Text="Value" />
</asp:TableHeaderRow>
</asp:Table>
<asp:Button ID="btnPost" runat="server" Text="Post" OnClick="Post" />
Code behind:
后面的代码：
public List<string> rows = new List<string>();
protected void Page_Load(object sender, EventArgs e)
{
if (ViewState["Rows"] != null)
{
rows = (List<string>)ViewState["Rows"];
if (rows.Count > 0)
{
foreach (var row in rows)
{
TextBox textbox = new TextBox();
textbox.Width = 300;
table.Rows.Add(GetRow(row,textbox));
}
}
}
}
protected void Add(object sender, EventArgs e)
{
string row = txtFieldName.Text;
if (!String.IsNullOrEmpty(row))
{
rows.Add(txtFieldName.Text);
TextBox textbox = new TextBox();
textbox.Width = 300;
table.Rows.Add(GetRow(row, textbox));
ViewState["Rows"] = rows;
}
}
private TableRow GetRow(string text, WebControl txtName)
{
TableRow tr = new TableRow();
TableCell cell1 = new TableCell();
cell1.Text = text;
TableCell cell2 = new TableCell();
cell2.Controls.Add(txtName);
tr.Cells.Add(cell1);
tr.Cells.Add(cell2);
return tr;
}
protected void Post(object sender, EventArgs e)
{
if (table.Rows.Count > 0)
{
System.Diagnostics.Debugger.Break();
//i=1 because we want to skip the header row
for (int i = 1; i < table.Rows.Count; i++)
{
//Examine the values and do further processing...
string field = table.Rows[i].Cells[0].Text;
string value = ((TextBox)table.Rows[i].Cells[1].Controls[0]).Text;
}
}
}
回答by Jeff Watkins
If you're adding dynamic client side controls, they will be in the Request.Form object as values. You may iterate over the contents of this collection. Please note that the table would have to be contained within a form element otherwise they won't get posted.
如果您要添加动态客户端控件，它们将作为值出现在 Request.Form 对象中。您可以遍历此集合的内容。请注意，表格必须包含在表单元素中，否则它们不会被发布。
