Добавить больше результатов в таблицу по нажатию кнопки

Question

Я сделал приложение, которое ищет в моей базе данных дату транзакции и показывает результаты. На данный момент он показывает 25 результатов, используя созданный мной класс объектов передачи данных. Я также добавил кнопку внизу таблицы, которая при нажатии будет показывать следующие 25 результатов. То, с чем я борюсь, это то, как я могу добавить эти результаты в конец таблицы вместо того, чтобы заменить первые 25 результатов.

Вот код для моей страницы бритвы:

@page "/search"
@using TranactionJournalV4.Models;
@using TranactionJournalV4.Data;
@using TranactionJournalV4.Controllers;

@inject SearchService searchService
@*@inject IJSRuntime JsRuntime
@implements IDisposable*@
<MatDatePicker @bind-Value="@searchTerm" EnableTime="true"></MatDatePicker>
<MatButton OnClick="@(_ =>
                      {
                          searchTerm = DateTime.Now;
                      })">
    Now
</MatButton>
<input type="button" value="Search" @onclick="@SearchTransactions" />

@if (transactions == null)
{
    <p><em>Loading...</em></p>
}
else
{

    <table class="table">
        <thead>
            <tr>

                <th>Transaction Date</th>
                <th>Merchant ID</th>
                <th>Terminal ID</th>
                <th>Trace Amount</th>
                <th>Currency</th>
                <th>Authorization Code</th>
                <th>Response Code</th>
                <th>Masked PAN</th>
            </tr>
        </thead>

        <tbody>

            @foreach (var transaction in transactions)
            {
                <tr>

                    <td>@transaction.TransactionDateTime</td>
                    <td>@transaction.MerchantID</td>
                    <td>@transaction.TerminalID</td>
                    <td>@transaction.SystemTrace</td>
                    <td>@transaction.Currency</td>
                    <td>@transaction.AuthorizationCode</td>
                    <td>@transaction.ResponseCode</td>
                    <td>@transaction.PANM</td>


                </tr>
            }

        </tbody>

    </table>

    <input type="button" value="More Results" @onclick="@MoreResults" />
}







@code {


    private DateTime searchTerm;

    private List<TransactionModel> transactions;
    private PaginationDTO pagination = new PaginationDTO();

    async Task SearchTransactions()
    {
        transactions = await searchService.SearchTransactionsAsync(searchTerm, pagination);
    }

    async Task MoreResults()
    {
        transactions = await searchService.SearchNextResults(searchTerm, pagination);
    }



}

Вот мой сервис, который ищет:

using TranactionJournalV4.Helpers;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using TranactionJournalV4.Models;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Authentication.JwtBearer;

namespace TranactionJournalV4.Data
{
    public class SearchService : ControllerBase
    {
        private readonly SqlDbContext context;



        public SearchService(SqlDbContext context)
        {
            this.context = context;
        }
        [HttpGet]
        [AllowAnonymous]
        public async Task<List<TransactionModel>> SearchTransactionsAsync(DateTime transactionDate, [FromQuery] PaginationDTO pagination)
        {

            var queryable = context.TransactionJournal.Where(s => s.TransactionDateTime <= transactionDate).AsQueryable();
            await HttpContextExtensions.GetPage<TransactionModel>(queryable, pagination.Page, pagination.QuantityPerPage);
            return await queryable.Paginate(pagination).ToListAsync();
        }
        public async Task<List<TransactionModel>> SearchNextResults(DateTime transactionDate, [FromQuery] PaginationDTO pagination)
        {

            var queryable = context.TransactionJournal.Where(s => s.TransactionDateTime <= transactionDate).AsQueryable();
            await HttpContextExtensions.GetPage<TransactionModel>(queryable, pagination.Page++, pagination.QuantityPerPage);
            return await queryable.Paginate(pagination).ToListAsync();
        }
    }

}

А вот мой объект передачи данных:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace TranactionJournalV4.Models
{
    public class PaginationDTO
    {
        public int Page { get; set; } = 1;
        public int QuantityPerPage { get; set; } = 25;
    }
}

Теперь я понимаю, что это, вероятно, связано с внешним интерфейсом, но я просто хотел показать все, что имею на всякий случай. Спасибо за вашу помощь!

Answer 1

    async Task MoreResults()
    {
        var nextTransactions = await searchService.SearchNextResults(searchTerm, pagination);
        transactions.AddRange(nextTransactions);

        StateHasChanged();
    }