Dynamically add controls javascript Asp.net C#

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.

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating