如何在Property List视图中添加房源删除确认模态框？

一、视图文件（views.py）调整 #

原有视图逻辑无需大幅改动，仅简化property_list的上下文传递，并确保delete_property仅在POST请求时执行删除操作，GET请求直接重定向回列表页（确认逻辑已移至前端模态框）。修改后代码如下：

def property_list(request):
    properties = Property.objects.all()
    context = {
        'properties': properties,
    }
    return render(request, 'real_estate/property/list.html', context)

def delete_property(request, id):
    property = get_object_or_404(Property, id=id)
    if request.method == 'POST':
        property.delete()
        messages.success(request, f"成功删除房源：{property.title}")
        return redirect('real_estate:property_list')
    # GET请求直接返回列表页，无需单独渲染确认页
    return redirect('real_estate:property_list')

二、列表页面（real_estate/property/list.html）修改 #

基于Bootstrap实现模态框确认功能（需确保项目已引入Bootstrap的CSS和JS资源），将原直接提交的删除按钮改为触发模态框的按钮，模态框内放置真正的删除表单。修改后代码如下：

{% extends "real_estate/base.html" %}
{% block title %} 房源列表 {% endblock %}
{% block content %}
  {% if properties %}
  <h1>房源列表</h1>
  <a class="btn" href="{% url 'real_estate:add_property' %}" >添加房源</a>
  <ul>
    {% for property in properties %}
      <li>
        <a href="{% url 'real_estate:property_details' property.id %}"> {{ property.title }} </a>
        <a class="btn btn-primary" href="{% url 'real_estate:property_details' property.id %}">查看</a>
        <a class="btn btn-warning" href="{% url 'real_estate:edit_property' property.id %}">编辑</a>
        <!-- 触发模态框的删除按钮 -->
        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal-{{ property.id }}">
          删除
        </button>

        <!-- 对应房源的确认模态框 -->
        <div class="modal fade" id="deleteModal-{{ property.id }}" tabindex="-1" aria-labelledby="deleteModalLabel-{{ property.id }}" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel-{{ property.id }}">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                确定要删除房源「{{ property.title }}」吗？此操作不可撤销。
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <!-- 提交删除请求的表单 -->
                <form action="{% url 'real_estate:delete_property' property.id %}" method="post" class="d-inline">
                  {% csrf_token %}
                  <button type="submit" class="btn btn-danger">确认删除</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </li>
    {% endfor %}
  </ul>
  {% else %}
    <h1>暂无房源</h1>
    <a class="btn" href="{% url 'real_estate:add_property' %}" >添加房源</a>
  {% endif %}
{% endblock %}

三、非Bootstrap环境适配方案 #

如果项目未使用Bootstrap，可通过原生JavaScript实现模态框：

• 给每个删除按钮添加onclick事件，触发对应模态框的显示；
• 模态框的取消按钮绑定隐藏模态框的事件；
• 确认按钮直接触发对应删除表单的提交。

内容的提问来源于stack exchange，提问作者Dullah