如何显示我的数据库中的所有图像？

Posted 2023-03-05

【中文标题】如何显示我的数据库中的所有图像？

【英文标题】：How to show all images from my database?

【发布时间】：2013-07-25 10:43:41

【问题描述】：

我正在 MVC 4 Visual Studio 中开发一个项目。我想要做的是从我的数据库中选择所有图像并在我的视图中显示所有图像。

在我的数据库中，我有 3 列： 编号 |文件标题 |文件路径

图像在一个文件夹中。

我把它与下拉列表一起使用，当我选择值时，显示图像。

但我的问题是，如何在列表中同时显示所有图像？

这是我的代码：

型号：

  public class Image
    
        public SelectList ImageList  get; set; 

        public Image()
        
            ImageList = GetImages();
        

        public SelectList GetImages()
        
            var list = new List<SelectListItem>();
            string connection = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;

            using (var con = new SqlConnection(connection))
            
                con.Open();
                using (var command = new SqlCommand("SELECT * FROM myimage", con))
                
                    SqlDataReader reader = command.ExecuteReader();
                    while (reader.Read())
                    
                        string title = reader[1] as string;
                        string imagePath = reader[2] as string;
                        list.Add(new SelectListItem()  Text = title, Value = imagePath );
                    
                
                con.Close();
            
            return new SelectList(list, "Value", "Text");
              
    

控制器：

public ViewResult ShowImages()
        
            Image image = new Image();
            return View(image);
        

查看（尝试同时显示所有图像）：

@foreach (var image in Model.ImageList)
 
    <img src="@Url.Content(image)"  id="image" style="width:200px;height:200px;" />

【参考方案1】：

我建议稍微重构一下您的代码。下面是一些简单的东西，但正确地分离了代码。以下将在页面上一次显示所有图像。

public class Image

   public string Title get; set;
    public string ImagePath get; set;


public class ImageRepository

    public static IEnumerable<Image> GetImages()
        var list = new List<Image>();
       string connection = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;

       using (var con = new SqlConnection(connection))
       
           con.Open();
           using (var command = new SqlCommand("SELECT * FROM myimage", con))
           
               SqlDataReader reader = command.ExecuteReader();
               while (reader.Read())
               
                   string title = reader[1] as string;
                   string imagePath = reader[2] as string;
                   list.Add(new Image()  Title = title, ImagePath = imagePath );
               
           
           con.Close();
       
       return list;
    


public ViewResult ShowImages()

  var images = ImageRepository.GetImages();
  return View(images);



@foreach (var image in Model)
 
    <img src="@Url.Content(image.ImagePath)"  style="width:200px;height:200px;" />

要将它放在下拉列表中，您可以将控制器代码修改为以下内容（您不希望在 SQL 代码中包含该 SelectList）。

public ActionResult ShowImages()

  var images = ImageRepository.GetImages();
  var imageSelectList = new SelectList(images, "ImagePath", "Title");
  return View(imageSelectList);


@html.DropDownList("ImageList", Model);

我会从这里更进一步，并有一个适当的 ViewModel。

public class ShowImagesViewModel
    public ShowImagesViewModel(IEnumerable<Image> images)
        this.Images = images;
    

    public IEnumerable<Image> Images get; private set;
    public SelectList ImageSelectList 
        get
        
            return new SelectList(images, "ImagePath", "Title");
        
    



public ActionResult ShowImages()

  var images = ImageRepository.GetImages();
  var model = new ShowImagesViewModel(images);
  return View(model);


@Html.DropDownList("ImageList", Model.ImageSelectList);

【讨论】：

没问题，玩得开心！

【参考方案2】：

您是否正在寻找这样的东西：

@for (var i = 0; i < Model.ImageList.Count; i++)
 
    <img src="@Url.Content(Model.ImageList[i].Value)"  id="'image' +  @i.ToString()" style="width:200px;height:200px;" />  

【讨论】：

id 不是必需的，但不会影响浏览器选择器以外的任何东西。