質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

588閲覧

Django / django-bootstrap4: 複数行入力フォームでの入力が反映されない

tetsuk

総合スコア6

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2020/11/20 11:12

編集2020/11/21 01:27

前提・実現したいこと

Djangoでclass-based viewを使ってブログアプリを作っています。
装飾にdjango-bootstrap4を使っていますが、入力フォームで複数行を入力する仕様を実装するところでつまずいています。

入力フォームを表示させるところまではできていますが、
送信ボタンを押しても、ブログ本体にタイトルと日付しか反映されず、本文が反映されません。
(後述の通り、複数行でなく、一行で本文を入力する仕様であれば実装できています)

アドバイス頂ければ幸いです。

発生している問題・エラーメッセージ

送信ボタンを押しても、ブログ本体にタイトルと日付しか反映されず、本文が反映されません。

該当のソースコード

blogproject/blogpost/views.py

python

1from django.shortcuts import render 2from django.urls import reverse_lazy 3from django.views.generic import ListView, DetailView, CreateView, DeleteView, UpdateView 4 5from .models import BlogModel 6from .forms import BlogForm 7 8 9class BlogList(ListView): 10 """ 一覧表示 """ 11 template_name = 'list.html' 12 model = BlogModel 13 14class BlogDetail(DetailView): 15 """ 詳細表示 """ 16 template_name = 'detail.html' 17 model = BlogModel 18 19class BlogCreate(CreateView): 20 """ 記事作成 """ 21 template_name = 'create.html' 22 model = BlogModel 23 form_class = BlogForm 24 success_url = reverse_lazy('list')

blogproject/blogpost/models.py

python

1from django.db import models 2 3 4class BlogModel(models.Model): 5 title = models.CharField(max_length=100) 6 content = models.TextField() 7 postdate = models.DateField(auto_now_add=True) 8 9 def __str__(self): 10 return self.title

blogproject/blogpost/forms.py

python

1from django import forms 2from .models import BlogModel 3 4class BlogForm(forms.ModelForm): 5 content = forms.CharField(widget=forms.Textarea) 6 class Meta: 7 model = BlogModel 8 fields = ('title',)

blogproject/blogpost/url.py

python

1from django.urls import path 2from .views import BlogList, BlogDetail, BlogCreate, BlogDelete, BlogUpdate 3 4urlpatterns = [ 5 path('list/', BlogList.as_view(), name='list'), 6 path('detail/<int:pk>/', BlogDetail.as_view(), name='detail'), 7 path('create/', BlogCreate.as_view(), name='create'), 8 path('delete/<int:pk>', BlogDelete.as_view(), name='delete'), 9 path('update/<int:pk>', BlogUpdate.as_view(), name='update'), 10]

blogproject/templates/create.html

html

1{% extends "base.html" %} 2{% load bootstrap4 %} 3 4{% block title %}ブログ{% endblock %} 5 6{% block content %} 7 8<form class="mt-4 mb-3" action="" method="POST"> 9 {% csrf_token %} 10 {% bootstrap_form form %} 11 <input type="submit" class="btn btn-primary" value="作成する"> 12</form> 13 14{% endblock %}

blogproject/templates/base.html

html

1<!DOCTYPE html> 2{% load bootstrap4 %} 3{% bootstrap_css %} 4{% bootstrap_javascript jquery='slim' %} 5<html lang="ja"> 6 <head> 7 <meta charset="utf-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10 <title>{% block title %}{% endblock %}</title> 11 12 {# --- css --- #} 13 {% block extra_css %}{% endblock %} 14 15 {% block header %}{% endblock header %} 16 17 </head> 18 <body> 19 <main class="container"> 20 {% block content %}{% endblock content %} 21 </main> 22 {# --- js --- #} 23 {% block extra_js %}{% endblock %} 24 </body> 25</html> 26

試したこと

元々blogproject/blogpost/forms.pyを作成しておらず、models.pyからviews.pyへの直接のやり取りとしていたのですが、
その場合は、本文の入力も、ブログ本体に問題なく反映されていました。

複数行入力できる仕様のためには、textareaの設定が必要と考え、それをforms.pyで実現しようとしましたが、
forms.pyからviews.pyに上手くデータが繋がっていない状態かと思います。

views.pyの BlogCreate クラスから model = BlogModel を削除してみましたが、結果は変わりませんでした。

一方で、forms.pyのBlogFormクラスのMetaクラスのfieldsにtitleのほか、contentも要素に加えると、本文もブログ本体に反映されますが、
(実質forms.pyの機能がなくなってしまうため)複数行で入力しようとしても一行で反映されてしまいます。

補足情報(FW/ツールのバージョンなど)

Django Version: 3.1.2
Python Version: 3.9.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

以下の処理をして自己解決しました(複数行の入力がブログ本体に反映されるようになりました)
こちらでattakeiさんにアドバイス頂いたことを参考にしました)

  • list.htmlの該当箇所を以下に変更

変更前

html

1  <h6 class=card-title>{{ item.content }}</h6>

変更後

html

1 <h6 class=card-title>{{ item.content|linebreaks }}</h6>
  • views.pyBlogCreate クラスから model = BlogModel を削除
  • forms.pyBlogFormクラス内のMetaクラスのfieldsにtitleのほか、contentも要素に追加

投稿2020/11/25 13:50

編集2020/11/25 13:56
tetsuk

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問