Quantcast
Channel: Rick Schott :: devlpr.net » jQuery
Viewing all articles
Browse latest Browse all 10

jQuery Infinite Scroll with MVC 2

$
0
0

The inspiration for this post came from answering a question on Stack Overflow:
jQuery Infinite Scroll and Gridview

Controller:


/// <summary>
/// GET: /Widget/Search/
/// Displays search results.
/// </summary>
/// <param name="s"></param>
/// <returns></returns>
public ActionResult Search(SearchType searchType, string s, [DefaultValue(1)]int page)
{
    try
    {
        int batch = 20;
        int fromRecord = 1;
        int toRecord = batch;

        if(page != 1)
        {
            toRecord = (batch * page);
            fromRecord = (toRecord - (batch-1));

        }

        var widgets= _repos.Search(searchType, s, fromRecord, toRecord );

        if (widgets.Count == 0)
        {
            InfoMsg("No widgets were found.");
        }

        if (Request.IsAjaxRequest())
        {        
            if(widgets.Count > 0)
            {
                return View("SearchResultsLineItems", widgets);
            }
            else
            {
                return new ContentResult
                {
                    ContentType = "text/html",
                    Content = "noresults",
                    ContentEncoding = System.Text.Encoding.UTF8
                };
            }

        }

        return View("SearchResults", widgets);
    }
    catch (Exception ex)
    {
        return HandleError(ex);
    }
}

View:

<% if (Model.Count > 0) { %>  
    <table id="tblSearchResults">
        <tr>
            <th></th>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
            <th>Col5</th>
            <th>Col6</th>
        </tr>
        <% Html.RenderPartial("SearchResultsLineItems", Model); %>       
    </table>
    <div id="loadingSearchResults" style="text-align:center;height:24px;"></div>    
    <div id="actionModal" class="modal"></div>
    <% } %>

Script:


$(document).ready(function() {
    initAutoPaging();
});

function initAutoPaging() {
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            loadMore()
        }
    });
}

var current = 1;
function loadMore() {
    if (current > -1) {
        if (!_isShowingDetails)
        {
            if (!$('#loadingSearchResults').html()) {
                current++;
                $('#loadingSearchResults').show();
                $('#loadingSearchResults').html("<img src='/content/images/loading.gif' />");
                $.ajax({
                    async: true,
                    url: document.URL + "?&page=" + current,
                    contentType: "application/x-www-form-urlencoded",
                    dataType: "text",
                    success: function(data) {
                    if (data != 'noresults') {                           
                            $('#tblSearchResults tr:last').after(data);
                            $('#loadingSearchResults').hide();
                            $('#loadingSearchResults').html('');
                            highlightSearch();
                        } else {
                            current = -1;
                            $('#loadingSearchResults').show();
                            $('#loadingSearchResults').html("<h3><i>-- No more results -- </i></h3>");
                        }                     
                    }
                });
            }
        }

    }
}


Viewing all articles
Browse latest Browse all 10

Trending Articles