Faran Saleem Ответов: 1

Динамическое добавление бесконечных текстовых полей при нажатии кнопки с одинаковым форматированием

Здравствуйте разработчики,

Мне нужно немного вашей помощи.
У меня есть таблица asp, которая состоит из 3 полей.. "Имя", "возраст" и "Пол", эти 3 поля выровнены по горизонтали, а прямо под ними находится кнопка "добавить еще".
Я хочу, чтобы всякий раз, когда пользователь нажимает кнопку "добавить еще", все 3 текстовых поля с именами полей добавляются ниже, а также добавляется кнопка "Удалить" (в случае, если пользователь хочет удалить текстовые поля).
Пользователь может добавлять бесконечное количество текстовых полей, никаких ограничений нет.. но если пользователь достигает определенного количества текстовых полей, скажем, 5.. затем должна быть сгенерирована полоса прокрутки, чтобы он мог добавить больше полей, и они добавляются на ту же страницу и видны, как только пользователь прокручивает вниз.

С нетерпением жду вашей поддержки.
Ваша помощь будет очень признательна.

Спасибо.

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

Я уже искал разные сайты.. я нашел решения, похожие, но не совсем одинаковые.

1 Ответов

Рейтинг:
12

Vincent Maverick Durano

Это должно помочь вам начать работу: Динамическое добавление и удаление строк в GridView и сохранение всех строк сразу[^]

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

Другой подход, который вы можете сделать, - это использовать JavaScript/jQuery для добавления динамических элементов управления на клиенте. Таким образом, все взаимодействия происходят только в браузере, так что вы можете иметь быстрый ответ. Просто google "добавление динамического текстового поля с помощью jquery", чтобы получить больше примеров. Вот один из них я нашел: Как динамически добавлять / удалять текстовое поле с помощью jQuery[^]

Цитата:
Пользователь может добавить бесконечное количество текстовых полей

Возможно, вам придется пересмотреть свои требования. Вы должны думать о производительности страницы и пользовательском опыте. Как вы думаете, что произойдет, когда вы добавите 100 000 текстовых полей на страницу?

Вот краткий пример, основанный на вашем последнем комментарии:

Aspx-файл:

<asp:TextBox ID="TextBox1" runat="server"/>
<asp:TextBox ID="TextBox2" runat="server"/>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:GridView ID="GridView1" runat="server" >
</asp:GridView>


С ФОНОВЫМ КОДОМ:

//A method that will BIND the GridView based on the TextBox 
//values and retain its values on post backs.

private void BindGrid(int rowcount)
{
        DataTable dt = new DataTable();
        DataRow dr;
        dt.Columns.Add(new System.Data.DataColumn("Name", typeof(String)));
        dt.Columns.Add(new System.Data.DataColumn("Location", typeof(String)));
 
        if (ViewState["CurrentData"] != null)
        {
            for (int i = 0; i < rowcount + 1; i++)
            {
                dt = (DataTable)ViewState["CurrentData"];
                if (dt.Rows.Count > 0)
                {
                    dr = dt.NewRow();
                    dr[0] = dt.Rows[0][0].ToString();
 
                }
            }
            dr = dt.NewRow();
            dr[0] = TextBox1.Text;
            dr[1] = TextBox2.Text;
            dt.Rows.Add(dr);
 
        }
        else
        {
            dr = dt.NewRow();
            dr[0] = TextBox1.Text;
            dr[1] = TextBox2.Text;
 
            dt.Rows.Add(dr);
 
        }
 
        // If ViewState has a data then use the value as the DataSource
        if (ViewState["CurrentData"] != null)
        {
            GridView1.DataSource = (DataTable)ViewState["CurrentData"];
            GridView1.DataBind();
        }
        else
        {
        // Bind GridView with the initial data assocaited in the DataTable
            GridView1.DataSource = dt;
            GridView1.DataBind();
 
        }
        // Store the DataTable in ViewState to retain the values
        ViewState["CurrentData"] = dt;
 
    }

 protected void Button1_Click(object sender, EventArgs e)
 {
        // Check if the ViewState has a data assoiciated within it.
        if (ViewState["CurrentData"] != null)
        {
            DataTable dt = (DataTable)ViewState["CurrentData"];
            int count = dt.Rows.Count;
            BindGrid(count);
        }
        else
        {
            BindGrid(1);
        }
        TextBox1.Text = string.Empty;
 
        TextBox1.Focus();
}

Faran Saleem

Эй, Винсент..Подход gridvew отлично работает для меня.. Но только еще один вопрос.. у меня есть 2 фиксированных столбца, а также "название школы" и "город", и пользователь будет заполнять и отправлять эти поля вместе с динамическим gridview..
Например, если школа называется ABC, а город-Лондон. Поэтому я хочу сохранить эти и динамически генерируемые столбцы в gridview в одной таблице в базе данных sql..не могли бы вы помочь мне с этим, пожалуйста..?

И пользователь не будет вводить 100 000 записей.. просто хотел, чтобы он был динамичным, чтобы добавлять текстовые поля без каких-либо ограничений

Vincent Maverick Durano

Первая ссылка должна сделать трюк за вас. Вам просто нужно немного подправить код в соответствии с вашими требованиями.

Faran Saleem

Спасибо, Винсент. ваше руководство здесь очень помогло мне. Огромное спасибо.. :)

Vincent Maverick Durano

Я обновил вышеприведенное решение и включил в него быструю демонстрацию. Пожалуйста, взгляните.

Karthik_Mahalingam

5