Select all images using ASP.NET

Question

I am new to ASP.NET and C#. I am trying to retrieve all images from folder and show it on page, but it\'s only selecting one image.

My ASP.NET code:

Answer 1

You can use control to display images as you want with custom styling also

Answer 2

1) Its obvious you can not display multiple images into a single HTML object. You must have to use Repeater, GridView or DataGrid or dynamic HTML generation based on how you want to show it on your page(i.e. HTML design)

2) Follow ASP.NET page life-cycle events properly(in your case you can write code in PageLoad() event once you finished initializing Repeater, Gridview or Datagrid)

3)You can also show videos but for that you need some player, it won't be that much simple(you can use Third party tools)

Answer 3

In the code behind write your Collection() method to retrieve images as a List of Strings like this (Also it is better to use Using statements):

protected IEnumerable<string> Collection()
{
     string address = ConfigurationManager.ConnectionStrings["blogconnection"].ToString();
     using (SqlConnection con = new SqlConnection(address))
     {
         con.Open();
         string qry = "select * from images";
         SqlCommand cmd = new SqlCommand(qry, con);
         using (SqlDataReader dr = cmd.ExecuteReader())
         {
             if (!dr.HasRows) return allimage;
             while (dr.Read())
             {
                 if (!string.IsNullOrEmpty(Convert.ToString(dr["Image_Path"])))
                 {
                     yield return (dr["Image_Path"].ToString());
                 }
              }
          }
      }
}

Then either you can use asp:Repeater like this:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="imgCats">
      <ItemTemplate>
         <div>
            <img src='<%# Container.DataItem.ToString() %>' alt="" />
         </div>                  
      </ItemTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="imgCats" runat="server" SelectMethod="Collection" 
          TypeName="WebApplication1.WebForm8">
</asp:ObjectDataSource>

Or you can do it like this:

<form id="form1" runat="server" class="col-lg-5">
  <div>
    <ul>
        <% var drc = Collection();
           foreach (var item in drc)
           { %>
            <li>
                <img src="<%: item %>"/>
            </li>
        <% } %>
    </ul>
  </div>
</form>

Answer 4

The problem is in this statement:

Image.ImageUrl = Convert.ToString(dr["Image_Path"]);

What does this statement do? It assigns each image path value to only one Image.ImageUrl. So, the Image.ImageUrl will hold the last assigned image path. The result is only one picture will be displayed. This is not what you want.

What you want is: show all pictures --> assign each image path to each Image.ImageUrl --> dynamically create the Image and add it to the form. So, instead of writing that statement, you should do something like:

Image img = new Image();
img.ImageUrl = dr["Image_Path"].ToString();
img.AlternateText = "Test image";
form1.Controls.Add(img);

The code is not tested. Just focus on the idea. You can do it like this, or use the repeater, or your own way, it's up to you.

Feel free to ask me if you find something unclear :)

Answer 5

I have added some screen shots here hope you can continue from here on.

Answer 6

I have modified your code to make it work. Instead defining image in aspx add it dynamically from your code behind.

Your Modified ASP.NET code:

<form id="form1" runat="server" class="col-lg-5">            

</form>

Your Modified C# code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

namespace Blog
{
    public partial class index : System.Web.UI.Page
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["blogconnection"].ToString());
        protected void Page_Load(object sender, EventArgs e)
        {
            con.Open();
            string allimage;
            string qry="select * from images";
            SqlCommand cmd = new SqlCommand(qry, con);
            SqlDataReader dr =cmd.ExecuteReader();

            if (dr.HasRows)
            {
                while(dr.Read())
                {
                   if (!string.IsNullOrEmpty(Convert.ToString(dr["Image_Path"])))
                   {                                             
                        Image img = new Image();
                        img.ImageUrl = dr["Image_Path"].ToString();
                        img.AlternateText = dr["Image_Path"].ToString();
                        form1.Controls.Add(img);                                         
                   }
                }
           }
           con.Close();
       }               
    }
}