Generically add controls and post to server in ASP.NET web forms

Question

I have a situation where the user has to enter multiple orderslines to an order. It can be 1, it can be 100. More orderlines should be added by clicking a small (+) sign, which adds more textboxes on the fly without a postback.

I am limited to ASP.NET web forms, newest version.

My initial code:

I had hoped I could write a script like this:

<script>
    var count = 0;
    $(document).ready(function() {
        $('#moreBtn').click(function() {
            addNewControl();
        });
    });

    function addNewControl() {

        var orderLineDivId = "orderlinesDiv" + count;
        var orderLineTitleId = "orderlines_title" + count;
        var orderLineValueId = "orderlines_value" + count;

        var parent = $('#<%=OrderLinesPnl.ClientID %>');

        var newCtl = '<div id="'+orderLineDivId+'">' +
            '<div id="' + orderLineTitleId + '"><input type="text" /></div>' +
            '<div id="' + orderLineValueId + '"><input type="text" /></div>' +
            '</div>';

        parent.append(newCtl);
    }

</script>

And then on the code behind:

OrderLinesPnl.FindControl("orderlinesDiv1");

But it seems that FindControl needs to find a control, and I add simple HTML elements.

Code I have:

   <h3>Orderlines</h3>

    <a id="moreBtn" href="#">(+)</a>

    <asp:Panel runat="server" ID="OrderLinesPnl">

    </asp:Panel>

    <asp:Button runat="server" ID="SubmitBtn" Text="Create product" OnClick="SubmitBtn_Click"/>

So basically: on the server side, I need a way to iterate all controls added, and retrieve their content.

EDIT: My working code

<script>
        var count = 0;
        $(document).ready(function() {
            $('#moreBtn').click(function() {
                addNewControl();
            });
        });

        function addNewControl() {

            var orderLineDivId = "orderlinesDiv" + count;
            var orderLineTitleId = "orderlines_title" + count;
            var orderLineValueId = "orderlines_value" + count;

            var parent = $('#<%=OrderLinesPnl.ClientID %>');

            var newCtl = '<div id="'+orderLineDivId+'">' +
                '<div><input id="' + orderLineTitleId + '" name="' + orderLineTitleId + '" type="text" /></div>' +
                '<div><input id="' + orderLineValueId + '" name="' + orderLineValueId + '" type="text" /></div>' +
                '</div>';

            parent.append(newCtl);
            count++;
        }

    </script>

Then I can get the values from the this.Request.Form;

Answer 1

Instead of mapping to unexisting controls, you can just read the bare POST:

this.Request.Form

This gives you a low-level key-value collection you can iterate over. The only small isue with web forms is that web forms is a paranoiac when it comes to security and posting to nonexisting controls will likely raise a validation exception. Just turn off validation for the page or write a custom request validator:

http://msdn.microsoft.com/en-us/library/system.web.util.requestvalidator(v=vs.110).aspx

Edit: as for your comment, your controls lack the name property and thus their values are not sent to the server. Just make them have names.

Answer 2

In your case i would suggest to get all the values you want to send to the server put them in a json and send them with Ajax to your function in Code Behind.

You can serialize the form data like below :

 var frm = $(document.myform);
 var data = JSON.stringify(frm.serializeArray());

The url you will post will be

url: "Default.aspx/OnSubmit"

In Code Behind you must decorate your function as Web Method in order for the Ajax to post to this function.

    [WebMethod]
    public static string OnSubmit(string datafilds)
    {
        //parse the json
        //save to the database
        return "OK";
    }