How much work is involved adding AJAX section in a

问题:

I have an application where it search images that are stored in the database and displays the result (with pagination). Currently every time the next page is loaded our whole site is reloaded. Hence, our site is noticeably sluggish.

I was looking into iStockPhoto and see that only the images content is loaded and their performance is much better than mine.

I am using Solr (which to me seems slow.. anything I'm missing? I thought Solr is supposed to be quick. Haha) to store and retrieve images.

SO !!

my question to you gents/ladies is if I want to allow only the pagination contents to be refreshed when next page is hit, is there a lot that I have to do? Such as changing Controllers, Views, and etc.?

Thank you so much!

This is the code I have:

<table>
<tr>
    <td>...</td> 
    <td valign="top" style="width: 100%">
        <div id="imageList" class="imageList">
            @Html.Partial("AssetManagerSelection", new FacetsWidget
                                        {
                                            SelectedFacetNodes = Model.Search.SelectedFacetNodes
                                        })
            @{
                var pagerInfo = new PaginationInfo
                {
                    PageUrl = Url.SetParameter("page", "!0"),
                    CurrentPage = Model.Search.PageIndex,
                    PageSize = Model.Search.PageSize,
                    TotalItemCount = Model.TotalCount,
                };
            }      
            @Html.Partial("AssetManagerPager", pagerInfo)
            @if (pagerInfo.CurrentPage <= pagerInfo.LastPage)
            {
                <ul class="thumbnailsList">
                    @{var thumbnailIndex = 1;}
                    @foreach (var item in Model.MatchingItems)
                    {
                        var thumbnailClass = string.Empty;
                        if (Model.Search.ThumbnailSize == CacheLevel.DetailsView)
                        {
                            thumbnailClass = "thumbnailImagesS";
                        }
                        else
                        {
                            thumbnailClass = "thumbnailImagesM";
                        }
                        <li>
                            <div class="@thumbnailClass">
                                @Html.Partial("ItemThumbnail", item)
                            </div>
                            @{thumbnailIndex++;}
                        </li>
                    }
                </ul>
                @Html.Partial("AssetManagerPager", pagerInfo)
            }
        </div>
    </td>
</tr>