Greetings, I am currently in the process of creating a page where users can view specific car details and related photos. At the moment, I am utilizing a SQL table to store the image paths and then manually assigning each path as an "ImageUrl" attribute to img tags that I have created.
I am wondering if there is a way to dynamically generate img tags and assign the "ImageUrl" based on the number of related entities in the table since the number of pictures will vary. If this is not possible, I would appreciate any alternative suggestions.
In other sections of my web form, I am using scripts such as C#, JavaScript, and SqlCommand. I am relatively new to this, and my research has only shown me how to assign the ImageUrl in the code behind, which is what I have done so far. Thank you in advance.
Here is the current code for the img tags:
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Default.png" />
<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Default.png" />
And here is the code behind:
List<string> folder = new List<string>();
while (readerPhoto.Read())
{
folder.Add(readerPhoto["Folder"].ToString());
}
switch (folder.Count)
{
case 1:
Image1.ImageUrl = folder[0];
break;
case 2:
Image1.ImageUrl = folder[0];
Image2.ImageUrl = folder[1];
//and so forth.......
08/07/12. Latest attempt code (dynamic image creation, but src attribute not assigned correctly):
.aspx
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CarsConnectionString %>"
SelectCommand="SELECT Folder FROM Cars INNER JOIN Photos ON Cars.SN = Photos.Cars_SN WHERE (Cars.SN = @SN)">
<SelectParameters>
<asp:QueryStringParameter DefaultValue="SN" Name="SN" QueryStringField="SN" />
</SelectParameters>
</asp:SqlDataSource>
<asp:ListView ID="lvPhotos" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<asp:Image ID="imgListImage" runat="server" ImageUrl='<% Eval("Folder") %>' />
</ItemTemplate>
</asp:ListView>
The HTML output displays a broken image icon and the script as:
<img id="MainContent_ListView1_imgListImage_0" src="<%%20Eval("Folder")%20%>" style="width: 80px; height: 80px; ">