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

Question

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

这是我的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才能使它工作。