DJANGO: передать указанную переменную c из шаблона для просмотра при нажатии кнопки

Question

Я создаю интернет-магазин, в котором отображаются товары с различными полями для отображения в шаблоне (имя, цена, идентификатор товара и т. Д. c), и я делаю это для каждого переданного товара. Поэтому, когда страница загружается У меня есть много тегов с одинаковыми именами.

Моя проблема в том, что я не знаю, как передать идентификатор элемента в следующий вид. Это значение является уникальным идентификатором, поэтому мне нужно выполнить оператор select из моей базы данных, чтобы получить всю информацию об элементах. Затем эта информация может быть отображена на другой странице, где пользователь может увидеть все детали и добавить ее в свою корзину. Я пытался использовать скрытую форму и использовать POST, чтобы получить значение, но я не могу получить именно тот элемент, который мне нужен, поскольку многие из них имеют один и тот же идентификатор тега div.

Когда каждый элемент отображается снова появляется кнопка для просмотра информации об элементе. Когда эта кнопка нажата, мне нужно отправить идентификатор элемента из помеченного тега div в следующий вид.

views.py

# Products page to view all items
def products_page(request):
    args = {
        'products': products,
    }
    return render(request, 'store/products-page.html', args)

# View when an item is selected to display item detail
def view_item(request):

    # I NEED ITEM ID HERE FROM products-page.html

    .. get item information ..

    return render(request, 'store/view-item.html', .. pass in item info ..)

Страница продуктов. html

...
{% for product in products %}
<div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100 rounded-0  border-0">

         ...
         <div class="img-overlay">
              <button type="button" class="btn">DETAILS</button> <-- BUTTON PRESSED
         </div>
         ...

         <div class="card-body text-center">
              ...
              <p id="item-number">#{{ product.itemNumber }}</p> <-- I WANT THIS VALUE
              ...
         </div>
    </div>
</div>
{% endfor %}

Любая помощь будет оценена !!!

Решение

1.) Я создал форму для инкапсуляции каждого продукта, отображаемого в пределах для l oop. Действие этой формы при отправке перенаправляется на следующий вид, который я хотел отобразить.

2.) Я использовал скрытую кнопку, которая имела «type = submit», «value = _the_product_id» и «name = get_prod_info». + _items_ID_».

3.) При нажатии продукта (т. Е. В любом месте элемента, включая изображение или описание элемента), форма была отправлена ​​и отправлена ​​в следующий вид

4.) Проверяется следующий вид что это был запрос POST, если да, он повторял все ключи, пока не нашел имя моей скрытой кнопки. При обнаружении он просто использует последние символы из ключа для получения идентификатора продукта.

Затем вы можете делать то, что вам нужно, с этим значением в представлении

views.py

# Products page to view all items
def products_page(request):
    # products is a dict
    args = {
        'products': products,
    }
    return render(request, 'store/products-page.html', args)

# View when an item is selected to display item detail
def view_item(request):
    if request.method == 'POST':
        # we need to get the itemID from the button that was pressed
        for key in request.POST.keys():
            # just in case we get more than 1 key we loop
            if key.startswith('get-prod-info'):
                # this assigns itemID to the 'value' field of the button pressed which is the productID
                itemID = key[13:]
    ... use the itemID ...
    return render(request, 'store/view-item.html')

products-page. html

{% for product in products %}
<div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100 rounded-0  border-0">
        <!-- Form to get the itemID into view -->
        <form method="post" action="{% url 'store-view-item' %}"> 
            {% csrf_token %}
            <!-- hidden button -->
            <button type="submit" value="{{product.productID}}" name="get-prod-info{{product.productID}}" id="hidden-button"> 
                <div class="img-wrapper">
                       ...
                        <img class="card-img-top rounded-0" src="..." id="card-image" alt="Product Image">
                        <div class="img-overlay">
                            <div class="btn" id="btn-view-item">DETAILS</div>
                        </div>
                       ...
                </div>
                ...
            </button>
            <!-- ./hidden button to submit form and send productID to view -->
        </form>
        <!-- ./form -->
    </div>
</div>
{% endfor %}