在部分页面上的 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

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