Django基于类的注册视图无法在Bootstrap模态框显示表单的问题咨询

我尝试将Django的SignUpView（基于CreateView的类视图）作为Bootstrap模态框展示，但点击触发按钮后表单无法显示。现有代码如下：

views.py中的SignUpView： #

class SignUpView(CreateView):
    form_class = UserCreationForm
    template_name = 'avapp/signup.html'
    success_message = 'Success: Sign up succeeded. You can now Log in.'
    success_url = reverse_lazy('index') 

index.html（首页模板）： #

{% extends 'base.html' %}

{% load static %}

{% block content %}

    <h1 style="text-align: center;color: #568203 " > Avakado App</h1>
    <center>
        <a class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#exampleModal    " >
            <img style="text-align: center" src="{% static '1_org.jpg' %}" width="300" height="450" >
        </a>
    </center>
    
{% endblock  %}

signup.html（注册模板，包含模态框）： #

<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>
        <form action="/signup" method="POST">
        <div class="modal-body">
        {% csrf_token %}
        {{form}}
        </div>
        </form>
        <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>

当前模态框仅显示空的结构，表单内容无法加载。我想了解是否可以不使用Ajax或更改基于类的视图的情况下解决该问题？

可以不用Ajax或修改SignUpView类视图，按以下步骤调整即可：

1. 将模态框模板引入首页 #

在index.html的content块末尾添加对signup.html的引入，让模态框的HTML代码渲染在首页中：

{% block content %}
    <!-- 原有首页内容 -->
    <h1 style="text-align: center;color: #568203 " > Avakado App</h1>
    <center>
        <a class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#exampleModal" >
            <img style="text-align: center" src="{% static '1_org.jpg' %}" width="300" height="450" >
        </a>
    </center>
    
    <!-- 引入模态框模板 -->
    {% include 'avapp/signup.html' %}
{% endblock  %}

2. 修改首页视图，传递表单实例 #

假设你的首页视图是TemplateView，修改其get_context_data方法，把UserCreationForm的实例传入模板，让模态框里的{{form}}能渲染出表单字段：

from django.views.generic import TemplateView
from django.contrib.auth.forms import UserCreationForm

class IndexView(TemplateView):
    template_name = 'avapp/index.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        # 添加表单实例到上下文
        context['form'] = UserCreationForm()
        return context

3. 修正Bootstrap模态框属性兼容问题 #

你当前混用了Bootstrap 4和Bootstrap 5的属性，data-bs-toggle是Bootstrap 5写法，但关闭按钮用的是Bootstrap 4的data-dismiss，需统一改为Bootstrap 5的data-bs-dismiss，同时更新关闭按钮样式：

<!-- 修改模态框头部的关闭按钮 -->
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

<!-- 修改模态框底部的关闭按钮 -->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

4. 调整表单提交按钮类型 #

将模态框底部的"Save changes"按钮改为submit类型，点击时才能提交表单到SignUpView处理：

<button type="submit" class="btn btn-primary">Save changes</button>

原理说明 #

• 首页视图传递表单实例后，模板里的{{form}}就能渲染出完整的注册表单字段；
• 表单的action属性指向SignUpView的URL，提交后依然由原有的SignUpView处理注册逻辑，无需修改该类视图；
• 整个过程未使用Ajax，完全通过Django模板渲染和常规表单提交实现。

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