Как динамически добавлять кнопки редактирования / удаления для каждой строки в таблице HTML - PullRequest
0 голосов
/ 17 июня 2019

У меня есть таблица 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 кнопки ввода не вызывается при нажатии. Я еще не кодировал функцию удаления по клику; он просто должен предупредить, что была нажата кнопка «Удалить», и этого не происходит.

Ответы [ 2 ]

0 голосов
/ 17 июня 2019

Как сказал Томас, будет проще использовать подход 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 модели данных.Контроллер выполняет поиск в базе данных и создает модель представления «Спецификации».(Игнорируйте другие переменные "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.)

0 голосов
/ 17 июня 2019

почему вы не строите свой стол бритвой?- создать пользовательский объект для хранения ваших данных - создать представление и передать ваш объект - на вашем cshtml

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

Если вы не хотите использовать бритву, вы должны написать некоторый javascript и присоединить к onclick = "javascriptFunction ()».И в строителе строк добавьте JavaScript:

<script> javascriptFunction() { /** code here */ } </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...