Django：使用引导模式将模型 ID 传递到 url

Question

我正在尝试在 Django 项目中使用 bootstrap 5 模态创建删除确认对话框。

{% extends 'base.html' %}
{% block content %}

  <div class="col-md-6 offset-md-3">
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
  </div>

  <h1>Service Overview</h1>
  <br/>

  <div class="d-grid gap-2 justify-content-md-end">
    <a class="btn btn-primary" href="{% url 'add_service' %}">Add service</a>
    <br/>
  </div>

  <table class="table table-hover table-bordered">
    <thead class="table-secondary">
        <tr>
            <th class="text-center" scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Description</th>
            <th class="text-center" scope="col">Cost</th>
            <th class="text-center" scope="col">Created at</th>
            <th class="text-center" scope="col">Updated at</th>
            <th class="text-center" scope="col">Status</th>
            <th class="text-center" scope="col">Actions</th>
        </tr>
    </thead>
    <tbody>
      {% for service in services %}
          <tr>
              <td class="text-center">{{ service.id }}</td>
              <td>{{ service.name }}</td>
              <td>{{ service.description}}</td>
              <td class="text-center">{{ service.cost }} AED</td>
              <td class="text-center">{{ service.created_date }}</td>
              <td class="text-center">{{ service.updated_date }}</td>
              {% if service.status == "ACTIVE" %}
                <td class="text-center">
                  <span class="badge text-bg-success" style="font-size:0.7em;">{{ service.status }}</span>
                </td>
              {% elif service.status == "INACTIVE"%}
                <td class="text-center">
                  <span class="badge text-bg-danger" style="font-size:0.7em;">{{ service.status }}</span>
                </td>
              {% endif %}
              
              <td class="text-center">
                <!--Update-->
                <a href="{% url 'service_record' service.id %}" class="text-decoration-none">
                    <button  type="button" class="btn btn-warning btn-sm" data-bs-toggle="tooltip" title="Update service">
                        <i class="bi bi-pencil-fill"></i>
                    </button>
                </a>

                <!--Delete modal-->
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#DeleteDialogueModal">
                  <i class="bi bi-trash"></i>
                </button>


                <!-- Modal -->
                <div class="modal fade" id="DeleteDialogueModal" tabindex="-1" aria-labelledby="modal-title" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h1 class="modal-title fs-5" id="modal-title">Delete service: {{ service.name }}</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body">
                        <p>Are you sure to delete the service {{ service.name }} ?</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Go back</button>
                        <a class="btn btn-danger" href="{% url 'delete_service' service.id %}">Yes, delete</a>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
          </tr>
      {% endfor %}
    </tbody>
  </table>

{% endblock content %}

{% block javascripts %}

<script>

  // Alert when trying to delete a product
  const myModal = document.getElementById('myModal')
  const myInput = document.getElementById('myInput')

  myModal.addEventListener('shown.bs.modal', () => {
    myInput.focus()
  })

</script>

{% endblock javascripts %}

当我单击垃圾桶按钮时，对话框会按预期打开，但似乎未正确获取 ID。模态主体始终包含数据库中第一个元素的名称，并且 URL 也仅指向数据库中的第一个 ID。

例如，我点击第9行的垃圾箱，但URL中包含7。我注意到点击后，第一行（ID 7）变灰了。 截图

Answer 1

您遇到的问题是，您正在为 n 个元素创建 n 个对话，并且通常当它想要打开第一个对话时，它们都具有相同的 id。

有两种解决方案，第一种最简单，但性能不佳，另一种很优雅且更易于维护。

第一个解决方案更改每个对话框的对话框

id

，例如

<div class="modal fade" id="DeleteDialogueModal_{{service.id}}" tabindex="-1" aria-labelledby="modal-title" aria-hidden="true">

并将垃圾桶按钮更改为

<button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#DeleteDialogueModal_{{service.id}}">
    <i class="bi bi-trash"></i>
</button>

这样您将有 n 个对话，每个对话都有一个单独的 ID，并且将使用相应的按钮进行切换。

第二个解决方案第二个解决方案是有一个单一的对话，你可以根据单击的按钮通过Javascript更改其内容，例如

 function confirm_delete(id,name)
    {
      $("#model-title").html("Delete " + name);
      $("#model-body").html("Are you sure you want to delete " + name + "?")
    }

另外，将 id 发送到锚元素。