Display cards in HTML view using Ajax call in JQuery

Question

I have a view in my MVC application which lists down all the companies registered in our portal. The user can use the filter option to see specific companies on the page. Since the registered companies are growing in size, so displaying all companies on the page takes lot of time. So, I wanted to implement paging, which will load 10 records per go using Ajax call. Currently my view is setup like below

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

How can I populate these records using the response that i get from the Ajax call? Server will return the data to the Ajax call in Json format like below.

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

so, question is how do i render the above html in Ajax method's onSuccess call?

Answer 1

Create a template for cards need to show like below.

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