Click here to Skip to main content
15,844,903 members
Please Sign up or sign in to vote.
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
Updated 23-Sep-16 2:00am

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>
 
Share this answer
 
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
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
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900