How to show just three records on every page with ASP.NET MVC?

See more:

ASP.NET

MVC

I'm writing a web application I need a pagination in my page but I have a problem, for example, I have 12 records.all of records shows on every page, but I wanna show just three records on every page.how can I do it?

of course, I use these codes.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace EnglishTest.Models
{
    public class Pager
    {
        public Pager(int totalItems, int? page, int pageSize = 10)
        {
            var totalPages=(int)Math.Ceiling((decimal)totalItems/ (decimal)pageSize);
            var currentPage=page !=null ? (int)page : 1;
            var startPage=currentPage-5;
            var endPage=currentPage+4;
            if (startPage <= 0)
            {
                endPage -= (startPage - 1);
                startPage = 1;
            }
            if (endPage > totalPages)
            {
                endPage = totalPages;
                if (endPage > 10)
                {
                    startPage = endPage - 9;
                }
            }

            TotalItems = totalItems;
            CurrentPage = currentPage;
            PageSize = pageSize;
            TotalPages = totalPages;
            StartPage = startPage;
            EndPage = endPage;

        }

        public int TotalItems { get; private set; }
        public int CurrentPage { get; private set; }
        public int PageSize { get; private set; }
        public int TotalPages { get; private set; }
        public int StartPage { get; private set; }
        public int EndPage { get; private set; }
    }
}

=========================================

using EnglishTest.Models;
using System.Web.Mvc;
using System.Linq;
using EnglishTest.ViewModel;
using System.Collections.Generic;

namespace EnglishTest.Controllers
{
    public class HomeController : Controller
    {
        private VocabContext _context;
        public HomeController()
        {
            _context = new VocabContext();
        }
        // GET:
        public ActionResult Dashboard(int? page)
        {
            var dummyItems=_context.Vocabularies.ToList();
            var pager=new Pager(dummyItems.Count(),page);
            var viewModel=new IndexViewModel
            {
                Vocabularies=dummyItems,
                Items=dummyItems.Skip((pager.CurrentPage-1) * pager.PageSize).Take(pager.PageSize),
                Pager=pager
            };
            return View(viewModel);
        }
    }
}

========================================

@model  EnglishTest.ViewModel.IndexViewModel
@{
    ViewBag.Title = "Dashboard";
}
@if (TempData["MessageSuccess"] != null)
{
    <div class="alert alert-success" role="alert">
        Well done! @TempData["MessageSuccess"]
    </div>
}
<div class="row">
    <div class="col-sm-12">
        <div class="element-wrapper">
            <div class="element-box-tp">
                <div class="controls-above-table">
                    <div class="row">
                        <div class="col-sm-6">
                            <a class="btn btn-sm btn-success " href="@Url.Action("New","Vocabulary")">New Word</a>
                        </div>
                        <div class="col-sm-6">
                            <form class="form-inline justify-content-sm-end">
                                <input class="form-control form-control-sm rounded bright" placeholder="Search" type="text">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-lg table-v2 table-striped">
                        <thead>
                            <tr>
                                <th class="text-center"><input class="form-control" type="checkbox"></th>
                                <th>Word</th>
                                <th>Definition</th>
                                <th>Synonym</th>
                                <th>Persian</th>
                                <th>Example</th>
                                <th>Tools</th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach (var vocab in Model.Vocabularies)
                            {
                                <tr>
                                    <td class="text-center"><input class="form-control" type="checkbox"></td>
                                    <td>@vocab.Word</td>
                                    <td>@vocab.Defination</td>
                                    <td class="text-right">@vocab.Synonym</td>
                                    <td>@vocab.PersianTranslate</td>
                                    <td class="text-center">
                                        @vocab.Examples
                                    </td>
                                    <td class="row-actions"><a href="#">class="os-icon os-icon-pencil-2" href="#"></a><a class="danger" href="#">^__i class="os-icon os-icon-database-remove"></a></td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
                <div class="controls-below-table">
                    <div class="table-records-info">Showing records 1 - 5</div>
                    <div class="table-records-pages">

                        <ul>

                            @for (var page = Model.Pager.StartPage; page <= Model.Pager.EndPage; page++)
                            {
                                <li>
                                    <a href="~/Home/dashboard?page=@page">@page</a>
                                </li>
                            }
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

What I have tried:

how can I show just three records on every page?