JordanTrajkov Ответов: 2

Как сделать функцию для динамического добавления / удаления элементов управления

Как сделать функцию для динамического добавления / удаления элементов управления, что-то вроде предварительного просмотра изображения:

Ссылка на изображение

Я хочу поставить кнопку, Добавить новое поле и кнопки для удаления рядом с каждым полем, как в предварительном просмотре изображения, которое я прикрепляю выше?

Что я уже пробовал:

Как сделать функцию для динамического добавления / удаления элементов управления

2 Ответов

Рейтинг:
2

Karthik_Mahalingam

попробовать это

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

JordanTrajkov

Мне нужно немного asp.net решение c#.

Karthik_Mahalingam

создание динамических элементов управления в asp - это не очень хороший подход, будет трудно получить значения на post back..
государственное управление трудно.
используйте создание на стороне клиента с помощью AJAX, который наиболее рекомендуется для этого типа функциональности.

JordanTrajkov

но я должен сделать функцию для добавления сложных пользовательских элементов управления, которые содержат много стандартных элементов управления .net, таких как (txtboxes, droddowns, linkbuttons..) Возможно ли это с помощью AJAX и есть ли у вас какой-то пример, чтобы показать?

Karthik_Mahalingam

вызовы jQuery ajax не будут поддерживать динамическое добавление пользовательских элементов управления asp..
но вы можете обратиться к AjaxToolKit,
через панель обновления

Рейтинг:
1

Vincent Maverick Durano

Никогда не тестировался на этом, но вы могли бы попробовать что-то вроде этого:

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


Имейте в виду, что приведенный выше код является лишь кратким примером, поэтому будьте осторожны при использовании ViewState, чтобы избежать проблем с производительностью страницы. Кроме того, ViewState имеет ограничение по размеру, поэтому убедитесь, что вы не храните в нем огромное количество данных.

Я бы также предложил вам прочитать о создании динамических элементов управления и событиях цикла страниц.

НТН