MVC, отображать список изображений асинхронно с AJAX / JQUERY

Question

У меня есть сайт, где я загружаю список изображений (миниатюр) из базы данных.Проблема в том, что изображения отображаются довольно медленно, так как выбор каждого эскиза с помощью Url.Action довольно трудоемкий (при прохождении всего конвейера MVC).

Поэтому я хотел бы загрузить изображения асинхроннос Ajax & JQUERY при отображении стандартного загрузочного изображения (ajaxloag.info) для каждого изображения, пока изображение не будет загружено.Подобный вопрос был поднят здесь , но мне нужен более полный пример, так как я очень новичок в MVC и JQUERY.

Заранее спасибо,

Просмотр (частичный просмотр)

// Foreach product, display the corresponding thumbnail
<% foreach (var p in Model)
   { %>
.
.

    <img width="100" src="<%= Url.Action( "Thumbnail", "Products", new { productId = p.ID } ) %>" alt=""  />

Контроллер

public ActionResult Thumbnail(string productId)
        {
            try
            {
                Guid pid = new Guid(productId);
                byte[] thumbnailData = _productsRepository.GetProductThumbnail(pid);
                if (thumbnailData != null)
                {
                    return File(thumbnailData, "image/jpg");
                }
                else
                {
                    return File(@"../Content/missingproduct.png", "image/jpg");
                }
            }
            catch (Exception e)
            {
                throw e;
            }
        }

ОБНОВЛЕНИЕ - Родительское представление, содержащее Javascript

<script type="text/javascript">

    $(document).ready(function() 
    {
       getContentTab (1);
    });

    function getContentTab(index)
     {
        var criteria = {
            categoryId : "<%: ViewBag.Header %>", 
            tabIndex: index, 
            searchString : "<%: ViewBag.SearchString %>"
            };
        var url='<%= Url.Content("~/Products/GetAjaxTab") %>'
        var targetDiv = "#listContent"; 
        var ajaxLoadUrl = '<%: Url.Content("/Content") %>/ajax-loader.gif';
        var ajaxLoading = "<img id='ajax-loader' src='" + ajaxLoadUrl + "' align='left' height='28' width='28' />";


        $(targetDiv).html("<div>" + ajaxLoading + " Loading...</div>");

tag in respect to the callback. 
        $.get(url, criteria, function(result)
        {
            $(targetDiv).html(result);
        });

    }


    function AjaxStart()
    {
        $('#listContent').mask('Opdaterer');
    }

    function AjaxEnd()
    {
        $('#listContent').unmask();

    }

    $(function () {
        $('.async').load(function () {
            $(this).unbind('load');
            this.src = $(this).attr('data-img-url');
            alert('2');
        });
    });

//]]>


</script>

Answer 1

Вы можете использовать атрибуты HTML5 data-*:

<img width="100" 
     src="ajax-loader.gif" 
     class="async" 
     data-img-url="<%= Url.Action("Thumbnail", "Products", new { productId = p.ID }) %>" 
/>

и затем в отдельном js-файле:

$(function() {
    $('.async').load(function() {
        $(this).unbind('load');
        this.src = $(this).attr('data-img-url');
    });
});

Также я бы использовал шаблоны редактора / отображения вместо записи foreach циклов в представлениях:

<%= Html.DisplayForModel() %>

и в соответствующем шаблоне дисплея вы бы поместили изображение:

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.Product>" 
%>
<img width="100" 
     src="ajax-loader.gif" 
     class="async" 
     data-img-url="<%= Url.Action("Thumbnail", "Products", new { productId = Model.ID }) %>" 
/>