Question

I have an Owl Carousel in my view and items that are loading to the carousel are from a partial-view like below:

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

And they are populated in my controller:

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

And my _paginator partialview is:

@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" />
}

Now I call an ajax to take the next n list from controller, and on success it should append the data to my carousel but it doesn't and append the data under my carousel:

    //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");
            }
        });
    });

And in my Controller GetNextDateCollection action called which returns the _paginator partialview:

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

}

First time it loads correctly and shows 7 items from my list in the carousel but on second time it doesn't and just append the data under my carousel, What have I done wrong? How can I add the return data to my carousel?

Answer 1

您遇到的问题是因为页面第一次加载owl会初始化它的self，它会正确显示项目。然后当AJAX请求更新时，滑块owl carousel已准备就绪，并且对您手动插入的新项目一无所知。

要动态地将新项目添加到轮播，您需要通过执行以下操作告诉猫头鹰轮播插入每个新项目：

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

对于所有使用此插件（猫头鹰旋转木马）而没有文档的可怜灵魂。要将项目添加到轮播中，您必须使用此触发器Event | Result ````````````````````````````````````````````|```````````````````````````````````````` Payment stopped, Claim, Claim, Claim | 3 Claims, Payment stopped Claim | 1 Claim Claim, Claim, Claim | 3 Claims, Claim, Claim, Payment stopped, Case Closed | 2 Claims, Payment stopped, Case Closed Payment stopped, Case Closed | Payment stopped, Case Closed。

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

基本上是我的AJAX的add.owl.carousel：

success

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

2 个答案: