Отображение карт в режиме HTML с использованием Ajax вызова в JQuery

Question

У меня есть представление в моем приложении MVC, в котором перечислены все компании, зарегистрированные на нашем портале. Пользователь может использовать опцию фильтра, чтобы увидеть конкретные c компании на странице. Поскольку зарегистрированные компании растут в размерах, отображение всех компаний на странице занимает много времени. Итак, я хотел реализовать пейджинг, который будет загружать 10 записей на go с использованием вызова Ajax В настоящее время мое представление настроено, как показано ниже

<div class="row">
   @foreach (var m in Model.FilterResult)
   {
      <div class="col-sm-4 col-xs-12 mb-30">
         <div class="w3-card-4 w3-hover-shadow ">
             <img src="@m.CompanyLogo" class="" alt="Alps" style="height:133px; width:350px;">
                 <div class="w3-container w3-center">
                     <h5 style="font-weight:bold;font-size:12px;">
                         @m.CompanyName <span class="badge">@m.EstablishDate</span>
                     </h5>
                     <div class="custom-labels" style="position:relative;">
                            <h6 style="color: #777;">Country:  <span style="color:#C1A16B;font-weight:bold;"> @m.Country</span></h6>
                            <h6 style="color: #777;position: absolute;right: 0;top: -7px;">Score&nbsp;<span class="label label-default">@m.CompanyScore</span></h6>
                        </div>
                       <h5>@m.CompanyDescription</h5>
                    </div>
                    <div style="">
                        @if (Session["UserType"] == null || ((Session["UserType"]) as string) == "USER" || ((Session["UserType"]) as string) == "PARTNER")
                        {
                            <a href="@Url.Action("Details", "Companies", new { companyName = m.CompanyName })" target="_blank" class="theme_btn-12">View Details</a>
                        }
                    </div>
                </div>
            </div>
        }
    </div>

Как я могу заполнить эти записи, используя ответ, полученный от вызова Ajax? Сервер вернет данные в вызов Ajax в формате Json, как показано ниже.

foreach (var company in companyData)
{
     var newCompany = new
     {
           CompanyName = company.NameOfOrganization,
           EstablishDate = company.DateofEstablishment.HasValue ? company.DateofEstablishment.Value.ToShortDateString() : "",
           Country = company.CountryOfRoadshow,
           CompanyDescription = company.CompanyDescription,
           CompanyScore = company.AvgScore.HasValue ? company.AvgScore.Value : 0,
           CountryFlag = "/assets/img/flags_medium/" + company.CountryOfRoadshow.Trim() + ".png",
      };
      if (company.logo != null)
      {
           var base64 = Convert.ToBase64String(company.Logo);
           var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
           newCompany.CompanyLogo = imgSrc;
      }
 }
 return Json(new { companies }, JsonRequestBehavior.AllowGet);

, поэтому вопрос заключается в том, как отобразить приведенный выше html в вызове Ajax метода *1008*

Answer 1

Создать шаблон для карточек нужно, как показано ниже.

HTML

<div class='row card-list'>
</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;">
                 <div class="w3-container w3-center">
                     <h5 style="font-weight:bold;font-size:12px;">
                         <span class="badge"></span>
                     </h5>
                     <div class="custom-labels" style="position:relative;">
                            <h6 style="color: #777;">Country:  <span 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"></span></h6>
                        </div>
                       <h5></h5>
                    </div>
                    <div style="">
                            <a href="" target="_blank" class="theme_btn-12">View 
                             Details</a>
                    </div>
                </div>
            </div>
<template>

JS

$.ajax({
                url: <your url to get data>,
                success: function (data) {
                     data.forEach(function (ele) {
                     let card=$($('#company-card').html());
                     card.find('.companylogo').attr('src',ele.imagesrc);
                         //...fill all data in template like above.
                         //
                      let card=$($('#company-card').html()); // append the each card to main div. 
                    }
                   $('.card-list')
                },
                error: function (Result) {
                }
            });