Load more content in ASP.Net Core and Ajax - any idea

Question

I want to load some element from database and next after click button load more elements. In Controller my code looks like:

 public ActionResult GetData(int currentIndex, int elementsNumber)
        {
          var query = (from restauracja in _context.Restauracja
             select restauracja).Skip(currentIndex * elementsNumber)
             .Take(elementsNumber).ToList();
             var list = JsonConvert.SerializeObject(query,
             Formatting.None,
               new JsonSerializerSettings()
               {
                  ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
               });

         return Content(list, "application/json");
        }

In View i have this:

 $("#next").click(function () {
            GetData();
        });

        function GetData() {
            var currentIndex2 = 1;
            var elementsNumber2 = 3;

            $.ajax({
                type: "POST",
                url: 'Restauracja/GetData',
                data: { currentIndex: currentIndex2, elementsNumber: elementsNumber2 },

                dataType: "json",
                success: 
                error: function () { alert('Niesukces'); },
            });
        }

Now, in success: i must generate html like this

 <div class="box_list isotope-item popular">
        <div class="row no-gutters">
            <div class="col-lg-5">
                <figure>
                    <small>@item.Kategoria</small>
                    <a href="@Url.Action("Szczegoly","restauracja", new { id = item.IdRestauracji }, 
                    null)  ">@if (item.ObrazekWyrozniajacy != null)
                    {<img src="data:image/jpeg;base64,@Convert.ToBase64String(item.ObrazekWyrozniajacy)" 
                    class="img-fluid" alt="" width="800" height="533">}<div class="read_more"> 
                    <span>Sprawdź lokal</span></div></a>
                </figure>
            </div>
            <div class="col-lg-7">
                <div class="wrapper">
                    <a href="#0" class="wish_bt"></a>
                    <h3><a href="">@Html.ActionLink(item.NazwaObiektu, "Szczegoly", "Restauracja", new { id = item.IdRestauracji }, null) @item.Ulica  @item.NumerLokalu, @item.Miejscowosc</a></h3>
                    <p>@item.Zajawka</p>
                    <span class="price">From <strong>$54</strong> /per person</span>
                </div>
                <ul>
                    <li><i class="ti-eye"></i> 164 views</li>
                    <li><div class="score"><span>Superb<em>350 Reviews</em></span><strong>8.9</strong></div></li>
                </ul>
            </div>
        </div>
    </div>

This code is not that bad yet, because I can convert it to html, eg:

success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var encodedString = btoa(data[i].ObrazekWyrozniajacy);

                        var html = [
                            '<div class="box_list isotope-item popular">',
                            '<div class="row no-gutters">',
                            '<figure>',
                            '<small>' + data[i].Kategoria + '</small>',
                            '<a href="@Url.Action("Szczegoly","restauracja", new { id = "-1" }, null)  ">',


                            '@if ("-2" != null){<img src="data:image/jpeg;base64,-3" class="img-fluid" alt="" width="800" height="533" >}',

                            '<div class="read_more"><span>Sprawdź lokal</span></div></a >',

                            '</figure >',
                            '</div>',
                            '<div class="col-lg-7">',
                            '<div class="wrapper">',
                            '<a href="#0" class="wish_bt"></a>',
                            '<h3><a href="">' + data[i].Ulica + data[i].NumerLokalu + data[i].Miejscowosc + '</a></h3>',
                            '<p>' + data[i].Zajawka + '</p>',

                            '<span class="price">From <strong>$54</strong> /per person</span>',
                            '</div>',
                            '<ul>',
                            '<li><i class="ti-eye"></i> 164 views</li>',

                            '<li><div class="score"><span>Superb<em>350 Reviews</em></span><strong>8.9</strong></div></li>',
                            '</ul>',
                            '</div>',
                            '</div>',
                            '</div>',
                        ].join("\n");


                        $(".isotope-wrapper").append(html);

However, in the database I store images in the form of byte []. Can I convert them somehow differently? Or do it differently?

Answer 1

Instead of returning a hard coded html, you can return a partial view as below:

• Create the partial view for ajax response:

<!-- RestauracjaPartial.cshtml -->
<!-- Model is the same as the main page -->
@model IndexModel

@foreach(var item in Model)
{
    <div class="box_list isotope-item popular">
        <div class="row no-gutters">
            <div class="col-lg-5">
                <figure>
                    <small>@item.Kategoria</small>
                    <a href="@Url.Action("Szczegoly","restauracja", new { id = item.IdRestauracji }, 
                    null)  ">@if (item.ObrazekWyrozniajacy != null)
                    {<img src="data:image/jpeg;base64,@Convert.ToBase64String(item.ObrazekWyrozniajacy)" 
                    class="img-fluid" alt="" width="800" height="533">}<div class="read_more"> 
                    <span>Sprawdź lokal</span></div></a>
                </figure>
            </div>
            <div class="col-lg-7">
                <div class="wrapper">
                    <a href="#0" class="wish_bt"></a>
                    <h3><a href="">@Html.ActionLink(item.NazwaObiektu, "Szczegoly", "Restauracja", new { id = item.IdRestauracji }, null) @item.Ulica  @item.NumerLokalu, @item.Miejscowosc</a></h3>
                    <p>@item.Zajawka</p>
                    <span class="price">From <strong>$54</strong> /per person</span>
                </div>
                <ul>
                    <li><i class="ti-eye"></i> 164 views</li>
                    <li><div class="score"><span>Superb<em>350 Reviews</em></span><strong>8.9</strong></div></li>
                </ul>
            </div>
        </div>
    </div>
}

And modify the backend method as below:

public ICollection<Restauracja> Items { get; set; }

public IActionResult GetData(int currentIndex, int elementsNumber)
{
    Items = from restauracja in _context.Restauracja
             select restauracja).Skip(currentIndex * elementsNumber)
             .Take(elementsNumber).ToList();

    return new PartialViewResult()
    {
        ViewName = "RestauracjaPartial",
        ViewData = this.ViewData
    };
}