通过javascript使用视图模型和Razor

我有一个包含“歌曲”列表的视图模型。 现在我不想让视图遍历所有列表，所以在java脚本中我做了：

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() + 5 > $(document).height()) {    
        @foreach (var item in Model.Songs.Skip(Number).Take(20))
        {
             //do something
        }
        Number = Number + 20;
    }
});

---

问题是Razor变量'Number'没有更改，所以我总是加载相同的条目。我不想每次滚动器到达底部时都进行ajax调用，我已经有了页面的模型，我只是不想立即处理所有的模型。

实现这一点的最好方法是将模型集合解析为javascript对象（数组）

首先，您需要创建html助手方法（在其他情况下仍然有用），如

然后将模型属性转换为js对象

<script>
    var songs = @Html.ToJson(Model.Songs.Skip(Number).Take(20))
</script>

var songs=@Html.ToJson（Model.songs.Skip（Number.Take（20））

就这些。对我有用

<script>
    var songs = @Html.ToJson(Model.Songs.Skip(Number).Take(20))
</script>