C# 在Asp.net/MVC中将项目列表动态添加到Owl转盘2

我的视图中有一个Owl转盘，正在加载到转盘的项目来自

局部视图

，如下所示：

@model CalendarComponets.Models.ViewModel.EventWidgetViewModel

    <div class="container">
            <div class="col-md-12 owl-carousel repeater">
                    @Html.Partial("_paginator", (Model.AllCalendarDate as List<CalendarComponets.Models.Data.DateTimer>))
            </div>
            <span class="more-trigger">
                <div id="more-trigger" class="space-top space-bottom"><a class="btn btn-md btn-primary btn-center"><i class="left fa fa-refresh"></i>More</a></div>
            </span>
     </div>

我的

\u paginator

部分视图是：

@model List<CalendarComponets.Models.Data.DateTimer>


@foreach (var item in Model)
            {

    <input type="button" id="@item.Id" value="@item.Date" style="background-color: cadetblue; padding: 25px; text-align: center; border: 1px solid" />
}

在我的控制器

GetNextDateCollection

中调用的操作返回

\u paginator

部分视图：

public ActionResult GetNextDateCollection(string pageNumber)
{
    if(!string.IsNullOrEmpty(pageNumber))
    {
        int pageIndex = Convert.ToInt32(pageNumber);
        var _list = _repository.RangeDate()
            .Skip(7 * pageIndex)
            .Take(7).ToList();
        return PartialView("_paginator", _list);

    }
    else
    {
        return PartialView("_paginator");
    }

}

---

第一次它正确加载并在旋转木马中显示我列表中的7项，但第二次它没有，只是将数据附加到旋转木马下，我做错了什么？如何将返回数据添加到我的旋转木马？

您遇到的问题是，页面第一次加载owl时，它会自动初始化，从而正确显示项目。 然后，当AJAX请求更新滑块时，owl旋转木马已经准备好运行，并且对手动插入的新项目一无所知

要向旋转木马动态添加新项目，您需要通过执行以下操作告知owl旋转木马插入每个新项目：

// Getting the owl carousel
var carousel = $(".owl-carousel");

// splitting the returned data in to an array
var elementArray = data.split('/>');

// Looping through each element and adding it to the carousel
for(i = 0; i < data.length; i++)
{
    // Validating that the array element is not empty
    if(data[i] != '')
    {
        // Adding the array element to the carousel.
        // Also adding back on the chars that was used during the splitting.
        carousel.add(data[i] + '/>');
    }
}

//获取猫头鹰转盘
var carousel=$（“.owl carousel”）；
//将返回的数据拆分为数组
var elementArray=data.split（'/>'）；
//循环遍历每个元素并将其添加到旋转木马
对于（i=0；i'）；
}
}

---

您遇到的问题是，当页面第一次加载owl时，它会初始化自身，从而正确显示项目。 然后，当AJAX请求更新滑块时，owl旋转木马已经准备好运行，并且对手动插入的新项目一无所知

要向旋转木马动态添加新项目，您需要通过执行以下操作告知owl旋转木马插入每个新项目：

// Getting the owl carousel
var carousel = $(".owl-carousel");

// splitting the returned data in to an array
var elementArray = data.split('/>');

// Looping through each element and adding it to the carousel
for(i = 0; i < data.length; i++)
{
    // Validating that the array element is not empty
    if(data[i] != '')
    {
        // Adding the array element to the carousel.
        // Also adding back on the chars that was used during the splitting.
        carousel.add(data[i] + '/>');
    }
}

//获取猫头鹰转盘
var carousel=$（“.owl carousel”）；
//将返回的数据拆分为数组
var elementArray=data.split（'/>'）；
//循环遍历每个元素并将其添加到旋转木马
对于（i=0；i'）；
}
}

---

感谢所有使用此插件（Owl转盘）但没有文档的可怜人。要将项目添加到旋转木马中，必须使用此触发器

add.owl.carousel

多亏了加文·哈里森，我找到了解决方案，我将与大家分享

基本上取决于我的AJAX的

成功

：

   success: function (data) {

        // Getting the owl carousel
         var carousel = $(".owl-carousel");
         //creating an array
         var elementArray = []; 
        // splitting the returned data in to an array 
//element array split

             elementArray = data.split('/>');

        // Looping through each element and adding it to the carousel
         for (i = 0; i < elementArray.length; i++) {
             // Validating that the array element is not empty
             if (elementArray[i] != '' || elementArray[i] != ' />') {

             $('.owl-carousel').trigger('add.owl.carousel', [elementArray[i] + '/>']).trigger('refresh.owl.carousel');
             }
         }
    }

成功：函数（数据）{
//获取猫头鹰旋转木马
var carousel=$（“.owl carousel”）；
//创建数组
var elementArray=[]；
//将返回的数据拆分为数组
//元素数组拆分
elementArray=data.split（'/>'）；
//循环遍历每个元素并将其添加到旋转木马
对于（i=0；i'））.trigger（'refresh.owl.carousel'）；
}
}
}

适用于所有使用此插件（Owl转盘）而无需文档的可怜人。要将项目添加到旋转木马中，必须使用此触发器

add.owl.carousel

多亏了加文·哈里森，我找到了解决方案，我将与大家分享

基本上取决于我的AJAX的

成功

：

   success: function (data) {

        // Getting the owl carousel
         var carousel = $(".owl-carousel");
         //creating an array
         var elementArray = []; 
        // splitting the returned data in to an array 
//element array split

             elementArray = data.split('/>');

        // Looping through each element and adding it to the carousel
         for (i = 0; i < elementArray.length; i++) {
             // Validating that the array element is not empty
             if (elementArray[i] != '' || elementArray[i] != ' />') {

             $('.owl-carousel').trigger('add.owl.carousel', [elementArray[i] + '/>']).trigger('refresh.owl.carousel');
             }
         }
    }

成功：函数（数据）{
//获取猫头鹰旋转木马
var carousel=$（“.owl carousel”）；
//创建数组
var elementArray=[]；
//将返回的数据拆分为数组
//元素数组拆分
elementArray=data.split（'/>'）；
//循环遍历每个元素并将其添加到旋转木马
对于（i=0；i'））.trigger（'refresh.owl.carousel'）；
}
}
}

嘿，我尝试了你的解决方案，但仍然无效。。数据包含html标记，但它仍然无法理解这些标记。@Valkyriee我看到了问题我的错，我希望ajax请求返回的是字符串的json数组，而不是单个字符串。这是因为需要快速添加每个输入元素。我将使用步骤更新答案，将每个输入拆分为它自己的stringGavin mate！非常感谢。你的解决方案给了我一些好主意。然而，这并不是全部的解决方案。add方法不起作用。。我不知道为什么，可能是因为我在使用猫头鹰转盘2，检查我的解决方案，这就是答案！无论如何，非常非常好的工作=）嘿，我尝试了你的解决方案，但是仍然不起作用。。数据包含html标记，但它仍然无法理解这些标记。@Valkyriee我看到了问题我的错，我希望ajax请求返回的是字符串的json数组，而不是单个字符串。这是因为需要快速添加每个输入元素。我将使用步骤更新答案，将每个输入拆分为它自己的stringGavin mate！非常感谢。你的解决方案给了我一些好主意。然而，这并不是全部的解决方案。add方法不起作用。。我不知道为什么，可能是因为我在使用猫头鹰转盘2，检查我的解决方案，这就是答案！无论如何，非常非常好的工作=）