Infinite scroll with jquery in webGrid on Partial Page

Question

I am trying to get an infinite scroll working in my Webgrid control. I have my Webgrid in a partial page. I have managed to get it "scrolling" , but the issue is my Webgrid header is repeating due to the fact that the grid is in a partial page so the whole thing gets rendered again. Anyone else have a similar issue or any ideas how to sort this out ?

Here is my view code:

var page = 0;
var _inCallback = false;

function loadAccounts() {
    if (page > -1 && !_inCallback) {
        _inCallback = true;
        page++;
        var loadingImagesrc = '@Url.Content("../../Images/loading.gif")';
        var infiniteScrollAction = '@Url.Action("AccountInfiniteScroll/", "Client")';
        $('div#loading').html('<p><img src' + loadingImagesrc + '></p>');
        $.get(infiniteScrollAction + page, function (data) {
            if (data != '') {
                $("#accountsList").append(data);
            }
            else {
                page = -1;
            }

            _inCallback = false;
            $('div#loading').empty();
        });
    }
}

var dcList = true;

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {

        loadAccounts();
    }
});
</script>
<div id="accountsList">

     @Html.Action(Controllers.ClientController.AccountInfiniteScroll, new { id =         Model.ClientId })  
</div>

Here is my Controller code:

        const int recordsPerPage = 30;
    public const string AccountInfiniteScroll = "AccountInfiniteScroll";
    [ActionName(AccountInfiniteScroll)]
    public ActionResult Result(int id = 1)
    {
        return PartialView("_AccountsList", GetAccountsForInfiniteScroll(id));
    }

    /// <summary>
    /// Gets the accounts for infinite scroll.
    /// </summary>
    /// <param name="page">The page.</param>
    /// <returns></returns>
    private List<Account> GetAccountsForInfiniteScroll(int page = 1)
    {
        var skipRecords = page * recordsPerPage;

        var listOfProducts = Context.Accounts.Where(x => x.Accountid != null);

        return listOfProducts.
            OrderBy(x => x.Accountid).
            Skip(skipRecords).
            Take(recordsPerPage).ToList();
    }

And here is my partial page with my Webgrid:

@model IEnumerable<Models.Account>
@{
ViewBag.Title = "Home Page";
}

@{       var grid = new WebGrid(source: Model,  rowsPerPage: 30);
}

@grid.GetHtml(
tableStyle: "grid-view",
headerStyle: "headerStyle",
alternatingRowStyle: "alternate",
selectedRowStyle: "selected",
rowStyle: "normal",displayHeader :true,


columns: grid.Columns(
grid.Column(header: "Account Number", columnName: "AccountId", format: (item) => Html.ActionLink(
                     (string)@item.AccountIdentifier, "Details", "Account", new { id =     @item.AccountId }, null)),

grid.Column(header:"Account Type",columnName:"AccountType"),
grid.Column("Currency"),
grid.Column(header:"Start Date",columnName:"StartDate",format: (item) => string.Format("{0:dd-MMM-yyyy}", @item.StartDate)),
grid.Column(header:"Close Date",columnName:"CloseDate",format: (item) => string.Format("{0:dd-MMM-yyyy}", @item.CloseDate))
)
 )

Answer 1

Have you tried putting a display header flag in a viewbag in the controller and passing it back to your partial view? If the flag says yes, display the header, otherwise don't.