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

您是否尝试将显示标题标记放在控制器的视图包中并将其传回部分视图？如果标志显示yes，则显示标题，否则显示。

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

1 个答案: