Страница отображения элемента не работает должным образом, если нажать кнопку просмотра сведений на вкладке boostrap

Question

У меня возникла проблема с отображением страницы сведений о продукте. У меня есть четыре вкладки boostrap, и на этих вкладках есть несколько Товарных позиций с кнопкой Quick View". Каждый продукт должен отображаться правильно с уникальным идентификатором при нажатии на кнопку ссылки. Но он работает не так, как я ожидал. Я использую цикл foreach и передаю идентификатор продукта для каждого продукта, когда происходит событие щелчка, отображаются все четыре элемента вкладки с одинаковым идентификатором. Должен отображаться только один элемент.

Я пробовал много разных решений. Что мне делать с циклом foreach и идентификатором. Любая помощь будет очень признательна. Ниже приведены более подробную информацию о моем приложении

<!--This is my Single.cshtml page-->
@foreach (var item in Model.ProductList)
        {
            <div class="col-md-4 single-right-left ">

                <div class="grid images_3_of_2">

                    <div class="flexslider">


                        <ul class="slides">

                            <li data-thumb="@Html.DisplayFor(modelItem => item.ImageaFront)">
                                <div class="thumb-image"> <img src="@Html.DisplayFor(modelItem => item.ImageaFront)" data-imagezoom="true" class="img-responsive"> </div>
                            </li>
                            <li data-thumb="@Html.DisplayFor(modelItem => item.ImageBack)">
                                <div class="thumb-image"> <img src="@Html.DisplayFor(modelItem => item.ImageBack)" data-imagezoom="true" class="img-responsive"> </div>
                            </li>
                            <li data-thumb="@Html.DisplayFor(modelItem => item.ImageBack)">
                                <div class="thumb-image"> <img src="@Html.DisplayFor(modelItem => item.ImageBack)" data-imagezoom="true" class="img-responsive"> </div>
                            </li>
                        </ul>

                    </div>

                </div>
                }
                </div>
                @foreach (var item in Model.womanProductList)
        {
            <div class="col-md-4 single-right-left ">

                <div class="grid images_3_of_2">

                    <div class="flexslider">


                        <ul class="slides">

                            <li data-thumb="@Html.DisplayFor(modelItem => item.ImageaFront)">
                                <div class="thumb-image"> <img src="@Html.DisplayFor(modelItem => item.ImageaFront)" data-imagezoom="true" class="img-responsive"> </div>
                            </li>
                            <li data-thumb="@Html.DisplayFor(modelItem => item.ImageBack)">
                                <div class="thumb-image"> <img src="@Html.DisplayFor(modelItem => item.ImageBack)" data-imagezoom="true" class="img-responsive"> </div>
                            </li>
                            <li data-thumb="@Html.DisplayFor(modelItem => item.ImageBack)">
                                <div class="thumb-image"> <img src="@Html.DisplayFor(modelItem => item.ImageBack)" data-imagezoom="true" class="img-responsive"> </div>
                            </li>
                        </ul>

                    </div>

                </div>
            </div>
            
            }
        </div>
        <!--another two are same like above-->
                
                
<!--This is my Index.cshtml page..I just pass here Productid-->
<div class="tab1">
                   
                    @foreach (var item in Model.ProductList)
                    {
                        <div class="col-md-3 product-men">
                            <div class="men-pro-item simpleCart_shelfItem">
                                <div class="men-thumb-item">
                                    <img src="@Html.DisplayFor(modelItem => item.ImageaFront)" alt="" class="pro-image-front">
                                    <img src="@Html.DisplayFor(modelItem => item.ImageBack)" alt="" class="pro-image-back">
                                    <div class="men-cart-pro">
                                        <div class="inner-men-cart-pro">
                                            <a asp-page="/single" asp-route-id="@item.ProductID?tab1" class="link-product-add-cart">Quick View</a>
                                             

                                        </div>
                                    </div>
                                    <span class="product-new-top">New</span>

                                </div>
                                <div class="item-info-product ">
                                    <h4><a href="single.html">@Html.DisplayFor(modelItem => item.ProductName)</a></h4>
                                    <div class="info-product-price">
                                        <span class="item_price">$@Html.DisplayFor(modelItem => item.OriginalPrice)</span>
                                        <del>$@Html.DisplayFor(modelItem => item.FalsePrice)</del>
                                    </div>
                                    <div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out button2">
                                        <form action="#" method="post">
                                            <fieldset>
                                                <input type="hidden" name="cmd" value="_cart" />
                                                <input type="hidden" name="add" value="1" />
                                                <input type="hidden" name="business" value=" " />
                                                <input type="hidden" name="item_name" value="Formal Blue Shirt" />
                                                <input type="hidden" name="amount" value="30.99" />
                                                <input type="hidden" name="discount_amount" value="1.00" />
                                                <input type="hidden" name="currency_code" value="USD" />
                                                <input type="hidden" name="return" value=" " />
                                                <input type="hidden" name="cancel_return" value=" " />
                                                <input type="submit" name="submit" value="Add to cart" class="button" />
                                            </fieldset>
                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>
                    }
                </div>
  <!--another three tabs are same like above with diferent list-->
  
  
  <!--This is my code behind file -->
  using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using EliteShopping.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPagesDemo.Models;

namespace EliteShopping.Pages
{
    public class singleModel : PageModel
    {
       
        DatabaseContext _Context;
        public singleModel(DatabaseContext databasecontext)
        {
            _Context = databasecontext;
        }

        
        public List<Product> ProductList { get; set; }
        public List<woman> womanProductList { get; set; }
        public List<Footwere> FootwereList { get; set; }
        public List<Bag> BagList { get; set; }



        public void OnGet(int? id)
        {

            
           
           
            //for Men

            var men = (from ProductList in _Context.ProductTB
                       where ProductList.ProductID == id
                         select ProductList).ToList();

            ProductList = men;

           // for Bag

            var data2 = (from BagList in _Context.BagsTB
                         where BagList.ProductID == id
                         select BagList).ToList();

            BagList = data2;

           // for women

            var women = (from womanProductList in _Context.womanTB
                         where womanProductList.ProductID == id
                       select womanProductList).ToList();

            womanProductList = women;

            //for Footwere

            var Footwere = (from FootwereList in _Context.FootwereTB
                            where FootwereList.ProductID == id
                         select FootwereList).ToList();

            FootwereList = Footwere;

        }
    }
}

• Это страничное приложение Asp.net core 2.0 Razor.
• Страницы подключены к базе данных, все динамические.

Answer 1

На странице индекса я добавил

<a asp-page="/single" asp-route-id="@item.ProductID" asp-route-tab="@item.tab" class="link-product-add-cart">Quick View</a>

А на странице single.cshtml.cs я передаю id / tab

var data2 = (from BagList in _Context.BagsTB
                         where BagList.ProductID == id & BagList.tab == tab
                         select BagList).ToList();

            BagList = data2;

создал еще одно свойство для каждого класса, как показано ниже.

 public string tab { get; set; }

Наконец, я добавил еще один столбец к имени таблицы данных "tab" и вставил значения. Теперь он работает правильно, как я и думал.

Так что благодаря Нан Ю и Сообщество Stackoverflow

Answer 2

На странице index, ссылка Quick View не передает правильный идентификатор продукта на страницу single, вы должны передать имя идентификатора / вкладки, например:

<a asp-page="/single" asp-route-id="@item.ProductID" asp-route-tab="tab1" class="link-product-add-cart">Quick View</a>

А затем на одной странице получите параметр как:

 public void OnGet(int id,string tab)