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

即时通讯工作在MVC 4视觉工作室的项目。而我试图做的是从我的数据库中选择所有图像，并在我的视图中显示所有图像。如何显示我的数据库中的所有图像？

在我的数据库中，我有3列： ID | FileTitle | FilePath

图像位于文件夹中。

即时通讯工具与下拉列表，当我选择的值，让我看看图像。

但我的问题，我怎么能在列表中同时显示所有的图像？

这里是我的代码：

型号：

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

VIEW（试图展示在同一时间的所有图像）：

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

来源

2013-07-25 user2232273

我建议重构你的代码位。以下是简单的，但正确地分离代码。以下将在页面上一次显示所有图像。

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

为了把这个在您的下拉菜单中，您可以修改控制器代码以下（你不想让你的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);

来源

2013-07-25 15:13:18

谢谢...完美的作品！ – user2232273

你帮了很多:) – user2232273

没问题，玩得开心！ –

你是正在寻找这样的事情：

@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;" /> 

}

来源

2013-07-25 15:02:55 afzalulh

这是相同的代码，只需使用不同的循环不需要 –

的ID，但不会影响比浏览器选择的任何其他。 –

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

回答

相关问题