如何在 ASP.NET Razor 中显示来自数据库的 URL 存储图像？

Question

涉及的数据库包括两个实体，它们是 int 类型的 ID 和 text 类型的 ImagePath。 ID 保存自动递增的数字，ImagePath 保存特定图像的 URL。目前我已经设法使用以下代码显示在数据库中找到的所有图像。

Index.cshtml

 @foreach (var item in Model)
    {@Html.DisplayFor(modelItem => item.ImagePath)
    <img src="~/Images/@Html.DisplayFor(modelItem => item.ImagePath)" />

ImageController.cs

  public class ImageController : Controller
    {
        private ImageDBContext db = new ImageDBContext();

          public ActionResult Index()
        {
            return View(db.Images.ToList());
        }

我想显示一个特定的图像，而不是数据库中找到的所有图像。有人可以帮助我通过ID 显示数据库中存储的特定 URL 图像吗？ （即显示图像来自ImagePath通过.cshtml 中调用的ID）

非常感谢您的时间和帮助。谢谢。

更新：

写下以下代码以显示来自db.image 表的图像，选择ImageID = 2 来表示相关的url 存储图像。

ImageController.cs

  public ActionResult Index(int ImageID = 2)
        {

            return View(db.Images.Where(img => img.ID == ImageID).ToList());
        }

Index.cshtml

@foreach (var item in Model)
    {
        @Html.DisplayFor(modelItem => item.ImagePath)
         <img src="~/Images/@Html.DisplayFor(modelItem => item.ImagePath)"/>

继续前进，我想从 Index.cshtml 中选择 ImageID，而不是从控制器中的 public ActionResult Index() 中选择 int ImageID = 2。正在考虑在@html.DisplayFor 中添加ImageID == 2，但不知道如何。任何想法如何从 index.cshtml 代码中选择 ImageID 来表示相关的图像？*

结束目标 将下面的<img src=""/> 替换为从给定的ID 调用imagePath。

   <a href="https://www.facebook.com/vellanevets" target="_blank"> <img src="images/social/instagram.png" /></a>
    <a href="http://instagram.com/nevetsvella/" target="_blank"> <img src="images/social/instagram.png" alt="" /></a>
    <a href="http://vimeo.com/user16587212" target="_blank"> <img src="images/social/vimeo.png" alt="" /></a>
    <a href="mailto:steven.vella93@gmail.com" target="_blank"> <img src="images/social/email.png" alt="" /></a>
        }

Answer 1

您只需在查询中过滤您的图片

public class ImageController : Controller
    {
        private ImageDBContext db = new ImageDBContext();

          public ActionResult Index()
        {
            [.. some code to decide the id ..]

            return View(db.Images
              .Where(x => x.ID = [myId]
              .ToList());
        }

Answer 2

您可以使用 LINQ 返回数据库中的特定文档。假设您的数据列名为ID，您可以执行以下操作。

public class ImageController : Controller
{
    private ImageDBContext db = new ImageDBContext();

    public ActionResult Index(int intValue){

    var imagesId = db.Images.Where(img -> img.ID == intValue).ToList();

    return View(imagesId);

    }
}

这将返回所有 Id 等于 intValue 的图像。

顺便说一句，您似乎只是在尝试检索 1 个文档，如果是这种情况，您可以（并且应该）使用 FirstOrDefault，就像 var imageWithId = db.Images.FirstOrDefault(img -> img.ID == intValue);

编辑更新+评论：

您似乎希望在您的索引视图中对客户端信息采取行动。有多种方法可以做到这一点，一种是通过将一个值传回控制器来重新加载页面，该控制器会将正确的模型（在您的情况下为图像）传递给您的视图。

如果您希望用模型中的值替换值，您可以遍历模型并替换 css 属性。选择带有您要替换的 src 的元素，然后使用。

var imagePath = @Html.Raw(Json.Encode(Model.ImagePath));
$(this).attr("src", imagePath);

使用 JQuery 使用新图像重新加载页面：

$(document).on('event', '.selector', function() {
     //Set your ID to the Id property of the element   
    var idToPass = this.id;
    clicked
    //This will simulate an HTTP request, your action will return your View with your image
window.location.replace('@Url.Action("Index", "Image")?ImageID=' + idToPass) 
});

将 event 替换为您希望触发重新加载的事件。 'click' 例如。将选择器替换为您提供的所有您希望可点击的元素的类。

注意：小心！在锚点上使用on.('click) 会产生有趣的结果。

您还可以使用 AJAX 将信息动态传递到您的页面，而无需重新加载。