Microsoft Mentalist

Hi Geeks,

In our last post Create Controls dynamically in ASP.NET using Hidden Field .In this article we will see how to create asp.net controls dynamically using JavaScript and JavaScriptSerializer.

Example

We have our HTML view as follows

<form id="form1" runat="server">
    <input id="btnAdd" type="button" value="add" onclick="AddTextBox()" />
    <br />
    <br />
    <div id="TextBoxContainer">
        <!--Textboxes will be added here -->
    </div>
    <br />
    <asp:Button ID="btnPost" runat="server" Text="Post" OnClick="Post" />
    </form>

-> Now on add button click we have to add the text boxes dynamically and on post we have to preserve the text boxes and their values.

-> We use JavaScript and JavaScriptSerializer to do this.

We have our JavaScript Code as follows

 <script type="text/javascript">

        function GetDynamicTextBox(value)  {           

 return ‘<input name = "DynamicTextBox" type="text" value = "’ + value + ‘" />’ +     ‘<input type="button" value="Remove" onclick = "RemoveTextBox (this)" />’ 
         }

        function AddTextBox() {

            var div = document.createElement(‘DIV’);

            div.innerHTML = GetDynamicTextBox("");

            document.getElementById("TextBoxContainer").appendChild(div);

        }

        function RemoveTextBox(div) {

            document.getElementById("TextBoxContainer").removeChild(div.parentNode);

        }

        function RecreateDynamicTextboxes() {

            var values = eval(‘<%=Values%>‘);

            if (values != null) {

                var html = "";

                for (var i = 0; i < values.length; i++) {

                    html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";

                }

                document.getElementById("TextBoxContainer").innerHTML = html;

            }

        }

        window.onload = RecreateDynamicTextboxes;

    </script>

-> As you see in above code we use AddTextBox method to create the text box on Add button click.

-> As well as we have called method  RecreateDynamicTextboxes on window load event because dynamic controls disappears on post as we saw in last post.

-> The RemoveTextbox method called on remove button on click event to remove the buttons

on clicking add button we will have out put as follows

Problem of Dynamic Controls on Page Post Backs :

-> Retrieving/Preserving the textbox values at server side on Page Post

Its very easy to create the dynamic controls but it is not that much easy to take their values at server side on post.                                                                                                                

Because,                                   

As we are creating the control dynamically they disappears when page post backs so we also need to take care of this condition and we need to re create the controls when page post backs

-> Solution:

We use JavaScriptSerializer to save the textbox values.

Code on the Server side on Page_Load event is as follows

protected string Values;

protected void Page_Load(object sender, EventArgs e)

  {

      string[] textboxValues = Request.Form.GetValues("DynamicTextBox");

      JavaScriptSerializer serializer = new JavaScriptSerializer();

      this.Values = serializer.Serialize(textboxValues);

  }