Pagination in ASP.net core application

By: Linda Ng in Asp.net Tutorials on 2023年06月01日 [フレーム]

To display a read-only grid of records with pagination in an ASP.NET Core view, you can follow these steps:

Create a model class to represent your records. For example, let's assume you have a Record class with properties like Id, Name, Description, and Date.

In your controller, retrieve the records from your data source and pass them to the view using a view model. The view model should include the records and pagination information. For example:

public ActionResult Index(int page = 1, int pageSize = 10)
{
 // Retrieve the records from your data source
 var records = GetRecordsFromDataSource();
 // Apply pagination
 var paginatedRecords = records.Skip((page - 1) * pageSize).Take(pageSize).ToList();
 // Calculate total pages
 var totalPages = (int)Math.Ceiling((double)records.Count / pageSize);
 // Create the view model
 var viewModel = new RecordViewModel
 {
 Records = paginatedRecords,
 PageNumber = page,
 PageSize = pageSize,
 TotalPages = totalPages
 };
 return View(viewModel);
}

Create a view model class to represent the data passed to the view. For example:

public class RecordViewModel
{
 public List<Record> Records { get; set; }
 public int PageNumber { get; set; }
 public int PageSize { get; set; }
 public int TotalPages { get; set; }
}

In your view (e.g., Index.cshtml), iterate over the records and display them in a grid format. You can use a table or any other HTML markup that suits your needs. Additionally, you can add navigation links for pagination. Here's an example:

@model RecordViewModel

<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Date</th>
</tr>
</thead>
<tbody>
@foreach (var record in Model.Records)
{
<tr>
<td>@record.Id</td>
<td>@record.Name</td>
<td>@record.Description</td>
<td>@record.Date</td>
</tr>
}
</tbody>
</table>

<div>
@if (Model.TotalPages > 1)
{
for (int i = 1; i <= Model.TotalPages; i++)
{
<a href="@Url.Action("Index", new { page = i, pageSize = Model.PageSize })">@i</a>
}
}
</div>

This example demonstrates a basic implementation of a read-only grid with pagination. You may need to customize it based on your specific requirements and styling preferences.

Previous
<< Severity Code Description Project File Line Suppression State Error CS0308 The non-generic type 'List' cannot be used with type arguments.

Next
Severity Code Description Project File Line Suppression State Error CS1061 'string[]' does not contain a definition for 'Any' and no accessible extension method 'Any' accepting a first argument of type 'string[]' could be found (are you missing a using directive or an assembly reference?)>>

(追記) (追記ここまで)