fishbowlstudios
asked on
DataList control in ASP.NET not showing images
I am working on a photo gallery but the DataList is not showing the images in the folder. It will show the placeholder but not the actual images.
<asp:DataList ID="dlImages" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="100%" CellPadding="2" CellSpacing="0">
<ItemTemplate>
<img src='<%# Eval("FullName") %>' width="150" style="border:1px solid gray;" height="250" />
<hr />
</ItemTemplate>
</asp:DataList>
private void LoadDataList()
{
string imageFolder = MapPath("PostedImages");
DirectoryInfo objDI = new DirectoryInfo(imageFolder);
dlImages.DataSource = objDI.GetFiles();
dlImages.DataBind();
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi,
I think you need to change the src attribute value to this
src='<%# DataBinder.Eval(Container. DataItem," FullName") %>'
hope it helps.
I think you need to change the src attribute value to this
src='<%# DataBinder.Eval(Container.
hope it helps.
Hi check following code, so you will get an idea to show Image and other Details
<asp:DataList ID="dListItems" runat="server" RepeatColumns="4" width="300px"
DataKeyField="Image_Id"
RepeatDirection="Horizonta l" onitemcreated="dListItems_ ItemCreate d"
onitemdatabound="dListItem s_ItemData Bound">
<ItemTemplate>
<!-- box start -->
<div class="col-1 new-users">
<li class="prodlistitem" id="listproduct_iPhone_4_1 2" style="background-image: url('"<%# Eval("Prod_ImagePath") %>"');">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Prod_Id") %>' Visible="false"></asp:Labe l>
<h3><a href="Product_Details.aspx ?<%# Eval("Prod_Id") %>" id="listproduct_iPhone_4 1"><%# Eval("Prod_Name") %></a></h3>
<a href="Product_Details.aspx ?PID=<%# Eval("Prod_Id") %>" class="full-item-click">
<asp:Image ID="listproduct_iPhone_4_1 " runat="server" Height="110px" ImageUrl='<%# Eval("Prod_ImagePath") %>' data-zoomsrc='<%# Eval("Prod_ImagePath") %>' Width="110px" />
</a>
<div class="product-meta">
<div class="price">
<a href="Product_Details.aspx " class="price" id="listproduct_iPhone_4"> <%# Eval("Prod_Price_inDoller" )%></a>
<asp:Button ID="Button2" runat="server" Text="Add to Cart" CommandName="image" Visible="false" CommandArgument='<%# Eval("Prod_Id") %>' OnClick="AddToCart" BackColor="#08a5bd" ForeColor="White" />
</p>
</p>
</div>
<div id="ProductRelatedImage">
<asp:DataList ID="DataList1" runat="server" DataKeyField="Prod_ImagePa th" DataSourceID="SqlDataSourc e6"
RepeatColumns="4" RepeatDirection="Horizonta l" Width="40px" Height="40px">
<ItemTemplate>
<div style="border:1px">
<h1><asp:Label ID="Label7" runat="server" Text='<%# Eval("Prod_Name") %>' Visible="false"></asp:Labe l></h1>
<a href="Product_Details.aspx ?PID=<%# Eval("Prod_Id") %>"><asp:Image ID="Image7" runat="server" Height="30px"
ImageUrl='<%# Eval("Prod_ImagePath") %>' Width="30px" Visible="false" /></a>
<img alt="" src='<%# Eval("Prod_ImagePath") %>' data-zoomsrc='<%# Eval("Prod_ImagePath") %>' id="myimage" Height="30px" Width="30px" />
</div>
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource6" runat="server"
ConnectionString="<%$ ConnectionStrings:Connecti onString %>"
SelectCommand="SELECT Product.Prod_Id, Product.Prod_Name, Product.Prod_Price_inDolle r, Product_Images.Prod_ImageP ath, Category.Cat_Id
FROM Category INNER JOIN
Product ON Category.Cat_Id = Product.Cat_Id INNER JOIN
Product_Images ON Product.Prod_Id = Product_Images.Prod_Id
WHERE (Product.Prod_Id = @Prod_Id)">
<SelectParameters>
<asp:ControlParameter Name="Prod_Id" ControlID="Label1" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</div>
</li>
</div> <!-- box end -->
</ItemTemplate>
</asp:DataList>
</ul>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:Connecti onString %>"
SelectCommand="SELECT [Prod_ImageId], [Prod_ImagePath], [Prod_Id] FROM [Product_Images]">
</asp:SqlDataSource>
<asp:DataList ID="dListItems" runat="server" RepeatColumns="4" width="300px"
DataKeyField="Image_Id"
RepeatDirection="Horizonta
onitemdatabound="dListItem
<ItemTemplate>
<!-- box start -->
<div class="col-1 new-users">
<li class="prodlistitem" id="listproduct_iPhone_4_1
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Prod_Id") %>' Visible="false"></asp:Labe
<h3><a href="Product_Details.aspx
<a href="Product_Details.aspx
<asp:Image ID="listproduct_iPhone_4_1
</a>
<div class="product-meta">
<div class="price">
<a href="Product_Details.aspx
<asp:Button ID="Button2" runat="server" Text="Add to Cart" CommandName="image" Visible="false" CommandArgument='<%# Eval("Prod_Id") %>' OnClick="AddToCart" BackColor="#08a5bd" ForeColor="White" />
</p>
</p>
</div>
<div id="ProductRelatedImage">
<asp:DataList ID="DataList1" runat="server" DataKeyField="Prod_ImagePa
RepeatColumns="4" RepeatDirection="Horizonta
<ItemTemplate>
<div style="border:1px">
<h1><asp:Label ID="Label7" runat="server" Text='<%# Eval("Prod_Name") %>' Visible="false"></asp:Labe
<a href="Product_Details.aspx
ImageUrl='<%# Eval("Prod_ImagePath") %>' Width="30px" Visible="false" /></a>
<img alt="" src='<%# Eval("Prod_ImagePath") %>' data-zoomsrc='<%# Eval("Prod_ImagePath") %>' id="myimage" Height="30px" Width="30px" />
</div>
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource6" runat="server"
ConnectionString="<%$ ConnectionStrings:Connecti
SelectCommand="SELECT Product.Prod_Id, Product.Prod_Name, Product.Prod_Price_inDolle
FROM Category INNER JOIN
Product ON Category.Cat_Id = Product.Cat_Id INNER JOIN
Product_Images ON Product.Prod_Id = Product_Images.Prod_Id
WHERE (Product.Prod_Id = @Prod_Id)">
<SelectParameters>
<asp:ControlParameter Name="Prod_Id" ControlID="Label1" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</div>
</li>
</div> <!-- box end -->
</ItemTemplate>
</asp:DataList>
</ul>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:Connecti
SelectCommand="SELECT [Prod_ImageId], [Prod_ImagePath], [Prod_Id] FROM [Product_Images]">
</asp:SqlDataSource>
post rendered html and show where that page is on your web app, and show us where are the images