javascript - 计算 Ajax 请求中返回的对象数量

Question

我的ajax请求返回一个IEnumerable UpcomingGigs，我想计算每个请求返回了多少个Gig。我对此进行了各种尝试，但是每次尝试也包含属性值的计数，因此不是准确的结果。

Console.log(data.Length);var count=Object.keys(data).length;

ajax数据响应:

08/01/2021 17:50:00 - 鲍勃

两个值都返回相同的错误结果。

public ActionResult FetchGigs(int skip, int take)
        {
            var upcomingGigs = _context.Gigs
                                .Include(g => g.Artist)
                                .Where(g => g.DateTime > DateTime.Now)
                                .OrderBy(d => d.DateTime)
                                .Skip(skip).Take(take);

            var viewModel = new GigsViewModel
            {
                UpcomingGigs = upcomingGigs
            };
            return PartialView("FetchGigs", viewModel);
        } 

View 模型

Ajax

    public class GigsViewModel
        {
            public IEnumerable<Gig> UpcomingGigs { get; set; }
            public int TotalGigs { get; set; }
            public bool ShowActions { get; set; }
            public string Heading { get; set; }
        }

$(window).scroll(function () {
                if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
                    $.ajax({
                        type: "GET",
                        url: "@Url.Action("FetchGigs")",
                        data: { skip: skip, take: take },
                        success: function (data) {

                            console.log(data.GigsViewModel.gigId.);

                            $(".result").append(data);
                        }
                    })
                }
            });

Answer 1

有多种方法可以做到这一点。一种方法是向从分部 View 呈现的 ul 元素添加数据属性，并将项目计数存储在其中。您可以使用 IEnumerable.Count() 方法。

@model YourNamespace.GigsViewModel
<ul data-itemcount="@Model.UpcomingGigs.Count()">
    @foreach (var item in Model.UpcomingGigs)
    {
        <li>@item.Title</li>
    }
</ul>

现在，在 ajax 成功事件中，使用 $.parseHTML 解析从服务器收到的响应，然后读取数据属性值

success: function (data) {
    var html =$.parseHTML(data);
    var itemCount = $(html).data("itemcount");
    alert(itemCount);
}

另一种选择是使用 find 方法来获取列表项数组并获取其长度。

success: function(data) {
    var html = $.parseHTML(data);
    var itemCount = $(html).find("li").length;
    alert(itemCount);
}

我会采用第一种方法，因为我不喜欢我的浏览器做这么多工作。 (它必须循环遍历此处的 dom 元素才能获取计数)