django 使用物化模式创建表单答案

【问题标题】：django create form with materialize modaldjango 使用物化模式创建表单
【发布时间】：2018-10-15 13:00:13
【问题描述】：

据我尝试，我无法通过物化 css 模态获取表单数据或将其发送到 django 视图函数。我只是 js、ajax 和相关领域的新手。
我的表单的“CreateView”操作在外部运行，但它需要在模式内部并且仍然可以获得使用 django 表单验证、安全性等的好处。我正在使用 Django 1.11 版。
该项目有两个应用程序：加载主页的 main 和对书籍对象执行操作的 library。一本书只有一个标题，所以有一个定义如下的表单：

库/forms.py：

from django import forms
from .models import Book

class BookForm(forms.ModelForm):
    class Meta:
        model = Book
        fields = [
            'title', 
        ]

项目的url定义，mysite/urls.py：

from django.conf.urls import url, include
from django.contrib import admin
from main import views as main_views

urlpatterns = [
    url(r'^$', main_views.home, name='home'),
    url(r'^books/', include('library.urls')),
    url(r'^admin/', admin.site.urls),
]

主页视图，main/views.py：

from django.shortcuts import render

def home(request):
    return render(request, 'main/home.html')

main/templates/main/home.html：

<html>
  <head>
    <title>A library</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
  <body>
    {% block body %}
    <div class="container">
      <!--a class="waves-effect waves-light btn modal-trigger" href="#modal1">Create Book</a-->
      <a class="waves-effect waves-light btn modal-trigger" data-target="add_book_modal" href="{% url 'books:create' %}">
        Create Book
      </a>
      <div class="divider"></div>
        <div class="section">
          <h5>Section 1</h5>
          <p>Stuff</p>
        </div>
      </div>
    {% endblock %}

    {% include 'library/book_form.html' %}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    <script>
    $( document ).ready(function() {
      $('.modal').modal();
    });
    </script>
  </body>
</html>

库的url，library/urls.py：

from django.conf.urls import url
from .views import BookCreateView
app_name='books'

urlpatterns = [
    url(r'^create/$', BookCreateView.as_view(),  name='create'),
]

库/views.py：

from django.shortcuts import render
from django.views.generic import CreateView
from django.urls import reverse_lazy

from .models import Book
from .forms import BookForm

class BookCreateView(CreateView):
    form_class = BookForm
    template_name = 'library/book_form.html' 
    success_url = reverse_lazy('home')

图书馆/模板/图书馆/book_form.html：

<div id="add_book_modal" class="modal">
  <div class="modal-content">
  {% block body %}
    <main>
    <h5>Add book information</h5>
    {% if form.errors.non_field_errors %}
      {{ form.errors.non_field_errors }}
    {% endif %}
    <form method="POST">
      {% csrf_token %}
      {{ form.non_field_errors }}
      {{ form.source.errors }}
      {{ form.source }}
      <!--Form content-->
      {{form.as_p}}
      <!--Form button-->
      <button class="btn waves-effect waves-light" type="submit" name="action">Submit
      </button>    
    </form>
    </main>
  {% endblock %}
  </div>
</div>

任何帮助将不胜感激。

【问题讨论】：

你在BookCreateView中使用的方法在哪里？
form_valid() form_invalid() get() post() 是有用的方法
我正在使用它们的默认行为。在它现在的工作方式中，加载主页后，当按下 home.html 中的 Create book 链接时，它会重定向到书籍创建 url，触发 BookCreateView 并呈现 book_form.html表单数据。就像 data-target 指向 add_book_modal 我天真地期望它使用该 id 加载 div 中的数据，而不是将整个模板呈现为新模板。
还是谢谢你，我会想办法用这些方法来帮助我。

标签： django forms modal-dialog materialize

【解决方案1】：

更改 a href 链接并设置将呈现内容的 html 代码位置
main/templates/main/home.html：

...
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Create Book</a>
...
<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <!--Form content goes in here.-->
  </div>
</div>
{% endblock %}
<!-- django include tag removed -->

jquery 通过 django 的路由以模态形式呈现表单
main/templates/main/home.html：

<script>
$( document ).ready(function() {
  $('.modal').modal();
  $('.modal-content').load("{% url 'books:create' %}");
});
</script>

最后，指定返回路线的预订表格。
_library/templates/library/book_form.html_：

<h5>Add book information</h5>
{% if form.errors.non_field_errors %}
  {{ form.errors.non_field_errors }}
{% endif %}
<form method="POST" action="{% url 'books:create' %}">
  {% csrf_token %}
  {{ form.non_field_errors }}
  {{ form.source.errors }}
  {{ form.source }}
  <!--Form content-->
  {{form.as_p}}
  <!--Form button-->
  <button class="btn waves-effect waves-light" type="submit" name="action">Submit form
  </button>    
</form>

【讨论】：