时间戳

首页 > 解决方案 > 如何在 Django 中创建模态注册表单？

python - 如何在 Django 中创建模态注册表单？

问题描述

主页屏幕截图

模态屏幕截图

我对 Django 很陌生，所以不知道如何解决我的问题。我在视图函数中创建了一个简单的 UserCreationForm 来注册新用户。但是，我似乎无法在 boostrap 模式或我的 index.html 模板中显示表单。

我正在考虑为注册表单创建一个单独的视图，我需要一个单独的模板和 url 路径来注册新用户。我想在主页上有注册模式，而不是将用户引导到单独的注册页面。


    {% extends "myapp/base.html" %}

    {% block navbar %}
      <li class="nav-item active">
        <a class="nav-link" href="#">
          Home <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Log In</a>
      </li>
      <li class="nav-item">
        <a class="btn btn-primary nav-item" href="#" role="button" data-toggle="modal" data-target="#myModal">
          Sign Up
        </a>
      </li>
      <!-- The Modal -->
      <div class="modal fade" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title">Sign Up</h4>
              <button type="button" class="close" data-dismiss="modal">
                &times;
              </button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
              <form method="POST">
              {% csrf_token %}
                <fieldset class="form-group">
                  <legend class="border-bottom mb-4">Join today</legend>
                  {{ form.as_p }}
                </fieldset>
                <div class="form-group">
                  <button class="btn btn-outline-info" type="submit">Sign Up</button>
              </form>
              <div class="border-top pt-3">
                <small class="text-muted">
                  Already have an account? <a class="ml-2" href="#">Sign In</a>
                </small>
              </div>
            <!-- Modal footer -->
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-danger"
                data-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>        
    {% endblock navbar %}

    {% block content %}
      {{ form.as_p }}
    {% endblock content %}


from django.shortcuts import render, redirect
from django.contrib.auth.forms import UserCreationForm
from django.contrib import messages


def home(request):
    return render(request, 'myapp/index.html', {})  

def register(request):
    if request.method == 'POST':
        form = UserCreationForm(request.POST)
        if form.is_valid():
            username = form.cleaned_data.get('username')
            messages.success(request, f'Account created for {username}!')
            return redirect('index')
    else:
        form = UserCreationForm()
    return render(request, 'myapp/index.html', {'form': form})

我原以为我可以通过调用变量在模态中显示 Django 表单。当这不起作用时，我也尝试在页面正文中显示它，但这也不起作用。没有抛出任何错误。

标签： pythonhtmldjangotwitter-bootstrapbootstrap-modal

解决方案

如果要form在所有页面中显示，则需要将表单（最好调用它，login_form以免与您可能拥有的其他表单冲突）添加到每个视图的上下文中。

为了避免在所有视图中重复这样做，Django 有上下文处理器。您将它们包含在settings.py'sTEMPLATES变量中。例子

TEMPLATES = [{
    ...
    'OPTIONS': {
        'context_processors': [
            ...
            'myapp.context_processors.add_my_login_form',
        ],
    }]

然后，创建一个名为context_processors.py并在其中添加add_my_login_form()函数的文件。该函数返回login_form所有请求的请求上下文。

def add_my_login_form(request):
    return {
        'login_form': LoginForm(),
    }

推荐阅读