Как получить данные из модели django и показать их в модальном всплывающем окне bootstrap?

Я новичок в django framework, в моем приложении есть две модели, BoardsList и BoardLink:

class BoardsList(models.Model):

   master_code = models.CharField(max_length=6, primary_key=True)
   uc_code = models.CharField(max_length=20)
   description = models.CharField(max_length=200)
   customer_name = models.CharField(max_length=30)

   def __str__(self):
      return "MASTER_CODE = " + self.master_code

class BoardLink(models.Model):
   boardsList = models.ForeignKey(BoardsList, on_delete=models.CASCADE)
   configuration_sheet_link = models.CharField(max_length=300)
   wiring_diagram_link = models.CharField(max_length=300)

   def __str__(self):
      return self.boardsList_id

А относительные представления таковы :

class BoardsListView(generic.ListView):
    template_name = 'index.html'
    context_object_name = 'boards_list'
    paginate_by = 75

    def get_queryset(self):
        query_filter = self.request.GET.get("find_master", None)
        if query_filter is not None:
           return BoardsList.objects.filter(Q(master_code__contains=query_filter) |
                                             Q(uc_code__contains=query_filter) |                                                 
                            Q(customer_name__contains=query_filter)).order_by('customer_name')

        return BoardsList.objects.order_by('master_code')
    
 class BoardLinkView(generic.DetailView):
    template_name = 'index.html'
    context_object_name = 'board_link_list'
    paginate_by = 1

    def get_queryset(self):
       query_filter = self.request.GET.get("find_master_link", None)
       if query_filter is not None:
           return BoardLink.objects.filter(Q(boardsList__exact=query_filter))

на моей html-странице я правильно отобразил данные списка досок в таблице :

<tbody>
    {% for board in boards_list %}
       <tr>
        <td>{{ board.master_code }}</td>
        <td>{{ board.uc_code }}</td>
        <td>{{ board.description }}</td>
        <td>{{ board.customer_name }}</td>
        <td>
            <form method="GET" action="">
            <button type="button" class="btn"  name="find_master_link" data-bs-toggle="modal" data-bs-target="#boardLinksModal">
                <i class="fa-solid fa-file-lines"></i>
            </button>
            </form>
        </td>
       </tr>
    {% endfor %}
  </tbody>

Теперь моя проблема заключается в том, как я могу получить запись данных модели BoardLink по событию нажатия на кнопку и показать ее на уже созданном мной bootstrap modal popup и включить его на моей html странице с помощью :

 {% include 'modalPopUp.html' %}

мой код модала такой же, как и в примере bootstrap documentantions.

заранее спасибо за ответы!!!

Это действительно вопрос о том, как работают шаблоны. Вы должны понять, что когда клиент запрашивает страницу на сервере django, django view рендерит шаблон перед тем, как отправить его обратно в браузер. Это означает, что оно обрабатывает все динамические теги в шаблоне и преобразует его в статическую html-страницу, которую отправляет запрашивающему браузеру.

Сюда входит тег {% include 'page.html'%}, который, кстати, просто великолепен.

При отображении шаблона, если внутри него есть теги {% include 'page.html'%}, то происходит извлечение html-файлов, на которые ссылаются, их преобразование в статический html и окончательное встраивание в корневой шаблон.

Все это отправляется в виде одной статической html-страницы в браузер клиента. Это означает, что хотя вы можете разбить ваш шаблон на несколько файлов, чтобы сохранить порядок, когда страница отправляется клиенту, она находится в виде уникального полностью статического html-файла, который был построен с разрешением всех динамических компонентов в виде django template tags.

Я надеюсь, что до сих пор был понятен...

Если вы поняли мое объяснение, вы также поймете, что каждый подшаблон, включенный в корневой шаблон, также имеет доступ к тем же контекстным переменным, что и сам корневой шаблон.

Так что в вашем случае, если вы включите часть html, содержащую bootstrap-модал, вы сможете ссылаться на те же контекстные переменные, которые доступны вам на странице, содержащей тег include. Поэтому попробуйте добавить {{ boards_list }} или {{ board_link_list }} в тело модала и вы увидите, что это работает прямо из коробки.

P.S. BoardLinkView - это DetailView, а ваш context_object_name - board_link_list, что вводит в заблуждение, потому что это не список. Я бы на вашем месте изменил его!

Вернуться на верх