在部分页面上的webGrid中使用jquery进行无限滚动

Question

我试图在Webgrid控件中使用无限滚动。 我的Webgrid位于部分页面中。 我设法使它“滚动”，但是问题是我的Webgrid标头重复出现，原因是网格位于部分页面中，因此整个内容再次被渲染。 其他人有类似的问题或想法如何解决？

这是我的查看代码：

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>

这是我的控制器代码：

        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();
    }

这是我的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

您是否尝试过将显示标头标志放在控制器的一个视图包中，并将其传递回您的局部视图？ 如果标志是，则显示标题，否则不显示。