如何在 django 上使用按钮 ID 在引导模式上显示数据库中的动态内容

Question

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

这是我的 views.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 才能完成此操作。