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

im working on a project in MVC 4 visual studio. and what im trying to do is select all images from my database and show all in my view.

我正在MVC 4 visual studio中做一个项目。我要做的就是从我的数据库中选择所有的图片并显示在我的视图中。

In my database i have 3 columns: id | FileTitle | FilePath

在我的数据库中有3列:id | FileTitle | FilePath

the images are in a folder.

图像在一个文件夹中。

im put it working with a dropdownlist and when i choose the value , show me the image.

我把它放在下拉列表中，当我选择值时，给我显示图像。

But my question, how can i show all the images at the same time in a list ?

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

here is my code:

这是我的代码:

Model:

模型:

  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");
        }      
    }

Controller:

控制器:

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

VIEW (trying to show all images at the same time):

视图(尝试同时显示所有图像):

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

2 个解决方案

#1

I would suggest refactoring your code a bit. The following is something simple, but separates the code properly. The following will show all images at once on the page.

我建议重构一下代码。下面是一些简单的东西，但是正确地分离代码。下面将同时显示页面上的所有图像。

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)" alt="image.Title" style="width:200px;height:200px;" />
}

To place this in your dropdown, you can modify the controller code to the following (you don't want to have that SelectList inside your SQL code).

要将其放在下拉菜单中，可以将控制器代码修改为以下代码(您不希望在SQL代码中包含SelectList)。

public ActionResult ShowImages()
{
  var images = ImageRepository.GetImages();
  var imageSelectList = new SelectList(images, "ImagePath", "Title");
  return View(imageSelectList);
}

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

I would go one step further from here and have a proper ViewModel in place as well.

我将从这里更进一步，并建立一个适当的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

Are you looking for something like this:

你在找这样的东西吗:

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

}

#1