如何将asp:PlaceHolder中用户编辑后的HTML表格转回DataTable？

Hey Mohamad, let's figure out why your current approach isn't working and walk through the fixes.

First, let's break down the core issues with using asp:PlaceHolder + static editable HTML tables when trying to get updated data back to a DataTable:

Why your "asp:placeholder contents to string" approach failed #

• Server-side doesn't track client-side DOM changes: The asp:PlaceHolder is just a container for static HTML. When users edit the contenteditable cells in the browser, those changes only exist in the client's DOM—your server-side PlaceHolder doesn't automatically sync these updates. If you try to read PlaceHolder.InnerHtml on postback, you'll only get the original HTML you generated initially, not the user-edited content.
• No built-in ViewState for static HTML: Unlike server-side controls (like GridView), static HTML elements don't participate in ASP.NET's ViewState system. The server has no way of knowing which cells were edited or what their new values are unless you explicitly send that data back.

Fixes to get updated data back into a DataTable #

You have two solid paths here, depending on whether you want to stick with static HTML or switch to server-side controls:

Option 1: Switch to an editable server-side GridView (simplest for ASP.NET)

Instead of generating a static HTML table, bind your DataTable to a GridView control that supports editing. This lets ASP.NET handle ViewState and postback tracking automatically.

1. Add the GridView to your markup:

<asp:GridView ID="EditableGridView" runat="server" AutoGenerateColumns="true" 
    AllowPaging="false" EnableViewState="true">
</asp:GridView>

2. Bind your initial DataTable on page load (only on first load):

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Replace with your actual DataTable
        DataTable originalTable = GetYourInitialDataTable();
        EditableGridView.DataSource = originalTable;
        EditableGridView.DataBind();
    }
}

3. Convert the edited GridView back to a DataTable on postback:

protected void SaveButton_Click(object sender, EventArgs e)
{
    DataTable updatedTable = new DataTable();

    // Create columns matching the GridView
    foreach (DataControlField column in EditableGridView.Columns)
    {
        updatedTable.Columns.Add(column.HeaderText);
    }

    // Populate rows with edited values
    foreach (GridViewRow row in EditableGridView.Rows)
    {
        if (row.RowType == DataControlRowType.DataRow)
        {
            DataRow dataRow = updatedTable.NewRow();
            for (int i = 0; i < row.Cells.Count; i++)
            {
                // For BoundFields, directly get the cell text
                // If using TemplateFields with TextBoxes, use row.FindControl() instead
                dataRow[i] = row.Cells[i].Text.Trim();
            }
            updatedTable.Rows.Add(dataRow);
        }
    }

    // Now you have your updated DataTable to work with!
}

Option 2: Keep using static HTML, but use JavaScript to send edited data back

If you need to stick with the static HTML table in a PlaceHolder, you'll need to manually collect the edited values on the client side and send them to the server.

1. Add a hidden field and save button to your markup:

<asp:PlaceHolder ID="TablePlaceholder" runat="server"></asp:PlaceHolder>
<asp:HiddenField ID="UpdatedTableData" runat="server" />
<asp:Button ID="SaveButton" runat="server" Text="Save Changes" 
    OnClick="SaveButton_Click" OnClientClick="collectEditedTableData();" />

2. Add a JavaScript function to collect edited cell values:

function collectEditedTableData() {
    // Get your table (make sure you assign an ID when generating the HTML table)
    const table = document.getElementById('userEditableTable');
    const tableData = [];

    // Skip the header row (adjust index if your table has multiple header rows)
    for (let i = 1; i < table.rows.length; i++) {
        const row = table.rows[i];
        const rowValues = [];
        for (let j = 0; j < row.cells.length; j++) {
            // Grab the edited text from each contenteditable cell
            rowValues.push(row.cells[j].innerText.trim());
        }
        tableData.push(rowValues);
    }

    // Convert to JSON and store in the hidden field
    document.getElementById('<%= UpdatedTableData.ClientID %>').value = JSON.stringify(tableData);
}

3. Parse the JSON data back into a DataTable on the server:

protected void SaveButton_Click(object sender, EventArgs e)
{
    string jsonData = UpdatedTableData.Value;
    if (!string.IsNullOrEmpty(jsonData))
    {
        // Use Newtonsoft.Json to deserialize JSON to DataTable
        // (You'll need to install the Newtonsoft.Json NuGet package)
        DataTable updatedTable = Newtonsoft.Json.JsonConvert.DeserializeObject<DataTable>(jsonData);
        
        // Do your processing with the updated DataTable here
    }
}

Key takeaway #

The main reason your original approach failed is that static HTML changes in the browser don't automatically sync back to the server-side PlaceHolder control. Either use server-side controls that handle ViewState for you, or manually collect and send the edited data via JavaScript.

内容的提问来源于stack exchange，提问作者Mohamad Firdaus