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

Question

我的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 删除弹出模式。

Answer 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"),
]