如何在Django中处理多页面复用的Bootstrap模态框？

通用实现思路 #

针对全站复用的模态框场景，业内通用的方案是通过全局上下文处理器注入表单、基础模板封装模态框代码、独立视图处理提交逻辑的组合方案实现，完全符合DRY原则。不需要专门定义特殊类处理多表单冲突，Crispy Forms属于可选项，用于简化表单渲染和样式统一，不是必须依赖。

具体实现步骤（以全站「联系我们」模态框为例） #

1. 定义联系表单 #

先在应用的forms.py中编写表单类，可按需选择是否搭配Crispy Forms使用：

from django import forms
# 若使用Crispy Forms则引入以下依赖
# from crispy_forms.helper import FormHelper
# from crispy_forms.layout import Submit

class ContactForm(forms.Form):
    name = forms.CharField(label="姓名", max_length=100, required=True)
    email = forms.EmailField(label="联系邮箱", required=True)
    message = forms.CharField(label="留言内容", widget=forms.Textarea(attrs={"rows":4}), required=True)

    # 启用Crispy Forms时添加该方法自动生成符合Bootstrap规范的表单代码
    # def __init__(self, *args, **kwargs):
    #     super().__init__(*args, **kwargs)
    #     self.helper = FormHelper()
    #     self.helper.form_id = "contact-modal-form"
    #     self.helper.form_action = "/submit-contact/"
    #     self.helper.add_input(Submit('submit', '提交留言', css_class="w-100"))

2. 配置全局上下文处理器 #

通过上下文处理器将联系表单注入到所有页面的模板上下文，不用每个视图单独传参：

1. 在应用下新建context_processors.py：

from .forms import ContactForm

def global_contact_form(request):
    return {"contact_form": ContactForm()}

2. 在settings.py中注册上下文处理器：

TEMPLATES = [
    {
        # 其他配置保持不变
        'OPTIONS': {
            'context_processors': [
                # 原有默认上下文处理器保留，新增下面一行
                '你的应用名.context_processors.global_contact_form',
            ],
        },
    },
]

3. 基础模板封装模态框代码 #

所有页面继承的公共基础模板（通常为base.html）中加入模态框唤起按钮和模态框本身的代码：

<!-- 导航栏中加入唤起按钮 -->
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container">
    <!-- 原有导航栏代码不变 -->
    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#contactModal">
      联系我们
    </button>
  </div>
</nav>

<!-- 页面底部加入模态框代码 -->
<div class="modal fade" id="contactModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">联系我们</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 不用Crispy Forms的写法：手动渲染表单 -->
        <form id="contact-form" action="{% url 'submit_contact' %}" method="post">
          {% csrf_token %}
          {{ contact_form.as_p }}
          <button type="submit" class="btn btn-primary w-100 mt-3">提交留言</button>
        </form>
        <!-- 用Crispy Forms的写法：一行代码渲染整个表单 -->
        <!-- {% crispy contact_form %} -->
      </div>
    </div>
  </div>
</div>

4. 编写独立提交视图 #

单独写一个视图处理表单提交逻辑，和页面本身的业务视图完全解耦：

from django.shortcuts import redirect
from django.contrib import messages
from django.http import JsonResponse
from .forms import ContactForm

def submit_contact(request):
    if request.method != "POST":
        return redirect("/")
    form = ContactForm(request.POST)
    if not form.is_valid():
        # 普通表单提交跳转回原页面
        messages.error(request, "提交失败，请检查输入内容是否符合要求")
        return redirect(request.META.get('HTTP_REFERER', '/'))
        # 若使用AJAX提交则返回JSON响应
        # return JsonResponse({"status":"error", "msg":"输入内容有误"})
    
    # 表单校验通过后执行业务逻辑：比如存库、发通知邮件等
    # handle_contact_data(form.cleaned_data)
    
    # 普通表单提交逻辑
    messages.success(request, "留言提交成功，我们会在1-3个工作日内回复您")
    return redirect(request.META.get('HTTP_REFERER', '/'))
    # AJAX提交逻辑
    # return JsonResponse({"status":"success", "msg":"提交成功"})

最后在urls.py中注册提交路由：

from django.urls import path
from . import views

urlpatterns = [
    # 原有路由不变
    path("submit-contact/", views.submit_contact, name="submit_contact"),
]

优化建议 #

如果想要实现无刷新提交的体验，只需要在基础模板中加入一段JS代码监听表单提交事件，用AJAX发送请求即可，不需要修改后端核心逻辑。

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