在模态框内渲染表单 - django答案

【问题标题】：Render a form inside a modal - django在模态框内渲染表单 - django
【发布时间】：2021-03-25 13:28:03
【问题描述】：

对于比我更有经验的人来说，我的问题可能很简单，所以我希望您能在以下方面提供帮助。我想在我的网站上使用模式登录/注册，但在模式内呈现表单时遇到问题。

我已经创建了一个 urls.py 文件

app_name = "users"
urlpatterns = [
    path('register/', UserRegisterView.as_view(), name='register')
]

加载 AccountRegisterForm 的 views.py 文件

class UserRegisterView(SuccessMessageMixin, CreateView):
    template_name = 'users/register.html'
    form_class = AccountRegisterForm
    success_url = '/'
    success_message = "Your account has been created!"

模板

<li class="list-inline-item list_s"><a href="#" class="btn flaticon-user" data-toggle="modal" data-target=".bd-example-modal-lg"> <span class="dn-lg">Login/Register</span></a></li>
                </ul>
            </nav>
        </div>
    </header>
    <!-- Modal -->
    <div class="sign_up_modal modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body container pb20">
                    <div class="row">
                        <div class="col-lg-12">
                            <ul class="sign_up_tab nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Login</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Register</a>
                                </li>
                            </ul>
                        </div>
                    </div>

和形式：

<form method="POST" form action="{% url 'users:register' %}">
                                        {% csrf_token %}
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <button type="submit" class="btn btn-block btn-fb"><i class="fa fa-facebook float-left mt5"></i> Login with Facebook</button>
                                            </div>
                                            <div class="col-lg-12">
                                                <button type="submit" class="btn btn-block btn-googl"><i class="fa fa-google float-left mt5"></i> Login with Google</button>
                                            </div>
                                        </div>
                                        <hr>
                                        {{form.as_p}}
                                        <div class="form-group custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="exampleCheck2">
                                            <label class="custom-control-label" for="exampleCheck2">I have read and accept the Terms and Privacy Policy?</label>
                                        </div>
                                        <button type="submit" class="btn btn-log btn-block btn-thm">Sign Up</button>
                                        <p class="text-center">Already have an account? <a class="text-thm" href="#">Log In</a></p>
                                    </form>

现在，可以从 http://localhost:7000 打开模式，用户可以点击登录/注册按钮。但是，我创建了一个新的 url http://localhost:7000/users/register，可以通过单击 Login/Register 再次打开模式，然后我成功呈现表单。问题是我如何在主页而不是 /users/register 中呈现表单？谢谢！

【问题讨论】：

您的主页是如何呈现的？你使用什么样的视图？模板视图，或其他带有上下文的视图？换句话说，内容是静态的吗？
我正在使用 (TemplateView) 类 HomeView(TemplateView): template_name = 'pages/index.html'

标签： javascript django forms django-urls

【解决方案1】：

如果您在 TemplateView 中使用表单，则无法访问表单变量，因此您必须在 HTML 中手动对其进行编码。转到您的 /users/register 页面并查看源代码，复制表单并将其粘贴到您的主页模式中。

【讨论】：