How To Display image dynamically in asp.net

Question

I have a Folder which consists of number of images. Initially have to load the first image from that folder in a page. when user click the first image it should display the second image where it will have next link for the third image. when the user click the next link now then it should display third image where it will have next link for fourth image and previous link for third image where it should repeat upto the end of the image.

Can any one tell me how can i display images one by one by passing query string value to the images and how to change the link dynamically for the images

Update:

Intially i want to load the first file without passing query string, with the first file there should have next file link. Once the next link button is clicked then only have to pass the query string.

how to pass the query string from second file to end of the file,

    DirectoryInfo oImageFolderInfo = new DirectoryInfo(this.ImagePath);
    FileInfo[] oFileList = oImageFolderInfo.GetFiles("*.*");

    
    string fileName=string.Empty;

   if (Request.QueryString["filename"] != null)
    {
        fileName=(Request.QueryString["filename"]);

    }

    else
    {
        fileName = oFileList[0].Name;
    }

    HtmlImage imag = new HtmlImage();
    imag.Src = Url + fileName;
    

    HtmlAnchor nextAnchor = new HtmlAnchor();
   nextAnchor.Href=??
    nextAnchor.InnerText = "Next>>";
    
    HtmlAnchor prevAnchor = new HtmlAnchor();
    prevAnchor.Href=??

How to proceed this same upto reaching the end of the file?

If you want to get an answer here you should really go more into the details of the specific problem you are having. — Gerrie Schenck
– Gerrie Schenck, Commented Mar 24, 2011 at 10:25

Dima · Accepted Answer · 2011-03-25 19:17:03Z

One way to do this would be to place the image and the links in an update panel and have the update panel be triggered by the links. At the server, catch onclick for the links and just update the image source and the links.

Another way would be to use javascript, initially creating an array of image sources and retrieving from that array on link clicks (i.e. do a Page.ClientScript.RegisterStartupScript() on form load).

Sorry if the answer is generic but the question is rather vague.

Update:

        DirectoryInfo oImageFolderInfo = new DirectoryInfo(this.ImagePath);
        FileInfo[] oFileList = oImageFolderInfo.GetFiles("*.*"); 

        string currentFileName, nextFileName, prevFileName = string.Empty;
        int currentFileId, nextFileId = 0;
        int prevFileId = oFileList.Length - 1;

        /*not sure why you want the user to see the image name
        it is not really needed for the code
        Request.QueryString["filename"] != null && Request.QueryString["id"] != null*/
        if (Request.QueryString["id"] != null)
        {
            //currentFileName=(Request.QueryString["filename"]);
            if (!int.TryParse(Request.QueryString["id"],out currentFileId))
            {
                currentFileId = 0;
            }
            else if (currentFileId > 0)
            {
                prevFileId = currentFileId - 1;
            }

            if (currentFileId + 1 < oFileList.Length)
            {
                nextFileId = currentFileId + 1;
            }
        }
        else
        {
            if (oFileList.Length > 1)
            {
                nextFileName = oFileList[1].Name;
                nextFileId = 1;
            }       
        }

        currentFileName = oFileList[currentFileId].Name;
        nextFileName = oFileList[nextFileId].Name;
        prevFileName = oFileList[prevFileId].Name;

        /*Not sure what you are doing here ... you should already have an image
        container on the page and should be setting its source, 
        not creating a new image
        Same goes for the links (Anchors)*/
        HtmlImage imag = new HtmlImage();
        imag.Src = Url + currentFileName;
        HtmlAnchor nextAnchor = new HtmlAnchor();
        nextAnchor.Href="?filename=" + nextFileName + "&id=" + nextFileId;
        nextAnchor.InnerText = "Next>>";
        HtmlAnchor prevAnchor = new HtmlAnchor();
        prevAnchor.Href = "?filename" + prevFileName + "&id=" + prevFileId;

I did not test this code, but I think it should work. You should have other checks to see that there are files in the directory, etc. Also, this is not a very efficient way of doing things because you are always reading the files from the directory (you could read them in once and store them in a session variable (Ex. Session["imageFiles"] = oFileList;) and then grab the array from the Session (Ex. oFileList = Session["imageFiles"];)

Judah Sali · Accepted Answer · 2011-03-25 03:36:44Z

0

This won't be the best performing approach, but it is simple.

In your codebehind, on Page_Load use the filesystem (System.IO) to loop through all your files in the directory. If you need your images to display in a certain order, you could name them so they sort correctly. Set the ImageUrl of your image to the first file. When the Next button is clicked the page will load again. In Page_Load, read the ImageUrl of the image, and loop through the files again until you are one past the the last image. Set the ImageUrl of the image to this next file.

Dima's answer is much better, but if it is too complicated, this is a way to get started.

answered Mar 25, 2011 at 3:36

Judah Sali

1,0981 gold badge7 silver badges12 bronze badges

Collectives™ on Stack Overflow

How To Display image dynamically in asp.net

Update:

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update:

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related