我如何使用 Bootstrap4 模态在 Django 中制作功能正常的删除确认弹出窗口

Posted 2023-02-24

【中文标题】我如何使用 Bootstrap4 模态在 Django 中制作功能正常的删除确认弹出窗口

【英文标题】：How do i make a functioning Delete confirmation popup in Django using Bootstrap4 Modal

【发布时间】：2020-08-19 02:14:28

【问题描述】：

我的views.py 文件如下所示。

def deleteOrder(request, pk):
    order = Order.objects.get(id=pk)

    if request.method=="POST":
        order.delete()
        return redirect('/')
    context = "item":order

    return render(request, 'accounts/delete.html', context)

我的delete.html 文件是这个。如果有办法摆脱它或在删除弹出窗口中使用它的部分代码，请提供帮助。

% block content %

<br>
<div class="row">
    <div class="col-md-6">
        <div class="card card-body">
            <p>Are you sure you want to delete "item"?</p>

            <form action="% url 'delete_order' item.id %" method="POST">

                % csrf_token %
                <a class="btn btn-warning" href="% url 'home' %">Cancel</a>
                <button type="submit" class="btn btn-danger">Delete</button>
            </form>

        </div>
    </div>
</div>

% endblock %

我的urls.py 文件如下所示。

urlpatterns = [
    path('delete_order/<str:pk>', views.deleteOrder, name="delete_order"),
]

Bootstrap Delete Popup 我需要帮助申请。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

我的Home page 由一个表组成，其中包含一个用于删除每一行的Delete 列。

<table class="table table-sm">
                <tr>
                    <th>Product</th>
                    <th>Date Ordered</th>
                    <th>Status</th>
                    <th>Update</th>
                    <th>Delete</th>
                </tr>

                % for order in orders %
                <tr>
                    <td> order.product </td>
                    <td> order.date_created </td>
                    <td> order.status </td>
                    <td><a class="btn btn-sm btn-info" href="% url 'update_order' order.id %">Update</a></td>
                    **<td><a class="btn btn-sm btn-danger" href="% url 'delete_order' order.id %">Delete</a></td>**
                </tr>
                % endfor %

            </table>

我添加的行 ** 星号（故意）是我要修改的行，以便当我单击 删除 按钮时，会触发 Bootstrap 删除弹出模式。

【参考方案1】：

试试这个。

<!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <a class="btn btn-sm btn-danger" href="% url 'delete_order' order.id %">Delete</a>
          </div>
        </div>
      </div>
    </div>

<table class="table table-sm">
    <tr>
        <th>Product</th>
        <th>Date Ordered</th>
        <th>Status</th>
        <th>Update</th>
        <th>Delete</th>
    </tr>

    % for order in orders %
    <tr>
        <td> order.product </td>
        <td> order.date_created </td>
        <td> order.status </td>
        <td><a class="btn btn-sm btn-info" href="% url 'update_order' order.id %">Update</a></td>
        <td><a class="btn btn-sm btn-danger" href="#" data-toggle="modal" data-target="#exampleModal">Delete</a></td>
    </tr>
    % endfor %

</table>

--- 更新 --- url.py，最常用的是urls.py 你的pk应该是int而不是str

urlpatterns = [
    path('delete_order/<int:pk>', views.deleteOrder, name="delete_order"),
]

【讨论】：

如何处理url.py 和delete.html 文件？因为我的路径存在一些我似乎无法修复的问题。

那么第二个问题在这里return render(request, 'accounts/delete.html', context)，这呈现了我试图避免的delete.html。我希望它转为使用 Popup 而不是创建 delete.html 文件。

但是没有显示模态并且yes按钮删除de对象吗？要摆脱模板，您可能需要实现 AJAX 请求。