Question

我有一个用于填充表的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函数。只是应该提醒您已按下“删除”按钮，并且没有这样做。

Answer 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>

Answer 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的良好起点。）

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

2 个答案: