如何使用 Django 将内容从数据库动态加载到 Bootstrap 模式中答案

【问题标题】：How to load content dynamically from database into Bootstrap modal using Django如何使用 Django 将内容从数据库动态加载到 Bootstrap 模式中
【发布时间】：2020-08-31 20:33:10
【问题描述】：

我正在开发一个测试应用程序，该应用程序在 HTML 表中列出数据库中的用户，我想要实现的是，当您单击特定记录或行的任何图标时，会显示该记录的完整详细信息在引导模式中。我的问题是如何实现我的视图、url 以及我的模板？我在这里需要 Javascript 帮助吗？因为在 PHP 中，这很容易在没有 JavaScript 的情况下完成。 Plesae 我更喜欢代码示例来纠正我的问题，谢谢。

这是我的看法

def users(request):
    get_users = User.objects.all()
    return render(request, 'classwork_app/users.html', {'users':get_users})

我的网址

from classwork_app import views

app_name = 'classwork_app'

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

模板

<table class="table table-bordered">
            <tr>
              <th>S/N</th>
              <th>Username</th>
              <th>Firstname</th>
              <th>Lastname</th>
              <th colspan="2">Action</th>
            </tr>

            {% if users %}
              {% for u in users %}
                <tr>
                  <td>{{ forloop.counter }}</td>
                  <td>{{ u.username }}</td>
                  <td>{{ u.first_name }}</td>
                  <td>{{ u.last_name }}</td>
                  <td style="font-size: 12px"><a data-toggle="modal"  href="#MyModal{{ u.id }}"><i class="fa fa-eye"></i></a></td>
                </tr>
              {% endfor %}
            {% endif %}

          </table>

          <div id="#MyModal{{ u.id }}" class="modal fade" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">{{ u.first_name }} {{ u.last_name }}</h4>
                </div>
                <div class="modal-body">
                  <p>
                    Username: {{ u.username }}
                    Firstname: {{ u.first_name }}
                    Lastname: {{ u.last_name }}
                  </p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>

            </div>
          </div>

【问题讨论】：

我只是这方面的新手，还在学习，所以请在这里给我投反对票，但是您在定义 for 的循环之外使用 u u。 u 是否在 {% endfor %} 之后显示任何内容？
是的，但我知道不是问题，我的问题是如何构造视图和 url

标签： python django twitter-bootstrap modal-dialog bootstrap-modal

【解决方案1】：

您可以尝试将模态 html 代码放入 for user 迭代器中。这样，它将为您列表中的每个用户加载一个包含用户内容的模式（如果您有大量数据，则不太推荐，可能会导致性能问题）

【讨论】：