python - 如何使用 django 上的按钮 id 在 bootstrap 模式上显示数据库中的动态内容

Question

我正在使用 for 循环加载带有简要大学详细信息的引导卡，并从我的 django View 传递上下文。现在，我想根据我按下的卡的按钮显示包含更多详细信息的模式。我希望在不重新加载/刷新页面的情况下显示此动态数据。

这是我的观点.py

from django.shortcuts import get_object_or_404
from django.http import JsonResponse
from university.models import University


def dispUni(request):

    # hoping to retrieve university.id from the clicked button
    uniPK = request.GET.get('universityId')

    uniDetails = {
        'university': get_object_or_404(University, id=uniPK)
    }

    return JsonResponse(uniDetails)

这是我的 urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.dispUni, name='uniDetails')
]

这是我的 html 页面，我想在其中显示此信息

<div class="container-fluid d-flex justify-content-center">
        <!-- display Universities -->
        <div class="row mt-5">
            {% if universities %}
                {% for university in universities %}

                <div class="card mx-4 uniCard" style="width: 20rem;">
                    <img src="{{university.photo_main.url}}" class="card-img-top" alt="{{university.title}}">
                    <div class="card-body">
                        <h5 class="card-title Dark-shades-text">{{university.title}}</h5>
                        <p class="card-text">
                            <i class="fas fa-map-marked-alt"></i>&nbsp;{{university.city}}, {{university.state}} <br>
                            <i class="fas fa-phone"></i>&nbsp;{{university.phone_number}}
                        </p>
                        <!-- Button trigger modal -->
                        <button type="button" value="{{university.id}}" id="btn-UniModal{{university.id}}" class="btn main-color" data-toggle="modal" data-target="#UniDetails">
                            View Details
                        </button>
                    </div>
                </div>

                {% endfor %}
            {% endif %}
        </div>
    </div>

    <!-- Modal for University Details -->
    <div class="modal fade" id="UniDetails" tabindex="-1" role="dialog" aria-labelledby="UniInformation" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="UniModalTitle"><!-- Expected title of university button pressed --></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Expected details of university button pressed -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Apply</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

我相信这个问题可以通过 Javascript 轻松解决。您可以在调用函数来更新模型的按钮上放置一个 onclick 属性。

标题可以更新为:

document.getElementById("UniModalTitle").innerHTML = "University Title";

然后，更新详细信息的过程相同，但 ID 不同。您需要为模型主体提供一个 ID 才能使其工作。