单击按钮时将更多结果附加到表中

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