Как получить разные данные в разных разделах в HTML?

У меня есть страница, на которой есть различные аккордеоны bootstrap. У меня есть различные модели, хранящиеся в базе данных, теперь я хочу получить их в правильном порядке.

class CaseStudy_list(models.Model):
                    CaseStudy_id = models.IntegerField(primary_key=True)
                    title = models.CharField(max_length=255)
                    
                    def __str__(self):
                        return self.title

                class CaseStudy_parts(models.Model):   #accordians
                    case_study = models.ForeignKey(CaseStudy_list, on_delete=models.CASCADE)
                    CaseStudy_part_id = models.AutoField(primary_key=True)
                    CaseStudy_order = models.IntegerField(default="")
                    CaseStudy_title_accordian = models.CharField(max_length=255)
                    
                    
                    def __str__(self):
                        return self.CaseStudy_title_accordian

                class CaseStudy_content(models.Model):   #column 1 - text area
                    case_study = models.ForeignKey(CaseStudy_list, on_delete=models.CASCADE)
                
                    content_title = models.CharField(max_length=255, default="")
                    content_text = models.TextField(blank=True)
                    content_link = models.TextField(blank=True)
                    
                    def __str__(self):
                        return self.content_title

                class CaseStudy_Media(models.Model):    #column 2 - Media Area
                    case_study = models.ForeignKey(CaseStudy_list, on_delete=models.CASCADE)
                    content_img = models.ImageField(upload_to='casestudy/images', default="")
                    

                class CaseStudy_buttons(models.Model):
                    content = models.ForeignKey(CaseStudy_content, on_delete=models.CASCADE)
                    button_id = models.CharField(max_length=255)
                    button_label = models.CharField(max_length=255)



<div class="page-layout">
    <div class="accordion" id="accordionPanelsStayOpenExample">
      
      <div class="accordion-item">
        <h6 class="accordion-header">
          <button class="accordion-button" type="button" data-bs-toggle="collapse"
            data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
            aria-controls="panelsStayOpen-collapseOne">
            
            {{content.section_title}}
          </button>
        </h6>
        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
          <div class="accordion-body">
            <div class="container-area">
              <div class="col-content">
                <div class='introduction-content'>
                  <h3>CASESTUDY ID - {{casestudy_obj.id}} </h3><br>
                  <h3>TITLE - {{ casestudy_obj.title }} </h3> <br>
                  
                  <h3>OBJECTIVE - {{content.content_text}}</h3>
                </div>
              </div>
              <div class="col-data">
                

                <img src="{{content.content_img.url}}">
              
              </div>
            </div>
          </div>
        </div>
      </div>
   
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
            aria-controls="panelsStayOpen-collapseTwo">
            DATA COLLECTION
          </button>
        </h2>
        <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
          <div class="accordion-body">
            <div class="container-area">
              <div class="col-content">
                <div class='introduction-content'>
                  <h2>DATA COLLECTION </h2>

                  <h2>Hello
                  </h2>
                  <button type="button" class="process-btn btn btn-info">LOAD DATA</button>
                  <h3 id="time-taken">Time Taken : ________ </h3>
                  <h3 id="time-taken">Data Size : ________ </h3>
                </div>
              </div>
              <div class="col-data">
                <img src="{% static 'images/iris-full-img.png' %}">
                
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

def casestudy(request, CaseStudy_id ):
    casestudy_object = get_object_or_404(CaseStudy_list, CaseStudy_id = CaseStudy_id)
    casestudy_part = CaseStudy_parts.objects.filter(case_study=casestudy_object).order_by('CaseStudy_order')
    context = {
        'casestudy_object': casestudy_object,
        'casestudy_part': CaseStudy_parts,
    }
    return render(request, 'casestudy.html', context)

Здесь представлены различные тематические исследования, каждое из которых перенаправляет на новую страницу, где информация хранится в аккордеонах; эти аккордеоны могут быть очень разными по количеству для разных тематических исследований.

Теперь я хочу знать, чтобы получить данные, я должен сделать объекты для каждой таблицы. А как вы показываете данные, хранящиеся в разных таблицах?

Это мой первый проект django, пожалуйста, помогите

Я считаю, что вы смешиваете моделирование баз данных с концепциями разметки и CSS и слишком усложняете ситуацию.

Кроме того, прежде чем предложить вам решение, я хотел бы отметить, что соглашения об именовании - это хорошая практика. Часто используется PascalCase для классов и snake_case для функций и переменных.

models.py

class Case(models.Model):
    id = models.BigAutoField(primary_key=True)
    title = models.CharField(max_length=255)
    objective = models.TextField(blank=True)


class CaseStudy(models.Model):
    case = models.ForeignKey(Case, on_delete=models.CASCADE, related_name="studies")
    title = models.CharField(max_length=255, default="")
    order = models.IntegerField(default="")
    img = models.ImageField(upload_to="casestudy/images", default="")

views.py

def case_detail(request, pk):
    case = Case.objects.get(pk=pk)
    return render(request, "case/detail.html", {"case": case})

case/detail.html

<div class="page-layout">
  <div class="accordion" id="accordionPanelsStayOpenExample">
    <div class="accordion-item">
      <h6 class="accordion-header">
        <button
          class="accordion-button"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#panelsStayOpen-collapseOne"
          aria-expanded="true"
          aria-controls="panelsStayOpen-collapseOne"
        >
          {{content.section_title}}
        </button>
      </h6>

      <div
        id="panelsStayOpen-collapseOne"
        class="accordion-collapse collapse show"
      >
        <div class="accordion-body">
          <div class="container-area">
            <div class="col-content">
              <div class="introduction-content">
                <h3>CASESTUDY ID - {{case.id}}</h3>
                <br />
                <h3>TITLE - {{ case.title }}</h3>
                <br />

                <h3>OBJECTIVE - {{case.objective}}</h3>
              </div>
            </div>
            <div class="col-data">
              <img src="{{content.content_img.url}}" />
            </div>
          </div>
        </div>
      </div>
    </div>

    {% for study in case.studies.all|dictsort:"order" %}
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button
          class="accordion-button collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#panelsStayOpen-{{study.id}}"
          aria-expanded="false"
          aria-controls="panelsStayOpen-{{study.id}}"
        >
          {{study.title}}
        </button>
      </h2>

      <div
        id="panelsStayOpen-{{study.id}}"
        class="accordion-collapse collapse"
      >
        <div class="accordion-body">
          <div class="container-area">
            <div class="col-content">
              <div class="introduction-content">
                <h2>{{study.title}}</h2>
                <button type="button" class="process-btn btn btn-info">
                  LOAD DATA
                </button>
                <h3 id="time-taken">Time Taken : ________</h3>
                <h3 id="time-taken">Data Size : ________</h3>
              </div>
            </div>
            <div class="col-data">
              <img src="{{study.img.url}}" />
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

Несколько мыслей:

  1. Не нужно объявлять id поля, Django делает это автоматически
    2. .
  2. Связанные объекты попадают непосредственно в шаблон, используя обратную связь и также упорядочиваются там.
  3. Также обратите внимание на то, как объявлен элемент id: id="panelsStayOpen-{{study.id}}"
Вернуться на верх