动态添加控件javascript Asp.net C＃

Question

I am trying to add controls on asp.net c# page, when user clicks on add another. 我试图在asp.net c＃页面上添加控件，当用户点击时添加另一个。 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. 另请告诉我，一旦将表单提交给服务器，我将如何在代码中获取控件值。

Answer 1

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_Load which 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;
        }
    }
}

Answer 2

If you're adding dynamic client side controls, they will be in the Request.Form object as values. 如果要添加动态客户端控件，它们将作为值位于Request.Form对象中。 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. 请注意，该表必须包含在表单元素中，否则将不会发布。

动态添加控件javascript Asp.net C＃

问题描述

2 个解决方案

解决方案1
8 已采纳 2012-12-21 16:58:26

解决方案2
1 2012-12-21 12:00:38

动态添加控件javascript Asp.net C＃

问题描述

2 个解决方案

解决方案1 8 已采纳 2012-12-21 16:58:26

解决方案2 1 2012-12-21 12:00:38

解决方案1
8 已采纳 2012-12-21 16:58:26

解决方案2
1 2012-12-21 12:00:38