时间戳

首页 > 解决方案 > 单击 boostrap 选项卡中的查看详细信息按钮时，项目显示页面无法正常工作

html - 单击 boostrap 选项卡中的查看详细信息按钮时，项目显示页面无法正常工作

问题描述

我在显示产品详细信息页面时遇到问题。我有四个 boostrap 选项卡，在这些选项卡中有一些带有“快速查看”链接按钮的产品项目。单击链接按钮时，每个产品都应该以唯一的 ID 正确显示。但它没有按我预期的那样工作。我正在使用 foreach 循环并为每个产品传递产品ID，当点击事件发生时，所有四个具有相同ID的选项卡项目都会显示。它应该只显示一个项目。

我尝试了很多不同的解决方案。我应该如何处理 foreach 循环和 Id。任何帮助将不胜感激。以下是有关我的应用程序的更多详细信息

<!--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;

        }
    }
}

标签： htmlasp.net-corerazor-pages

解决方案

在我添加的索引页面中

<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”中再添加一列并插入值。现在它在我方面正常工作。

感谢Nan Yu和 Stackoverflow 社区

推荐阅读