[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2960
  • Last Modified:

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

0
vpatel2708
Asked:
vpatel2708
  • 4
  • 2
1 Solution
 
samtran0331Commented:
you can't render an asp.net control into a literal:
 html += "<li> <a class=\"gallery slide" + indx + "\" href=\"#nogo\"> <span> <asp:image id=\""....

just use a plain html image:
 html += "<li> <a class=\"gallery slide" + indx + "\" href=\"#nogo\"> <span> <image id=\""....
0
 
samtran0331Commented:
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
0
 
vpatel2708Author Commented:
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?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
vpatel2708Author Commented:
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.
0
 
vpatel2708Author Commented:
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!
0
 
vpatel2708Author Commented:
Thank you for your answer, put me on the right road to solving my problem which is the best way to learn
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now