如何为 HTML 表格中的每一行动态添加编辑/删除按钮答案

【问题标题】：How to Dynamically Add Edit/Delete Buttons for each row in a HTML table如何为 HTML 表格中的每一行动态添加编辑/删除按钮
【发布时间】：2019-06-17 18:54:45
【问题描述】：

我有一个用于填充表的 SQL 表，我想在该行中添加“删除”和“编辑”按钮。

我有一个输入文本框，对应于我的 sql 表中的列“PartNo”。我目前有两个函数：BuildTable 和 GetData，当按下按钮时都会调用它们。 GetData() 与 sql 数据库建立连接并使用用户指定的 PartNo 查询数据，BuildTable 使用 StringBuilder 类创建一个 html 表并用 sql 数据填充它。我希望每一行都有一个删除和编辑按钮，可以删除和编辑该特定行。

protected void BuildTable(Datatable dt){
//Building an HTML string;
        StringBuilder html = new StringBuilder();
        html.Append("<h3><b>Parts Location Details</b></h3>");
        //table start
        html.Append("<table align='center' bgcolor='#dbdbdb'>");

        //Building the Header row.
        html.Append("<tr >");
        foreach (DataColumn column in dt.Columns)
        {
            html.Append("<th style='color: white' bgcolor='darkblue'>");
            html.Append(column.ColumnName);
            html.Append("</th>");
        }
        html.Append("<th style ='color:white' bgcolor ='blue'>Edit</th>");
        html.Append("<th style ='color:white' bgcolor ='blue'>Delete</th>");
        html.Append("<th style ='color:white' bgcolor ='blue'>Print</th>");
        html.Append("<tr>");

        //building the data row
        foreach (DataRow row in dt.Rows)
        {
            countRows++;
            html.Append("<tr>");
            foreach (DataColumn column in dt.Columns)
            {
                html.Append("<td>");
                html.Append(row[column.ColumnName]);
                html.Append("</td>");
            }
            html.Append("<td><input type='button' value='Edit'/></td>");
            html.Append("<td><input type='button' value='Delete' runat='server' onclick='btndelete_Click'/></td>");
            //html.Append("<td><asp:button ID='delete' runat='server' Text='Delete' OnClick='btndelete'/></td>");
            html.Append("<td><input type='button' value='Print'/></td>");
            html.Append("</tr>");
        }
        //table end
        html.Append("</table>");

        //append the HTML string to PlaceHolder with ID=spDetailsNew
        spDetailsNew.Controls.Add(new Literal { Text = html.ToString() });
}

我尝试过使用常规的 html 输入按钮和 asp:button 对象； asp:button 对象不会显示在表格上，并且输入按钮的“onclick”函数在单击时不会被调用。我还没有编写 Delete onclick 函数；它只是应该提示删除按钮已被按下，但它没有这样做。

【问题讨论】：

按原样，您没有定义每一行的标记。您应该考虑在此处使用视图模型和数据模型。绑定到页面控制器的数据。然后，您可以将每一行的 UID 用于编辑/删除按钮中的脚本调用。（使用下面描述的 Thomas 标记类型。）或者只是创建将 ID 传递到另一个页面的文本链接。
jquery datatable edit table row data using form的可能重复

标签： c# html asp.net datatables

【解决方案1】：

你为什么不用剃须刀搭建你的桌子？ - 创建一个 customObject 来存储您的数据 - 创建一个视图并传递你的对象 - 在你的 cshtml 上

<table>
    <tr>
        @foreach (var item in items)
        {
            <td>@item.something</td>
        }
    </tr>
...

如果您不想使用剃须刀，您应该编写一些 javascript 并附加到 onclick="javascriptFunction()"。并在 stringbuilder 上添加 javascript ：

<script> javascriptFunction() { /** code here */ } </script>

【讨论】：

【解决方案2】：

正如 Thomas 所说，使用 MVC 方法会更容易。这是我如何使用剃刀样式标记（使用“HTMLHelpers”）进行编辑/详细信息/删除链接的示例：

  @foreach (var item in Model.BOMs)
    {
       <tr>
        <td>
       @Html.DisplayFor(modelItem => item.BOMItem.InternalPN)
       </td>
       //  other cells....
    <td nowrap="">
                <a asp-page="./Edit" asp-route-id="@item.BOMItem.ID"
                   asp-route-limit="@Model.CurrentLimit"
                   asp-route-pageIndex="@Model.CurrentPageIndex"
                   asp-route-SortOrder="@Model.CurrentSort"
                   asp-route-SortDir="@Model.CurrentSortDir"
                   asp-route-ViewMode="@Model.CurrentViewMode">Edit</a> |
                <a asp-page="./Details" asp-route-id="@item.BOMItem.ID"
                   asp-route-limit="@Model.CurrentLimit"
                   asp-route-pageIndex="@Model.CurrentPageIndex"
                   asp-route-SortOrder="@Model.CurrentSort"
                   asp-route-SortDir="@Model.CurrentSortDir"
                   asp-route-ViewMode="@Model.CurrentViewMode">Details</a> |
                <a asp-page="./Delete" asp-route-id="@item.BOMItem.ID" asp-route-KitID="@Model.CurrentKitID"
                   asp-route-limit="@Model.CurrentLimit"
                   asp-route-pageIndex="@Model.CurrentPageIndex"
                   asp-route-SortOrder="@Model.CurrentSort"
                   asp-route-SortDir="@Model.CurrentSortDir"
                   asp-route-ViewMode="@Model.CurrentViewMode">Delete</a>
            </td>
          </tr>
    }

“asp-page”部分设置数据发送到哪个页面。 “asp-route-”部分定义绑定到控制器（page_name.cs）的变量。您会看到“asp-route-id”值设置为“@item.BOMItem.ID”，它是视图模型的一部分，对应于数据模型的 UID。控制器进行数据库查找并创建“BOM”视图模型。（忽略其他“asp-route-”变量，这些只是页面的视图变量。）这里有一个关于 Razor 页面的教程：https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-2.2&tabs=visual-studio 如果需要。（它只是 MVC 的一种简化框架......并且是学习 MVC 的一个很好的起点。）

【讨论】：