Insérer un formulaire Django dans la fenêtre modal

Bonjour à tous, j'ai besoin d'une aide. je n'arrive pas à afficher un formulaire Django en utilisant ModelForm dans une fenêtre modale.

voici ce que j'ai dans ma vue et models ainsi que ma page html

models.py

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
from django.db import models
 
 
# Create your models here.
 
 
class Client(models.Model):
    code_clent = models.CharField(max_length=20)
    raison_soc_cl = models.CharField(max_length=60)
    adresse_client = models.CharField(max_length=60)
    tel_client = models.CharField(max_length=13)
    fax_client = models.CharField(max_length=10)
    email = models.EmailField(max_length=35)
    code_cat=models.ForeignKey(categorie, on_delete=models.CASCADE)
    def __str__(self):
        return self.raison_soc_cl

Views.py

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
from django.forms import ModelForm
from django.shortcuts import render
from gestion.models import Client
from django.contrib import messages
 
# Create your views here.
 
class ClientForm(ModelForm):
    class Meta:
        model = Client
        fields = ['code_clent','raison_soc_cl','adresse_client','tel_client','fax_client','email','code_cat']
 
 
# Create fonction.
def DispClient(request):
    listclient = Client.objects.all()
    context = {'client': listclient}
    return render(request, 'DispClient.html', context)
 
def AddClient(request):
    formclient=ClientForm()
    if request.method == 'POST':
        formclient=ClientForm(request.POST)
        if formclient.is_valid():
            newclient=formclient.save()
            messages.success(request, 'Client ajouté avec succès')
            return render(request,'AddClient.html', {'formclient':newclient})
    context={'formclient':formclient}
    return render(request, 'AddClient.html', context)

Page qui appelle le modal (DispClient.html)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{% extends 'base.html' %}
 
{% block content %}
 
<div class="row col-md-12 mb-2">
    <a href="" class=""><i class="fas fa-user-plus mt-3 mx-4 "></i></a>
    <a href="#clientModal"><i class="fas fa-check-circle mt-3 mx-4 "></i></a>
    <a href="AddClient.html" data-toggle="modal" data-target="#clientModal" data-remote="false"><i class="fas fa-user-edit mt-3 mx-4 "></i></a>
    <a href="#matModal" data-toggle="modal" data-target="#matModal"><i class="fas fa-times-circle mt-3 mx-4 "></i></a>
    <a href=""><i class="fas fa-print mt-3 mx-4 "></i></a>
    <a href=""><i class="far fa-file mt-3 mx-4 "></i></a>
    <a href="" class="href"><i class="fas fa-cog mt-3 mx-4 "></i></a>
    <a href="" class="href"><i class="fas fa-file-invoice mt-3 mx-4 "></i></a>
    <a href="" class="href"><i class="fas fa-search mt-3 mx-4 "></i></a>
</div><hr>
 
{% include 'AddClient.html' %}
 
<div class="row col-md-12">
    <h4 class="text-left mt-4 mx-3">Liste des clients</h4>
 
    <table class="table table-hover mx-2">
        <thead>
        <tr>
            <th><b>Raison sociale</b></th>
            <th><b>Adresse</b></th>
            <th><b>Tel</b></th>
            <th><b>Fax</b></th>
            <th><b>Email</b></th>
            <th><b>Type client</b></th>
 
        </tr>
        </thead>
        <tbody>
        <tr>
            {% for clients in client %}
            <td>{{clients.raison_soc_cl}}</td>
            <td>{{clients.adresse_client}}</td>
            <td>{{clients.tel_client}}</td>
            <td>{{clients.fax_client}}</td>
            <td>{{clients.email}}</td>
            <td>{{clients.code_cat}}</td>
 
        </tr>
        {% endfor %}
        </tbody>
 
    </table>
</div>
{% endblock %}

page modale (AddClient.html)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% load crispy_forms_tags %}
 
<div class="modal fade" id="clientModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Enregistrer un client</h5>
                <button type="button" class="close" data-dismiss="modal">x</button>
            </div>
            <div class="modal-body ">
                <form method="post" action="">{% csrf_token %}
                    {{formclient | crispy }}
                </form>
            </div>
            <div class="modal-footer">
                <input class="btn btn-primary" type="submit" value="Save"/>
                <input name="cancel" class="btn" type="submit" value="Cancel"/>
            </div>
        </div>
 
 
    </div>
 
</div>