Получить значение ячейки таблицы и отправить в функцию удаления

Question

У меня есть таблица, в которой отображаются данные из моей базы данных. Я хочу предоставить кнопку, которая будет удалять данные из таблицы на основе выбранной строки. В частности, на основе значения конкретной ячейки этой таблицы.

Я пытался обернуть кнопку внутри элемента формы как дополнительный элемент внутри каждой строки, но, похоже, это не работает по двум причинам. 1, он запускает функцию OnGet () в моем контроллере, а 2, похоже, не привязывает значение данных ячейки к моему свойству SourceTable.

Вот моя таблица переднего плана:

<table class="table">
    <thead>
        <tr>
            <td>OrderIdentifier</td>
            <td>Step Number</td>
            <td>CreateDate</td>
            <td>Step Status</td>
            <td>Source Table</td>
        </tr>
    </thead>
    @foreach (var order in Model.order.Steps)
    {
        <tr>
            <td>@order.OrderIdenfitier</td>
            <td>@order.Name</td>
            <td>@order.CreateDate</td>
            <td>@order.StepStatus</td>
            <td>@order.SourceTable</td>

            <td>
                <a class="btn btn-dark"
                   asp-page="./OrderDetail"
                   asp-route-orderId="@order.OrderIdenfitier">
                    <i class="glyphicon glyphicon-zoom-in"></i>
                    Details
                </a>
            </td>
            <td>
                <form method="delete">
                    <input type="hidden" class="form-control" asp-for="SourceTable" />
                    <button type="submit" class="btn btn-dark">
                        <i class="glyphicon glyphicon-zoom-in"></i>
                        Delete
                    </button>
                </form>
            </td>
        </tr>
    }

И на бэкэнде я хотел бы передать значение ячейки SourceTable любой строки, по которой нажимается кнопка, в эту функцию:

        public IActionResult OnDelete(string SourceTable)
        {
            //Take SourceTable parameter, pass to data access layer, and delete from database. 
            return Page();
        }

Я бы хотел, чтобы значение ячейки SourceTable было передано моей функции OnDelete, но этого не происходит. Кроме того, моя функция OnGet () срабатывает, когда я нажимаю кнопку удаления, а не функцию OnDelete (). Форма I, в которую я встроил кнопку, имеет action = "delete", поэтому я думаю, что она перейдет к функции OnDelete (), но, похоже, это не так.

Answer 1

HTTP DELETE метод в настоящее время не поддерживается элементом <form>. Вот почему вы нажали OnGet() на своей странице Razor. Вы по-прежнему можете использовать OnPost() для этой цели с привязкой значений формы (например, скрытых входных данных) к параметрам метода действия.

Вторая проблема связана с вашим asp-for помощником тега ввода. По умолчанию он оценивает свое выражение против PageModel. Вы можете использовать @, чтобы переопределить это поведение, особенно когда вы в цикле foreach . Тогда ваша форма может выглядеть так:

<form method="post">
  <input type="hidden" asp-for="@order.SourceTable"/>
  <input type="submit" vaue="Delete"/>
</form>

и метод действия:

public IActionResult OnPost(string SourceTable)
{
    // delete record here
    return RedirectToPage();
}

Возможно, вам не нравится идея удалять записи в обработчике OnPost, который вы хотели бы зарезервировать для какого-либо другого действия. Затем вы можете использовать метод именованного обработчика , например, OnPostDelete(string SourceTable). Все, что вам нужно сделать, это добавить атрибут asp-page-handler="delete" к элементу <form>:

<form asp-page-handler="delete" method="post">
  <input type="hidden" asp-for="@order.SourceTable"/>
  <input type="submit" value="Delete"/>
</form>

А может, вам не нравится идея иметь отдельную форму для каждой строки в таблице. Затем оберните форму вокруг таблицы и используйте префикс asp-route- на каждой кнопке удаления, чтобы указать привязку параметра:

<form method="post">
  <table class="table">
    <thead>
      <!-- ... -->
    </thead>
    <tbody>
      @foreach (var order in Model.order.Steps)
      {
        <tr>
          <!-- ... -->
          <td>
            <input type="submit" value="delete" asp-page-handler="delete" asp-route-sourcetable="@order.SourceTable" />
          </td>
        </tr>
      }
    </tbody>
  </table>
</form>

Более подробную информацию вы можете найти в artice Введение в Razor Pages в ASP.NET Core .