django modal应该有一个单独的视图吗？

Question

我正在开发一个应用程序，该应用程序具有一个包含用户列表的表的页面。每个用户都有一个按钮，它会弹出一个执行某些操作的模式。我正在尝试创建在单击按钮时将获取用户信息的模式，此外，我需要在该模式中基于用户信息和更多数据的一些逻辑。我认为为它创建一个单独的视图是有意义的，但是由于每个视图都必须在不同的 url 上，所以模态的概念（对我来说）没有意义，因为我希望它在同一个 url 上。

• 是否有可能有一个具有不同视图的模式，它将有一个单独的逻辑？既然模态框是包含在模板中的，基本上就是一个模板，那么，一个模板可以有2个视图吗？

• 使用 django 实现模式的最佳方法是什么？以及如何将数据传递给它，我需要来自所选行的数据 + 来自 db 的更多数据。我有来自上下文的数据，但是对我来说使用 JQuery 是个坏主意——因为我在后端使用了一个与另一个 api 通信的 python 会话，所以当用户单击模态保存按钮时，需要一个 python 请求完成了，这意味着我需要一个视图。

这是我的尝试

Modal
{% block modal %}
{% load static %}
{% load authorization_tags %}
<!-- Modal -->
<div class="modal fade" id="{{modal_id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="row">
          <div class="col-lg-5">
            <img class="d-block w-100"
              src="{% static 'app/assets/images/security-shield1.png' %}"
              alt="First slide">
              Use access control to deauthorize user
          </div>
          <div class="col-lg-7">
            <h2 class="h2-responsive product-name">
              <strong>{{user.real_name}}</strong>
            </h2>
            <h4 class="h4-responsive">
              <span class="green-text">
                {{user.username}}
              </span>
              </span>
            </h4>
            <div class="accordion md-accordion" id="accordion1" role="tablist" aria-multiselectable="true">
              <div class="card">
                <div class="card-header" role="tab" id="heading2">
                  <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1" aria-expanded="true"
                    aria-controls="collapse1">
                    <h5 class="mb-0">
                      Current Authorizations <i class="fas fa-angle-down rotate-icon"></i>
                    </h5>
                  </a>
                </div>

                <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1"
                  data-parent="#accordion1">
                  <div class="card-body">

                  {% for right in people_rights|user_active_rights:user.id %}
                    {{right.room}}
                  {% endfor %}

                  </div>
                </div>

              </div>
            </div>
            <div class="accordion md-accordion" id="accordion2" role="tablist" aria-multiselectable="true">
              <div class="card">
                <div class="card-header" role="tab" id="heading2">
                  <a data-toggle="collapse" data-parent="#accordion2" href="#collapse2" aria-expanded="true"
                    aria-controls="collapse2">
                    <h5 class="mb-0">
                      Available Authorizations <i class="fas fa-angle-down rotate-icon"></i>
                    </h5>
                  </a>
                </div>

                <div id="collapse2" class="collapse show" role="tabpanel" aria-labelledby="heading2"
                  data-parent="#accordion2">
                  <div class="card-body">
                  </div>
                </div>
              </div>
            </div>
            <div class="card-body">
              
              <div class="text-center">
                <button type="button" class="btn btn-lg" data-dismiss="modal"><span>Close</span></button>
                <button class="btn btn-lg"><span>Authorize</span></button>
              </div>
            </div>
          </div>
        </div>
    </div>  
  </div>
</div>
{% endblock modal %}

a piece of table and the modal included in the same template

{% include 'app/admin/users/user_authorize.html' with modal_id="authModal" user=row areas=areas rooms=rooms people_rights=people_rights %}


{%if row.empno %}
  <td class="txt-oflo">{{ row.empno }}</td>
{% else %}
  <td class="txt-oflo">-</td>
{% endif %}
  <td>
{% with "#"|add:row.id as buttonId %}
  <button id={{buttonId}} class="btn btn-lg" data-toggle="modal" data-target="#authModal">
      <span>Authorize</span>
  </button>
{% endwith %}
  </td>
</tr>

Answer 1

您可以尝试以下步骤来解决问题。

1. 在单独的 url 上为模式创建单独的视图。
2. 从这个 html 文件中取出模态数据并将其放在另一个 html 文件中。原始 html 中的空模态应该如下所示。

<div id="SampleTable" class="modal fade" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title">sample title</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body" id="sample_datatable">

                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                          </div>
                        </div>

1. 从创建的新视图中呈现新的 html。将从为我们提供模态表的按钮激活的 ajax 请求可能如下所示。

@app.route('/sample_data', methods=['GET', 'POST'])
def modal_table():
    try:
        data = request.args.get('arg')
        database_data = Table.query.filter(Table.data == data).all()
        result_dict = [u.__dict__ for u in database_data]
    except Exception as e:
        traceback.print_exc()
    return render_template('modal_table.html', data=enumerate(result_dict))

4. 原始 html 中生成模态表的按钮应使用 ajax 请求进行配置，将新 html 中的数据呈现为旧模态数据，如下所示。

function get_sample_data() {
        $.ajax({
            url:"/sample_data", //the page containing python script
            type: "GET", //request type,
            data: {},
            async:true,
            beforeSend: function(){
                    $('#sample_datatable').html('Loading..');
                  },
            success:function(result){
                $('#sample_datatable').html(result);
            }
        });
}

您可以从应该显示模态表的按钮调用此 javascript 函数。