Add Row in Table on Click of addRowBtn

Question

Hi 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(" Sr. Document File Name Action "); htmlTable.Append(" "); htmlTable.Append(" "); htmlTable.Append(" "); PlaceHolderTable0.Controls.Add(new Literal { Text = htmlTable.ToString() }); Documents Info Document   * Select Document --%> 10th Certificate Aadhaar Card Document Proof   *     Add Thanks

Naimish Makwana · 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: document.getElementById('addRowBtn').addEventListener('click', function () { // Get the table body var tableBody = document.getElementById('tbldata').getElementsByTagName('tbody')[0]; // Get the values from the dropdown and file upload var documentValue = document.getElementById(' ').value; var documentText = document.getElementById(' ').options[document.getElementById(' ').selectedIndex].text; var fileUpload = document.getElementById(' '); var fileName = fileUpload.value.split('\').pop(); // Create a new row var newRow = tableBody.insertRow(); // Insert cells and set their content var cell1 = newRow.insertCell(0); var cell2 = newRow.insertCell(1); var cell3 = newRow.insertCell(2); var cell4 = newRow.insertCell(3); cell1.innerHTML = tableBody.rows.length; // Sr. No. cell2.innerHTML = documentText; // Document cell3.innerHTML = fileName; // File Name cell4.innerHTML = ' Delete '; // Action // Clear the file upload control fileUpload.value = ''; }); function deleteRow(button) { // Get the row to be deleted var row = button.parentNode.parentNode; row.parentNode.removeChild(row); } 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 Ansari · Answer

Hi Ramco, You need to set the button's OnClick property to point to the event handler in the code-behind. Add 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(" Remove "); 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(" Sr. Document File Name Action "); fullTable.Append(" "); fullTable.Append(htmlTable.ToString()); fullTable.Append(" "); fullTable.Append(" "); // 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 }

Add Row in Table on Click of addRowBtn

Answers (2)