CodeProject: A simple ASP.NET AJAX image browser. Free source code and programming help

Announcements

Monthly Competition

Articles

Desktop Development

Web Development

Enterprise Systems

Content Management Server

Microsoft BizTalk Server

SQL Reporting Services

Platforms, Frameworks & Libraries

Windows Communication Foundation

Windows Presentation Foundation

Windows Workflow Foundation

Cryptography & Security

Threads, Processes & IPC

Development Lifecycle

Debug Tips

Design and Architecture

Uncategorised Technical Blogs

Services

Code-signing Certificates

Job Board

CodeProject VS2008 Addin

Feature Zones

Product Showcase

WhitePapers / Webcasts

IBM DeveloperWorks

ASP.NET Web Hosting

Advanced Search

Report

Discuss

10 votes for this article.

Popularity: 3.35 Rating: 3.35 out of 5

Introduction

I have written an image browser page with ASP.NET, using ASP.NET AJAX to retrieve information about the images on the server. Images are displayed using a single ASPX page and a folder with JPG files. The code-behind is written in C#. No database is involved.

Background

My goal was to show my family some photos on a web page, and hopefully spending less than a few hours accomplishing that. I wanted to do so without using a database, without titles, without descriptions, without tags, etc. However, I included the shooting date of the photo as part of the file name, since it provided a way to retain some information without using a database.

Using the code

Code-behind (C#)

I first created an ASPX web form, and in the code-behind, wrote a static web method to return information about the images on the server:

[WebMethod]
public static Image[] GetImages()
{
    // The virtual path to the image folder:
    // (in this case a folder that contains some photos)
    string imageFolderVirtualPath = "~/Photos/";
    string imageFolderPath = HttpContext.Current.Server.MapPath(imageFolderVirtualPath);
    List<image> images = new List<image>();
    DirectoryInfo diImages = new DirectoryInfo(imageFolderPath);
    // Only *.jpg files are included in this case:
    foreach (FileInfo fiImage in diImages.GetFiles("*.jpg"))
    {
        string fileName = fiImage.Name;
        // If the file name starts with the DateTime pattern yyyy-MM-dd,
        // the date is parsed from that:
        string date = string.Empty;
        int year = 0;
        int month = 0;
        int day = 0;
        if (fileName.Length > 9 && Int32.TryParse(fileName.Substring(0, 4), out year)
            && Int32.TryParse(fileName.Substring(5, 2), out month)
            && Int32.TryParse(fileName.Substring(8, 2), out day))
        {
            date = new DateTime(year, month, day).ToLongDateString();
        }
        images.Add(new Image
        {
            Date = date,
            VirtualPath = CombineVirtualPaths(imageFolderVirtualPath, fileName)
        });
    }
    return images.ToArray();
}

A helper method combines the virtual paths:

private static string CombineVirtualPaths(string virtualPath1, string virtualPath2)
{
    return string.Format("{0}/{1}", virtualPath1.Trim('~', '/'), virtualPath2.Trim('/'));
}

A helper class provides information about an image:

public class Image
{
    /// <summary>
    /// The virtual path to the image file
    /// </summary>
    public string VirtualPath { get; set; }

    /// <summary>
    /// The date as a string
    /// </summary>
    public string Date { get; set; }
}

HTML/ASPX markup

In the *.aspx file, I have the following markup:

<body onload="GetImages();">
<form id="form1" runat="server">
<asp:ScriptManager id="sm1" runat="server" 
   EnablePageMethods="true" EnableScriptGlobalization="true">
</asp:ScriptManager>
<div>
 <div id="divButtons" style="float: left;">
 </div>
 <div id="divImage" style="float: left;">
 </div>
</div>
</form>
</body>

JavaScript

On page load, a JavaScript method is fired that retrieves info from the page method:

 // Information about the Images:
 var images;

 // The index of the currently shown Image:
 var currentImageIndex = 0;

 // Calls the page method to obtain information about the Images:
 function GetImages() {
     PageMethods.GetImages(GetImagesCompleted);
 }

 // The call-back where information about the images is returned:
 function GetImagesCompleted(result) {
     images = result;
     ShowImage();
 }

 // Shows the Image:
 function ShowImage() {
     var currentImage = images[currentImageIndex];
     var date = currentImage.Date;
     var imgImage = "<img id='imgImage' alt='" + date +
         "' title='" + date + "' src='" + 
         currentImage.VirtualPath "' />";
     var dp = document.getElementById("divImage");
     dp.innerHTML = imgImage;
     document.title = date;
     ShowButtons();
 }

A separate JavaScript method displays the appropriate navigation buttons:

  // Shows the buttons:
 function ShowButtons() {
     // Gets localized texts (English or Danish) for the buttons.
     // This only works with the following two settings:
     //    - The ScriptManager on this page must have:
     ///     EnableScriptGlobalization="true"
     //    - web.config must have:
     //      <globalization culture="auto"> (in <system.web> section)
     // The default English texts:
     var first = "First";
     var previous = "Previous";
     var next = "Next";
     var last = "Last";
     if (Sys.CultureInfo.CurrentCulture.name.toLowerCase().startsWith("da")) {
         // The Danish texts:
         first = "Første";
         previous = "Forrige";
         next = "Næste";
         last = "Sidste";
     }
     var button1 = "<div><input type='button' style='width: 75px;'";
     var btnFirst = button1 + " value='" + first + 
                    "' onclick='ShowFirstImage();'";
     var btnPrevious = button1 + " value='" + previous + 
                       "' onclick='ShowPreviousImage();'";
     var btnNext = button1 + " value='" + next + 
                   "' onclick='ShowNextImage();'";
     var btnLast = button1 + " value='" + last + 
                   "' onclick='ShowLastImage();'";
     if (currentImageIndex == 0) {
         btnFirst += " disabled='disabled'";
         btnPrevious += " disabled='disabled'";
     }
     if (currentImageIndex == images.length - 1) {
         btnNext += " disabled='disabled'";
         btnLast += " disabled='disabled'";
     }
     var button2 = " /></div>";
     btnFirst += button2;
     btnPrevious += button2;
     btnNext += button2;
     btnLast += button2;
     var db1 = document.getElementById("divButtons");
     db1.innerHTML = btnFirst + btnPrevious + btnNext + btnLast;
 }

 // Shows the first Image:
 function ShowFirstImage() {
     currentImageIndex = 0;
     ShowImage();
 }

 // Shows the previous Image:
 function ShowPreviousImage() {
     if (currentImageIndex > 0) {
         currentImageIndex -= 1;
         ShowImage();
     }
 }

 // Shows the next Image:
 function ShowNextImage() {
     if (currentImageIndex < images.length - 1) {
         currentImageIndex += 1;
         ShowImage();
     }
 }

 // Shows the last image:
 function ShowLastImage() {
     currentImageIndex = images.length - 1;
     ShowImage();
 }

Points of interest

A useful application built in a single web form and a folder with images.
The EnableScriptGlobalization feature on the ScriptManager and the ability to extract language information in JavaScript using Sys.CultureInfo.CurrentCulture.name.

License

This article, along with any associated source code and files, is licensed under The BSD License

About the Author

Ole L. Sørensen

Member

Occupation:	Software Developer
Location:	Denmark

Other popular Ajax and Atlas articles:

Build Google IG like Ajax Start Page in 7 days using ASP.NET Ajax and .NET 3.0
Build a start page similar to Google IG in 7 nights using ASP.NET Ajax, .NET 3.0, Linq, DLinq and XLinq.
An Introduction to AJAX Techniques and Frameworks for ASP.NET
This article introduces AJAX to ASP.NET developers, implementing an example web page in different ways using ASP.NET Atlas, ASP.NET callbacks, Ajax.Net, Anthem.Net, and MagicAjax.Net.
ASP.NET Ajax Under-the-hood Secrets
Performance tips and hard-core tricks that change core runtimes, not for the faint-hearted
Introduction to Anthem.NET
How to do AJAX without writing any JavaScript.
Dropdown Box Using AJAX
This article illustrates two dropdown-boxes with nations and states. When selecting a particular nation, the corresponding states will be in the states dropdownbox.

Article Top

You must Sign In to use this message board.

FAQ
Noise Tolerance Layout Per page

Msgs 1 to 3 of 3 (Total in Forum: 3) (Refresh)

FirstPrevNext

Is this .NET 3.5?

remarkpk11

9:09 5 Mar '09

I'm targeting 2.0 and would love to write some similar JavaScript to do this... <asp:updatepanel xmlns:asp="#unknown"> doesn't seem to be quite doing it for me. Patrick
Sign In·View Thread·PermaLink

Alternative to parse the filename for a date pattern

Norbert Bietsch

10:15 2 Oct '08

Hi, thanks for sharing your code, I'll have a closer look Wink

With the way you parse for a date pattern in the filename you are at risk for an exception in case the integers don't combine to a valid date. Lately I did something similar and I chose DateTime.TryParseExact for it:


string fileName = "2008-01-30_bananaglasses.jpg";
DateTime outDate;
if (fileName.Length > 9 && DateTime.TryParseExact(fileName.Substring(0, "yyyy-MM-dd".Length), new[] { "yyyy-MM-dd" }, System.Threading.Thread.CurrentThread.CurrentCulture,
System.Globalization.DateTimeStyles.None, out outDate))
     {
          date = outDate.ToLongDateString();
     }

Nothing spectacular, but maybe more safe.
Thanks again,
Norbert

Re: Alternative to parse the filename for a date pattern

Ole L. Sørensen

19:53 2 Oct '08

Thanks for the comment, and for naming the photo! The method you propose is simpler and cleaner, in my view. I have implemented it in my code.
Sign In·View Thread·PermaLink

Last Visit: 21:04 9 Jul '09 Last Update: 21:04 9 Jul '09

General News Question Answer Joke Rant Admin

PermaLink | Privacy | Terms of Use
Last Updated: 2 Oct 2008
Editor: Smitha Vijayan