Django CRUD应用更新功能异常：Bootstrap模态框无法弹出

以下是导致模态框无法弹出的核心错误及对应修复方案：

1. 前端模板变量不匹配（直接导致模态框找不到对应ID） #

• 编辑按钮的data-bs-target误用了未定义的item.id，循环变量实际是task
• 模态框循环依赖未传入模板的data变量，应改为使用已有的task_list

修复后代码片段：

<!-- 编辑按钮部分 -->
<td>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
        data-bs-target="#editModal{{ task.id }}">
        EDIT
    </button>
</td>

<!-- 模态框循环部分 -->
{% for item in task_list %}
<div class="modal fade" id="editModal{{ item.id }}" tabindex="-1"
    aria-labelledby="editModalLabel{{ item.id }}" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="editModalLabel{{ item.id }}">EDIT YOUR TASK</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="post" action="{% url 'edit_data' item.id %}">
                    {% csrf_token %}
                    {{ form.as_p }}
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <!-- 移除重复的Save changes按钮 -->
            </div>
        </div>
    </div>
</div>
{% endfor %}

2. 视图函数缺失关键依赖与数据传递 #

• edit_data视图未导入get_object_or_404，会触发运行时错误
• 返回模板时未传入task_list，会导致页面表格数据丢失

修复后views.py代码：

# 顶部补充导入
from django.shortcuts import render, redirect, get_object_or_404

# 修改edit_data函数
def edit_data(request, item_id):
    instance = get_object_or_404(Tasks, id=item_id)
    if request.method == 'POST':
        form = TasksForm(request.POST, instance=instance)
        if form.is_valid():
            form.save()
            return redirect('index')
    else:
        form = TasksForm(instance=instance)
    # 传入task_list确保页面表格正常显示
    task_list = Tasks.objects.all()
    return render(request, 'index.html', {'form': form, 'task_list': task_list})

3. 异常捕获类名错误 #

delete_task视图中捕获的Task.DoesNotExist应为Tasks.DoesNotExist（模型类名为Tasks）：

def delete_task(request, task_id):
    if request.method == 'POST':
        try:
            task = Tasks.objects.get(pk=task_id)
            task.delete()
        except Tasks.DoesNotExist:
            pass
    return redirect('index')

4. 缺失Bootstrap CSS引用 #

页面未引入Bootstrap CSS，会导致模态框样式失效甚至无法弹出，在head标签中添加：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/css/bootstrap.min.css" rel="stylesheet">

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