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>元素not supported使用。这就是为什么您在“剃刀”页面中点击OnGet()的原因。为此，您仍然可以使用OnPost()来将表单值（例如隐藏的输入）绑定到操作方法参数。

第二个问题是您的asp-for输入标记帮助器。默认情况下，它根据PageModel评估其表达式。您可以使用@覆盖该行为，尤其是当您in a foreach loop时。然后您的表单可能如下所示：

<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)一样使用named handler method。您要做的就是将属性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>

您可以在Introduction to Razor Pages in ASP.NET Core中找到更多有价值的信息。

获取表单元格值并提交到删除功能

1 个答案: