Динамическая загрузка изображения из файловой системы сервера в ASP.NET через jquery

Question

UPDATE: Теперь это мертвый вопрос. Во время дальнейшей отладки я понял, что сервер (на котором мне нужно протестировать эту часть моего кода из-за прав доступа к файлам и тому подобного) не получал обновления от VS2010, хотя я их и опубликовал. Разочарование. Во всяком случае, все это прекрасно работает. Возможно, это может быть использовано кем-то еще, пытающимся выяснить, как сделать подобное? Спасибо всем за помощь.

Этот сводит меня с ума уже пару дней.

То, что у меня есть, это простой список миниатюр изображений, который при нажатии должен отображать полноразмерное изображение в другом div через некоторый jquery.

Я получаю данные миниатюрного изображения и путь к файлу полноразмерного изображения из базы данных. Соответствующее полноразмерное изображение хранится на том же сервере, что и экземпляр IIS.

Мы не хотим отображать путь к файлу в отображаемом HTML, поэтому мы зашифровываем путь к файлу и отправляем его в качестве параметра универсальному обработчику, который расшифровывает его, загружает файл с сервера и выводит его как поток байтового массива.

Обработчик работает так, как задумано, однако проблема возникает при попытке выполнить HTML-часть jquery. Вместо отображения изображения в div он открывает новую вкладку браузера и показывает изображение из обработчика, как если бы JavaScript был отключен. Что мне нужно, так это изображение, отображаемое в элементе #photosLarge, что может произойти, если мы используем URL-адрес изображения или что-то в этом роде.

Вот мой соответствующий код:

Вид:

<ul class="thumbnails">
    @For Each photo In Model.Photos
        Dim p As MyProject.Models.FolderImage = photo
        Dim FullSizeLink As String = "/Handlers/GetImage.ashx?file=" & p.DocPath
        @:<li><a href="@FullSizeLink" class="thumbnail"><img src="@p.Thumbnail.ToString" /></a></li>
    Next
</ul>

<div id="photoLarge"></div>

ЯШ:

$(".thumbnail").click(function () {
    var image = $(this).attr("href");
    $('#photoLarge').hide();
    $('#photoLarge').fadeIn('slow');
    $('#photoLarge').html('<img src="' + image + '"/>');
    return false;
});

Мой обработчик:

Public Class GetImage
    Implements System.Web.IHttpHandler
    Implements System.Web.SessionState.IRequiresSessionState

    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

        Dim Common = New Common
        Dim FilePath As String
        Dim FileInfo As System.IO.FileInfo
        Dim FileStream As System.IO.FileStream
        Dim FileLengthInBytes As Long
        Dim QueryString As String
        Dim EncryptionKey as String = "df235s!2" 'that's not my real key ;-) 
        Try
            QueryString = context.Request.QueryString("file")
            FilePath = Common.DecryptString(QueryString.Replace(" ", "+"), EncryptionKey).Replace("+", " ")

            FileInfo = New System.IO.FileInfo(FilePath)
            FileStream = FileInfo.OpenRead()
            FileLengthInBytes = FileStream.Length

            If (FileLengthInBytes > 0) Then
                Dim FileData(FileLengthInBytes - 1) As Byte
                FileStream.Read(FileData, 0, FileLengthInBytes)
                FileStream.Close()
                context.Response.Clear()
                context.Response.ContentType = "image/jpeg"
                context.Response.OutputStream.Write(FileData, 0, FileData.Length)
                context.Response.End()
            End If
        Catch ex As IOException
            ReturnImageNotFound(context)
        End Try
    End Sub

    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

''' etc '''
End Class

Answer 1

Похоже, что ссылка не отменяет действие по умолчанию. Вы можете попробовать изменить свою функцию на это:

$(".thumbnail").click(function (e) {
    e.preventDefault();

    var image = $(this).attr("href");
    $('#photoLarge').html('<img src="' + image + '"/>').hide().fadeIn('slow');
});