Home > ASP.NET > ASP.NET – Create controls dynamically in asp.net using JavaScript and JavaScriptSerializer. [Part II]

ASP.NET – Create controls dynamically in asp.net using JavaScript and JavaScriptSerializer. [Part II]

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>
 
 
which looks on browser as follows
 
image
 
 

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

image

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

  }

 
 
 
Thanks.
Advertisements
Categories: ASP.NET
  1. ranjit kumar behera
    February 13, 2012 at 12:54 pm

    the application showing error in the following statement

    this.Values = serializer.Serialize(textboxValues);

    it says that

    does not contain a definition for ‘Values’

  2. February 13, 2012 at 1:28 pm

    Please declare the variable Values in the Page.I have updated the code again,sorry for the inconveinience.

    Thanks.

  3. May 20, 2013 at 9:06 am

    how to store the dynamically created multiple text box value to database??

    please help me out…….

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: