Django данные сохраняются в базе данных, но не отображаются в шаблоне

Question

Django данные сохраняются в базе данных, но при доступе к данным в шаблоне их отображение ничем. The models.py, views.py и home. html код файла ниже, когда я вводил данные в поле и распечатать его в функции добавления, которое отображается, но не отображается в шаблоне. Я использую модал для отображения данных models.py

from django.db import models

class ToDo(models.Model):
    title = models.CharField(max_length=100)
    detail = models.TextField()
    published_date = models.DateTimeField()

    def __str__(self):
        return self.title

views.py

from django.shortcuts import render, HttpResponse, redirect
from django.utils import timezone
from todoapp.models import ToDo

def home(request):
    todo_items = ToDo.objects.all()
    context = {'todoItems': todo_items}
    return render(request, 'todoapp/home.html', context)

def add(request):
    if request.method=="POST":
        addTitle = request.POST['addTitle']
        addDetail = request.POST['addDetail']
        current_date = timezone.now()

        addedObject = ToDo.objects.create(title=addTitle, detail=addDetail, published_date=current_date)
        return redirect('home')
    return render(request, 'todoapp/home.html')

home. html " Файл шаблона "

{%load static%} {%include 'header.html'%}
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
    <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="{% url 'home'%}">todo application</a>
        <button class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item mx-0 mx-lg-1">
                    <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" data-toggle="modal" data-target="#addModal" href="add">add new</a>
                </li>
                <li class="nav-item mx-0 mx-lg-1">
                    <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="{%url 'home'%}">todo list</a>
                </li>

            </ul>
        </div>
    </div>
</nav>

<!-- Masthead -->
<header class="masthead bg-primary text-white text-center">
    <div class="container d-flex align-items-center flex-column">

        <!-- Masthead Avatar Image -->
        <img class="masthead-avatar mb-5" src="{%static 'images/avataaars.svg' %}" alt="">

        <!-- Masthead Heading -->
        <h1 class="masthead-heading text-uppercase mb-0">Todo Application </h1>

        <!-- Icon Divider -->
        <div class="divider-custom divider-light">
            <div class="divider-custom-line"></div>
            <div class="divider-custom-icon">
                <i class="fas fa-star"></i>
            </div>
            <div class="divider-custom-line"></div>
        </div>

        <!-- Masthead Subheading -->
        <p class="masthead-subheading font-weight-light mb-0">Web Developer - Web Designer - Coder</p>

    </div>
</header>

<!-- Portfolio Section -->
<section class="page-section portfolio" id="portfolio">
    <div class="container">

        <!-- Portfolio Section Heading -->
        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">portfolio</h2>

        <!-- Icon Divider -->
        <div class="divider-custom">
            <div class="divider-custom-line"></div>
            <div class="divider-custom-icon">
                <i class="fas fa-star"></i>
            </div>
            <div class="divider-custom-line"></div>
        </div>

        <!-- Portfolio Grid Items -->
        <div class="row">

            <!-- Portfolio Item 1 -->
            <div class="col-md-6 col-lg-4">
                <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
                    <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                        <div class="portfolio-item-caption-content text-center text-white">
                            <i class="fas fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img class="img-fluid" src="{% static 'images/portfolio/cabin.png'%}" alt="">

                </div>
            </div>




        </div>
        <!-- /.row -->

    </div>
</section>

<!-- About Section -->
<section class="page-section bg-primary text-white mb-0" id="about">
    <div class="container">

        <!-- About Section Heading -->
        <h2 class="page-section-heading text-center text-uppercase text-white">About</h2>

        <!-- Icon Divider -->
        <div class="divider-custom divider-light">
            <div class="divider-custom-line"></div>
            <div class="divider-custom-icon">
                <i class="fas fa-star"></i>
            </div>
            <div class="divider-custom-line"></div>
        </div>

        <!-- About Section Content -->
        <div class="row">
            <div class="col-lg-12 ml-auto text-center">
                <p class="lead">Hi! Im Zeeshan Tariq. I have 3 plus years of experience in web Application Development, Software Development, Front End Development, WordPress theme customization , woocommerce customization, wordpress security, SEO, keywords research, on-page seo, off-page seo,speed optimization, custom web application development using python django web framework, API design, database design and development.</p>
            </div>

        </div>
    </div>
</section>

<!-- Portfolio Modals -->

<!-- add  Modal  -->
<div class="portfolio-modal modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModal" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">
            <i class="fas fa-times"></i>
          </span>
            </button>
            <div class="modal-body text-center">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <!-- Portfolio Modal - Title -->
                            <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Add Todo</h2>
                            <!-- Icon Divider -->
                            <div class="divider-custom">
                                <div class="divider-custom-line"></div>
                                <div class="divider-custom-icon">
                                    <i class="fas fa-star"></i>
                                </div>
                                <div class="divider-custom-line"></div>
                            </div>
                            <!-- Portfolio Modal - Image -->

                            <!-- Portfolio Modal - Text -->
                            <p class="mb-5">
                                <div class="row">
                                    <div class="col-lg-8 mx-auto">

                                        <form action="{% url 'add'%}" method="post">
                                          {%csrf_token%}
                                            <div class="control-group">
                                                <div class="form-group floating-label-form-group controls mb-0 pb-2">
                                                    <label>Title </label>
                                                    <input class="form-control" id="addTitle" name="addTitle"  type="text" placeholder="Title" required="required" data-validation-required-message="Please enter the title.">
                                                    <p class="help-block text-danger"></p>
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <div class="form-group floating-label-form-group controls mb-0 pb-2">
                                                    <label>Detail</label>
                                                    <input class="form-control" id="addDetail" name="addDetail" type="text" placeholder="Detail" required="required" data-validation-required-message="Please enter the description.">
                                                    <p class="help-block text-danger"></p>
                                                </div>
                                            </div>

                                            <br>
                                            <div id="success"></div>
                                            <div class="form-group">
                                                <button type="submit" class="btn btn-primary btn-xl" id="sendMessageButton">Add</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </p>
                            <button class="btn btn-primary" href="#" data-dismiss="modal">
                                <i class="fas fa-times fa-fw"></i> Close Window
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-labelledby="portfolioModal1Label" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">
            <i class="fas fa-times"></i>
          </span>
            </button>
            <div class="modal-body text-center">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <!-- Portfolio Modal - Title -->
                            <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">{{todoItems.title}}</h2>
                            <!-- Icon Divider -->
                            <div class="divider-custom">
                                <div class="divider-custom-line"></div>
                                <div class="divider-custom-icon">
                                    <i class="fas fa-star"></i>
                                </div>
                                <div class="divider-custom-line"></div>
                            </div>
                            <!-- Portfolio Modal - Image -->
                            <img class="img-fluid rounded mb-5" src="img/portfolio/cabin.png" alt="">
                            <!-- Portfolio Modal - Text -->
                            <p class="mb-5">{{todoItems.detail}}</p>
                            <button class="btn btn-primary" href="#" data-dismiss="modal">
                                <i class="fas fa-times fa-fw"></i> Close Window
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{%include 'footer.html'%}