Django data saved in the database but not show in the template - django

Question

Django data is saved in the database but, when access the data in template its display nothing.the models.py, views.py and home.html file code is below, when I entered data in the field and print it in add function it display but does not display in the template. Im using the modal to display the data
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 "Template file"
{%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'%}