通過javascript使用視圖模型和Razor

Question

我有一個包含“歌曲”列表的視圖模型。 現在，我不再需要瀏覽所有列表，因此在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調用，我已經有了該頁面的模型，只是不想立即使用所有模型。

Answer 1

我認為實現此目標的最佳方法是將模型集合解析為javascript對象（數組）

首先，您需要創建html helper方法（無論如何在其他情況下也將很有用），例如

  using Newtonsoft.Json;
   .....
     public static HtmlString ToJson(this HtmlHelper helper, object obj)
     {
         return MvcHtmlString.Create(JsonConvert.SerializeObject(obj));
     }

然后將您的模型屬性轉換為js對象。

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

就這樣。 為我工作。