Dynamically add controls javascript Asp.net C#

Question

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.

Denys Wessels · Accepted Answer · 2013-02-02 18:54:11Z

Here's a jQuery example, hope it helps!

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

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

Emond · Accepted Answer · 2012-12-21 12:17:54Z

1

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.

edited Dec 21, 2012 at 12:17

Emond

50.8k11 gold badges86 silver badges118 bronze badges

answered Dec 21, 2012 at 12:00

Jeff Watkins

6,35718 silver badges19 bronze badges

4 Comments

Saghir A. Khatri Over a year ago

is it possible to add via server, i once did at client side. but here i want to do at serverside, so as i can get all values in codebehind

Jeff Watkins Over a year ago

Only as part of a repost, which is clunky from a UI perspective IMHO. By using Request.Form you can get the values in the codebehind.

Jeff Watkins Over a year ago

You could use update panels but they're effectively a dolled-up repost and cause a lot of waste server side.

Saghir A. Khatri Over a year ago

Yep thats wy i thought of javascript.

Collectives™ on Stack Overflow

Dynamically add controls javascript Asp.net C#

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related