How to make function for dynamicly add/remove controls

Question

1.00/5 (1 vote)

See more:

How to make function for dynamicly add/remove controls, something like the image preview:

Link for the image

I want to put a button, add new field, and a buttons to remove next to every field as in the image preview which i attach above?

What I have tried:

How to make function for dynamicly add/remove controls

Posted 20-Sep-16 15:46pm

JordanTrajkov

Updated 23-Sep-16 1:00am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2016-09-20T18:56:00

Solution 1

try this

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <ul id="ul1"> </ul>
    <a href="#" onclick="add()" style="color:green;text-decoration:none">Add new</a>
    <script>
        function add() {
            var li = document.createElement('li');
            li.innerHTML = '<select><option>Select</option></select> <a  href="#" onclick="remov(this)"  style="color:red;text-decoration:none">&times;</a>'
            document.getElementById('ul1').appendChild(li);
        }
        function remov(obj)
        {
            obj.parentElement.remove()
        }
    </script>
</body>
</html>

Posted 20-Sep-16 18:56pm

Karthik_Mahalingam

Comments

JordanTrajkov 21-Sep-16 12:00pm

I need some asp.net c# solution.

Karthik_Mahalingam 21-Sep-16 12:03pm

creating dynamic controls in asp is not a good approach, it will be difficult to get the values on post back..
state management is difficult.
use client side creation with AJAX, which is most recommended one for this type of functionality.

JordanTrajkov 21-Sep-16 12:11pm

but i have to make an function to add complex User Controls, which contain many standard .net controls like (txtboxes, droddowns, linkbuttons..) Is it possible with AJAX and do you have some example to show?

Karthik_Mahalingam 21-Sep-16 12:14pm

jquery ajax calls will not support asp user controls to add dynamically..
but you can refer AjaxToolKit,
using update panel

Vincent Maverick Durano · Answer 2 · 2016-09-23T01:00:00

Never tested on this, but you could try something like this:

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        int occurence =1;
        ViewState["Counter"] = occurence;
        LoadUserControl();
    }

}

protected void Button1_Click(object sender, EventArgs e)
{
    if(ViewState["Counter"] != null){
       int count = Convert.ToInt32(ViewState["Counter"]);
       ViewState["Counter"] = count + 1;
       LoadUserControl();
    }
}

protected void LoadUserControl()
{
    int count = Convert.ToInt32(ViewState["Counter"]);
    if (count > 0)
    {
        for (int i = 0; i < count; i++)
        {
            WebUserControl uc = (WebUserControl)Page.LoadControl("WebUserControl.ascx");
            webUC.ID = "webUC" + i.ToString();
            //add the user control in the form
            //note that you can also add them in a PlaceHolder or Panel control
            form1.Controls.Add(uc);
        }
    }
}

Keep in mind that the code above is just a quick example, so be careful when using ViewState to avoid page performance issue. Also ViewState has a limit when it comes to size, so make sure that you don't store a huge amount of data in it.

I would also suggest you to read on Dynamic Controls creation and Page cycle events.

HTH