asked on

asp:literal using literal in ASP for iamges

I am trying to develop some code I have had working in the past, but this code only allowed a images that are specified in the code to be displayed. To solve this I decided i would use a literal and C# (see below). The reason is i have the hover functionality working well in CSS, so wanted to keep that.
Now if i use the literal the image does not show when the thumbnail is hovered on. BUT, if in the webpage I right click and get source, put the literal string directly into my source then it works fine.
What am I doing wrong...going nuts here.

Here is my code

ASPX
<%@ Page language="C#" codefile="~/ImageLoad.aspx.cs" autoeventwireup="true" masterpagefile="~/MasterPage.master" inherits="ImageLoad"%>

<asp:content id="myimages" runat="server" contentplaceholderid="MasterPageContent">

<div class="myPics">

<div id="imageContainer">
<asp:literal runat="server" id="imged" />
</div>
</div>
</asp:content>

C# Bit:
protected void Page_Load(object sender, EventArgs e)
{
string html = "";
char indx = 'a';
html = "<ul>" + Environment.NewLine;

foreach (FileInfo fi in new DirectoryInfo(Server.MapPath("Images/fullsize")).GetFiles())
{
if (fi.Extension == ".jpg")
{
System.Web.UI.WebControls.Image i1 = new System.Web.UI.WebControls.Image();
i1.Width = 100;
i1.Height = 100;
html += "<li> <a class=\"gallery slide" + indx + "\" href=\"#nogo\"> <span> <asp:image id=\""
+ indx + "\" imageurl=\"~/Images/fullsize/" + fi.Name + "\" runat=\"server\"/> </span> </a>
</li>";
indx++;
}
}
html += "</ul>";
//imged.Text = html;

}

//ASPX
 
<%@ Page language="C#" codefile="~/ImageLoad.aspx.cs" autoeventwireup="true" masterpagefile="~/MasterPage.master" inherits="ImageLoad"%>
 
<asp:content id="myimages" runat="server"   contentplaceholderid="MasterPageContent">
 
<div class="myPics">
 
    <div id="imageContainer">
    <asp:literal runat="server" id="imged" />
</div>
</div>
</asp:content>
 
 
C# Bit:
    protected void Page_Load(object sender, EventArgs e)
    {
        string html = "";
        char indx = 'a';
        html = "<ul>" + Environment.NewLine;
 
        foreach (FileInfo fi in new 
            DirectoryInfo(Server.MapPath("Images/fullsize")).GetFiles())
        {
            if (fi.Extension == ".jpg")
            {
                System.Web.UI.WebControls.Image i1 = new 
                       System.Web.UI.WebControls.Image();
                i1.Width = 100;
                i1.Height = 100;
                html += "<li> <a class=\"gallery slide" + indx + "\" href=\"#nogo\"> <span> <asp:image id=\""
                    + indx + "\" imageurl=\"~/Images/fullsize/" + fi.Name + "\" runat=\"server\"/> </span> </a>             
                  </li>";
                indx++;
             }
        }
        html += "</ul>"; 
        //imged.Text = html;
 
    
    }

Open in new window

ASKER CERTIFIED SOLUTION

samtran0331

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

samtran0331

I guess to be more correct, you can render an asp.net control into a literal, but it won't work as an asp.net control, it will just render the text of the control "<asp:image.." as it is, its not a real image control

vpatel2708

ASKER

oh ok , i understand that thank you....so I changed my code to take out the <asp: bit and left it as
<image.

Now I when i hover over the thumbnails I get a little square, the picture placeholder image with the little square, triangle and circle in it. I checked my image path and that looks ok. Am I still missing something?

vpatel2708

ASKER

Ok lets make it clearer...this is one of my image lines....i can't figure out what I am doing wrong here!

With this code I get a image place little square with red cross

<a class="gallery slidea" href="#nogo"> <span> <img id="a" src="~/Images/fullsize/small2.jpg" runat="server" alt="APIC"/> </span> </a>

using this code:
<a class="gallery slidea" href="#nogo"> <span> <image id="a" imageurl="~/Images/fullsize/small2.jpg" runat="server" > </span> </a>

I get little square, the picture placeholder image with the little square, triangle and circle in it.

vpatel2708

ASKER

Ok I worked it out I think

src="~/Images/fullsize/small2.jpg"
needed to be
src="Images/fullsize/small2.jpg"

and I deleted the runat server bit too

Working so far
Thank you for all your help!

vpatel2708

ASKER

Thank you for your answer, put me on the right road to solving my problem which is the best way to learn