在 Asp.net/MVC 中动态地将项目列表添加到 Owl 轮播 2

Question

我有一个 Owl 轮播，正在加载到轮播的项目来自 partial-view，如下所示：

@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>

它们填充在我的控制器中：

public ActionResult GetStaff()
{
         EventWidgetViewModel _vm = new EventWidgetViewModel();
         Repository _repository = new Repository();
        _vm.AllCalendarDate = _repository.RangeDate().Take(7).ToList();
        _vm.AllReservedHours = _repository.GetAvailableHours(DateTime.Now);
        return PartialView("_calendar", _vm);
}

我的 _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" />
}

现在我调用 ajax 从控制器中获取下一个 n 列表，成功后它应该将数据附加到我的传送带但它没有并将数据附加到我的传送带下：

    //ajax to get next Dates
    var page = 1; 
    $(document).on('click', '#more-trigger', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'GET',
            url: '/EventWidget/GetNextDateCollection',
            data: {
                pageNumber: page++
            },
            success: function (data) {
                 alert(data);             

                 var carousel = $(".owl-carousel");
                 carousel.owlCarousel({
                     nav: true,
                     navText: ['<i class="fa fa-arrow-left"></i>',
                         '<i class="fa fa-arrow-right" id="arrowRight" />'],
                     items: 7
                 });

                $(".repeater").append(data);

            },
            error: function (data) {
                alert("Serious Issue has happened while getting NextDateCollection");
            }
        });
    });

并且在我的控制器中 GetNextDateCollection 调用的操作 return 是 _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 项，但第二次它没有，只是将数据附加到我的轮播下，我做错了什么？如何将 return 数据添加到我的轮播？

Answer 1

您遇到的问题是因为第一次加载页面时 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] + '/>');
    }
}

Link to the owl carousel source code showing the Add method

Answer 2

对于所有使用此插件（Owl Carousel）但没有文档的可怜人。要将项目添加到轮播中，您必须使用此触发器 add.owl.carousel.

感谢 Gavin Harrison，我找到了解决方案，我将与大家分享。

基本上在我的 AJAX 的 success 上：

   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');
             }
         }
    }

在 Asp.net/MVC 中动态地将项目列表添加到 Owl 轮播 2

Adding list of items to Owl Carousel 2 dynamically in Asp.net/MVC

c#

asp.net-mvc

jquery

owl-carousel-2