Add Row in Table on Click of addRowBtn

Ramco Ramco

I have below code-behind code. I want to add rows on click of addrowbtn. How to get values.

StringBuilder htmlTable = new StringBuilder();
htmlTable.Append("");
htmlTable.Append("");
htmlTable.Append("");
htmlTable.Append("");
htmlTable.Append("Sr. Document File Name Action
");
PlaceHolderTable0.Controls.Add(new Literal { Text = htmlTable.ToString() });


    
        
        
            
                Documents Info
                
                    
                        
                    
                
            

            
                
                    
                        
                            Document *
                            
                                <%--Select Document--%>
                                10th Certificate
                                Aadhaar Card
                            
                        
                    
                    
                        
                            Document Proof *

Thanks

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Naimish Makwana2y ago

Accepted answer

To add rows to your table on the click of the “Add” button and retrieve the values from the dropdown and file upload controls, you can use JavaScript to handle the button click event and update the table dynamically. Here’s how you can do it:

Add an event listener to the button to handle the click event.
Retrieve the values from the dropdown and file upload controls.
Append a new row to the table with the retrieved values.

Here’s an example of how you can achieve this:

JavaScript Code

Add this script to your page:

Explanation

Event Listener: Adds an event listener to the “Add” button to handle the click event.
Retrieve Values: Gets the selected value and text from the dropdown and the file name from the file upload control.
Create Row: Creates a new row in the table and inserts cells with the retrieved values.
Delete Row: Adds a delete button to each row to allow for row removal.

Update Your ASP.NET Code

Ensure your ASP.NET controls have the correct IDs and runat attributes:


    10th Certificate
    Aadhaar Card

This approach uses JavaScript to dynamically update the table on the client side, making the user experience smoother without requiring a postback to the server. If you need to persist the data on the server, you can handle that in your code-behind during a form submission.

Tahir Ansari2y ago

Hi Ramco,

You need to set the button's OnClick property to point to the event handler in the code-behind.

Below is the code-behind that handles adding the row and dynamically generating the table

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Initialize the ViewState
        ViewState["CurrentTable"] = null;
        ViewState["RowCount"] = 0;
    }
}

protected void AddRowBtn_Click(object sender, EventArgs e)
{
    // Retrieve the current table from ViewState
    StringBuilder htmlTable = ViewState["CurrentTable"] != null ?
                                new StringBuilder(ViewState["CurrentTable"].ToString()) :
                                new StringBuilder();

    // Get the current number of rows
    int rowCount = ViewState["RowCount"] != null ? (int)ViewState["RowCount"] : 0;

    // Increase the row count
    rowCount++;

    // Get the selected document and file name
    string selectedDocument = ddlDocument.SelectedItem.Text;
    string uploadedFileName = FileUploadIdentityProof.HasFile ? FileUploadIdentityProof.FileName : string.Empty;

    // Add a new row with the document and file name
    htmlTable.Append("");
    htmlTable.Append($"{rowCount}");
    htmlTable.Append($"{selectedDocument}");
    htmlTable.Append($"{uploadedFileName}");
    htmlTable.Append("");
    htmlTable.Append("");

    // Update the row count and the table in ViewState
    ViewState["RowCount"] = rowCount;
    ViewState["CurrentTable"] = htmlTable.ToString();

    // Rebuild the full table
    StringBuilder fullTable = new StringBuilder();
    fullTable.Append("");
    fullTable.Append("");
    fullTable.Append("");
    fullTable.Append(htmlTable.ToString());
    fullTable.Append("");
    fullTable.Append("Sr. Document File Name Action
");

    // Add the table to the placeholder
    PlaceHolderTable0.Controls.Clear();
    PlaceHolderTable0.Controls.Add(new Literal { Text = fullTable.ToString() });
}

protected void Submit_Click(object sender, EventArgs e)
{
    // Handle form submission and retrieve values if necessary
}