为什么不从 asp.net mvc 中的数据库中获取相关图像？

Question

我在下面通过 ID 从数据库中获取（检索）图像，（所有这些图像都有一个 ID）。

<img src="@Url.Action("GetMainPicture", "Product", new { item.ProductID, @class = "img-responsive" })" alt="" />

然后我有一个 <a href> 标签，它调用 Popup 并且在弹出窗口中我使用了用于获取图像的同一行代码，这里是：

<img src="@Url.Action("GetMainPicture", "Product", new { item.ProductID, @class = "img-responsive" })" alt="" />

上面的代码行检索了图片，但问题是它为每张图片获取了 id = 1 的图像。为了向您提供深入的信息，我将整个代码粘贴在下面：

@model List<Hosay.Domain.Entities.Product>

@foreach (var item in Model)
{
    <!-- PRODUCT ITEM START -->
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="product-item">
            <div class="pi-img-wrapper">
                <img src="@Url.Action("GetMainPicture", "Product", new { item.ProductID, @class = "img-responsive" })" height="300" width="230" alt="" />
                <div>
                    <a href="../../assets/frontend/pages/img/products/model1.jpg" class="btn btn-default fancybox-button">Zoom</a>
                    <a href="#product-pop-up" class="btn btn-default fancybox-fast-view">View</a>
                </div>
            </div>
            <h3>@Html.ActionLink(item.ProductName, "ProductDetails", new { item.ProductID })</h3>
            <div class="pi-price">@item.ProductPrice.ToString("c")</div>
            <a href="javascript:;" class="btn btn-default add2cart">Add to cart</a>
        </div>
    </div>
              <!-- PRODUCT ITEM END -->
    <!--Product Quick View Start-->
    <div id="product-pop-up" style="display: none; width: 700px;">
        <div class="product-page product-pop-up">
            <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-3">
                    <div class="product-main-image">
                        <img src="@Url.Action("GetMainPicture", "Product", new { item.ProductID })" class="img-responsive" alt="" />
                    </div>
                    <div class="product-other-images">
                        <a href="javascript:;" class="active"><img alt="Berry Lace Dress" src="~/Images/Products/model3.jpg"></a>
                        <a href="javascript:;"><img alt="Berry Lace Dress" src="~/Images/Products/model4.jpg"></a>
                        <a href="javascript:;"><img alt="Berry Lace Dress" src="~/Images/Products/model5.jpg"></a>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-9">
                    <h2>Cool green dress with red bell</h2>
                    <div class="price-availability-block clearfix">
                        <div class="price">
                            <strong><span>$</span>47.00</strong>
                            <em>$<span>62.00</span></em>
                        </div>
                        <div class="availability">
                            Availability: <strong>In Stock</strong>
                        </div>
                    </div>
                    <div class="description">
                        <p>
                            Lorem ipsum dolor ut sit ame dolore  adipiscing elit, sed nonumy nibh sed euismod laoreet dolore magna aliquarm erat volutpat
                            Nostrud duis molestie at dolore.
                        </p>
                    </div>
                    <div class="product-page-options">
                        <div class="pull-left">
                            <label class="control-label">Size:</label>
                            <select class="form-control input-sm">
                                <option>L</option>
                                <option>M</option>
                                <option>XL</option>
                            </select>
                        </div>
                        <div class="pull-left">
                            <label class="control-label">Color:</label>
                            <select class="form-control input-sm">
                                <option>Red</option>
                                <option>Blue</option>
                                <option>Black</option>
                            </select>
                        </div>
                    </div>
                    <div class="product-page-cart">
                        <div class="product-quantity">
                            <input id="product-quantity" type="text" value="1" readonly name="product-quantity" class="form-control input-sm">
                        </div>
                        <button class="btn btn-primary" type="submit">Add to cart</button>
                        <a href="shop-item.html" class="btn btn-default">More details</a>
                    </div>
                </div>

                <div class="sticker sticker-sale"></div>
            </div>
        </div>
    </div>
    <!--Product Quick View End-->
}

什么问题，我在网上找不到任何东西，所以我在这里问了。

编辑：

public FileContentResult GetMainPicture(int productId)
        {
            Product prod = repository.Products
                .FirstOrDefault(p => p.ProductID == productId);
            if (prod != null)
            {
                return File(prod.MainPicture, prod.MainPictureMimeType);
            }
            else
            {
                return null;
            }
        }

纳赛尔

Answer 1

在 for 循环中，您创建了多个具有相同 ID 的 div：<div id="product-pop-up"，这在 HTML/DOM 中是不允许的。 ID 值在页面上必须是唯一的。这可能是您遇到问题的原因。

使ID唯一，然后调整使它们以相同方式显示的部分。

编辑 - 方法如下：

将@for 循环更改为这样开始：

@{
    var imgCounter = 0;
}
@foreach (var item in Model)
{
    imgCounter++;

然后将 <a href> 更改为如下所示：

<a href="#product-pop-up-@(imgCounter)" class="btn btn-default fancybox-fast-view">View</a>

并将 <div> 更改为这样开始：

<div id="product-pop-up-@(imgCounter)" style="display: none; width: 700px;">

这里我假设 href 中的 # 值是导致 div 显示的原因。

为什么不从 asp.net mvc 中的数据库中获取相关图像？

Why relevant image not fetching from the database in asp.net mvc?

html

asp.net-mvc

popup

fancybox