Обновите пользовательский интерфейс с html, который добавляется в div во время итерации foreach.

Question

Мы пытаемся добавить некоторые элементы в div с помощью вызова Ajax. DIV - это в основном шаблон, который используется для добавления нескольких элементов типа шаблона в родительский DIV.

Поскольку данные, возвращаемые с сервера, могут быть огромными, мы хотим, чтобы при вызове Ajax шаблоны добавлялись в div, они должны немедленно появляться на странице, чтобы прогресс был виден для пользователь. прямо сейчас обновленный html отображается только после выполнения метода OnSuccess. Так как я добавляю карточку компании в список карточек, в котором он равен l oop, я ожидаю, что интерфейс будет обновляться во время каждой итерации. Я ошибаюсь? если это так, как это исправить?

Вот html шаблона.

    <div class='row card-list'>
        @*All Companies will be added here dynamically using AJAX call.*@
    </div>

    <template id="company-card">
        <div class="col-sm-4 col-xs-12 mb-30">
            <div class="w3-card-4 w3-hover-shadow ">
                <img src="" class="companylogo" alt="Alps" style="height:133px; width:350px; padding: 10px;border-bottom:1px solid #efebeb;" />
                <div class="w3-container w3-center">
                    <h5 class="CompanyName" style="font-weight:bold;font-size:12px;">
                        <span class="badge EstablishDate" style="font-size: 10px;float: right;"></span>
                    </h5>
                    <div class="custom-labels" style="position:relative;">
                        <h6 style="color: #777;">Country:  <span class="Country" style="color:#C1A16B;font-weight:bold;"></span></h6>
                        <h6 style="color: #777;position: absolute;right: 0;top: -7px;">Score&nbsp;<span class="label label-default CompanyScore"></span></h6>
                    </div>
                    <h5 class="CompanyDescription"></h5>
                </div>                    
            </div>
        </div>
    </template>

, а здесь Ajax метод, который отображает список карт из данных, которые возвращается с сервера.

$('#btnLoadMore').click(function (e) {
        e.preventDefault();
        $('.card-list').html("");
        var isLocal = @((HttpContext.Current.Request.IsLocal).ToString().ToLower());
         var basePath = "";
         if (isLocal == false)
            basePath = "/roadshow";
        $('.showLoader').css('display', 'block !important');
        $.ajax({
            type: "Get",
            url: basePath + "/Companies/GetCompanies/",
            data: { countryFilter: $('#CountryFilter').val(), companyFilter: $('#CompanyFilter').val() },
            datatype: "json",
            traditional: true,
            success: function (response) {

                response.companies.FilterResult.forEach(function (ele) {
                    let card = $($('#company-card').html());
                    card.find('.companylogo').attr('src', ele.CompanyLogo);
                    card.find('.CompanyName').text(ele.CompanyName);
                    card.find('.EstablishDate').text(ele.EstablishDate);
                    card.find('.Country').text(ele.Country);
                    card.find('.CompanyScore').text(ele.CompanyScore);
                    card.find('.CompanyDescription').text(ele.CompanyDescription);
                    $('.card-list').append(card);
                });
            },
        });
        $('.showLoader').css('display', 'none');
    });

Answer 1

Вы можете использовать SetInterval, если хотите добавить значения, когда у вас есть результаты после ответа, я не знаю, какова ваша структура ответа, но вы получите представление.

$.ajax({
    type: "Get",
    url: basePath + "/Companies/GetCompanies/",
    data: { countryFilter: $('#CountryFilter').val(), companyFilter: $('#CompanyFilter').val() },
    datatype: "json",
    traditional: true,
    success: function (response) {
        iteration = 0;
        data = response
        myinterval = setInterval(funciton(){
            iteration++
            ele = data[iteration]
            let card = $($('#company-card').html());
            card.find('.companylogo').attr('src', ele.CompanyLogo);
            card.find('.CompanyName').text(ele.CompanyName);
            card.find('.EstablishDate').text(ele.EstablishDate);
            card.find('.Country').text(ele.Country);
            card.find('.CompanyScore').text(ele.CompanyScore);
            card.find('.CompanyDescription').text(ele.CompanyDescription);
            $('.card-list').append(card);

            if(iteration == data.length){
                clearInterval(myinterval)
            }
        }, 1000)


        response.companies.FilterResult.forEach(function (ele) {

        });
    },
});