如何為HTML表中的每一行動態添加編輯/刪除按鈕

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'功能。 我還沒有編寫刪除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

正如托馬斯所說，使用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”，它是viewmodel的一部分，對應於datamodel的UID。 控制器執行數據庫查找並創建“BOMs”視圖模型。 （忽略其他“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的一個很好的起點。）