How do I modify this jQuery to allow for more controls?

Question

Greetings again mates.

I have been trying quite unsuccessfully for the last three days to try to figure out how to dynamically add rows based on selecting DropDownList values.

There are quite a good number of examples on how to do this by clicking a button to add more rows but my solution is different.

The sample that I was able to find, uses jquery to allow users to add a row dynamically based on DropDownList selected value.

We would like to modify this jquery to allow us to add more textbox and dropdownlist controls to any dynamically created row because we do have several textbox controls.

Even better, if possible, can this be done with asp.net?

Here is what I have so far.

Your generous assistance is greatly appreciated in advance.

//HTML  
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="waterCollections.aspx.vb" Inherits="toilets" %>  

  

  
  
      
  
  
  
  
      
  
  
      
          
          
          
      
    
  
      <%--

// I would like to be able to select a value from the dropdown above and a row containing textboxes and dropdowns like the example below, will be created.
asp:TableCell

1.30 GPF
1.28 GPF
0.80 GPF

asp:TableCell
$
asp:TableCell

asp:TableCell

    
  
      
  
  
   
  
  

//VB.NET  
Imports System.Data  
Imports System.Data.SqlClient  
Imports System.Configuration  
Partial Class waterCollections  
    Inherits System.Web.UI.Page  
    Private con As String = ConfigurationManager.ConnectionStrings("conStr").ConnectionString  
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
        If Not IsPostBack Then  
        End If  
    End Sub  
    Protected Sub Save(ByVal sender As Object, ByVal e As EventArgs)  
        Dim textboxValues As String() = Request.Form.GetValues("DynamicTextBox")  
        Dim serializer As JavaScriptSerializer = New JavaScriptSerializer()  
        Me.Values = serializer.Serialize(textboxValues)  
        For Each textboxValueAs String In textboxValues  
        Using con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("conSting").ConnectionString)  
                Using cmd As SqlCommand = New SqlCommand("INSERT INTO Customers (@CustomerId) VALUES(@CustomerId)", con)  
                    con.Open()  
                    cmd.Parameters.AddWithValue("@CustomerId", textboxValue)  
                    cmd.ExecuteNonQuery()  
                    con.Close()  
                End Using  
            End Using  
        Next  
    End Sub  

End Class

Accepted Answer

Unfortunately, what the user's want is as I stated it.

You missed the point. Web Forms is the technology selected for this project. Therefore, you should use the tools that come with Web Forms to build a solution.

Below is a basic example of using a standard Repeater control to dynamically generate inputs.

Markup

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebFormsDemo.RepeaterDemo._default" %>  
  
  
  
  
  
      
  
  
      
          
              
                  
                  
                  
                  
              
          
          
              
                  
                      
                      
                      
                          
                            Item 1  
                            Item 2

Code behind

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
  
namespace WebFormsDemo.RepeaterDemo  
{  
    public partial class _default : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
  
        }  
  
        protected void ddlNumber_SelectedIndexChanged(object sender, EventArgs e)  
        {  
            List Items = new List();  
            int rows = 0;  
            int.TryParse(ddlNumber.SelectedValue, out rows);  
  
            for(int i = 0; i < rows; i++)  
            {  
                Items.Add(new ItemsModel());  
            }  
  
            DynamicRepeater.DataSource = Items.Count == 0 ? null : Items;  
            DynamicRepeater.DataBind();  
        }  
  
    }  
  
    public class ItemsModel  
    {  
        public string Item1 { get; set; } = string.Empty;  
        public string Item2 { get; set; } = string.Empty;  
    }  
}

The rest is up to you. I image you'll add a button to submit the user's inputs. Update a database table. Finally update any data bound controls that display records.

Reference documentation
https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.repeater?view=netframework-4.8.1

Answer

@QiYou-MSFT , thanks for your response.

Can you please assist?

I already have the dropdown as shown in my original post.

I also have the Save() method.

My issue is how to use the dropdownlist to generate the rows. Each generated row needs to have the ability to have multiple controls like textboxes and dropdownlist.

Thanks again for your help.

Answer

Oh wow, I was just too caught up with trying to do it one way.

Thank you.

Ok, I will follow the link to hopefully get an idea of how to grab the selected rows and insert into the DB.

Many thanks for your help @AgaveJoe

How do I modify this jQuery to allow for more controls?

2 additional answers