Solved

asp:literal using literal in ASP for iamges

Posted on 2007-12-06
6
2,949 Views
Last Modified: 2010-04-21
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
Comment
Question by:vpatel2708
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 37

Accepted Solution

by:
samtran0331 earned 500 total points
ID: 20421361
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
 
LVL 37

Expert Comment

by:samtran0331
ID: 20421368
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
 
LVL 1

Author Comment

by:vpatel2708
ID: 20426355
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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 1

Author Comment

by:vpatel2708
ID: 20426401
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
 
LVL 1

Author Comment

by:vpatel2708
ID: 20426450
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
 
LVL 1

Author Closing Comment

by:vpatel2708
ID: 31413198
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question