How would you implement Pagination using ViewModels

Question

Couldn't really find much about this when I tried searching online, but pagination doesn't seem to be working using ViewModels. From what I can understand Pagination can only be applied to models not viewmodels, so does that mean we have to use the Paging namespace on the ViewModels properties instead? If so what would that look like?

Action Method:

 [HttpGet]
    public ActionResult TranscriptAdmin(int id, string sortOrder, string currentFilter, string searchString, int? page)
    {
        ViewBag.CurrentSort = sortOrder;
        ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";

        if (searchString != null)
        {
            page = 1;
        }
        else
        {
            searchString = currentFilter;
        }

        ViewBag.CurrentFilter = searchString;

        StudentMajorRepo sRepo;
        MajorRequirmentsRepo mRepo;
        GradesRepo gRepo;
        RegistrationRepo rRepo;
        TranscriptViewModel viewModel = new TranscriptViewModel();
        viewModel.StudentId = id;
        IList<Grade> AllClasses = new List<Grade>();
        IList<Registration> AllRegistrations = new List<Registration>();
        IList<Registration> PendingGrades = new List<Registration>();

        using (context)
        {
            sRepo = new StudentMajorRepo(context);
            mRepo = new MajorRequirmentsRepo(context);
            gRepo = new GradesRepo(context);
            rRepo = new RegistrationRepo(context);

            viewModel.AllGradesClasses = gRepo.GetAllGradesByUserId(id);
            viewModel.StudentMajor = sRepo.GetByStudentId(id);

        }

        if (!String.IsNullOrEmpty(searchString))
        {
            viewModel.AllGradesClasses = viewModel.AllGradesClasses.Where(s => s.Registration.CourseSection.Course.CourseTitle.Contains(searchString)).ToList();
        }
        switch (sortOrder)
        {
            case "name_desc":
                viewModel.AllGradesClasses = viewModel.AllGradesClasses.OrderByDescending(c => c.Registration.CourseSection.Course.CourseTitle).ToList();
                break;
            
            default:  // Name ascending 
                break;
        }


        int pageSize = 3;
        int pageNumber = (page ?? 1);
        viewModel.AllGradesClasses.ToPagedList(pageNumber, pageSize);
        return View(viewModel);
    }

ViewModel:

 public class TranscriptViewModel
{
    public TranscriptViewModel()
    {
        AllGradesClasses = new List<Grade>();

    }
    public int TotalCredits { get; set; }
    public float TermGpa { get; set; }
    public float CumulativeGpa { get; set; }
    public int PeriodId { get; set; }
    public int StudentId { get; set; }
    public User Student { get; set; }
    public IList<SemesterPeriod> SemesterPeriods { get; set; }
    public StudentMajor StudentMajor { get; set; }
    public IList<MajorRequirements> MajorRequirements { get; set; }
    public IList<Grade> AllGradesClasses { get; set; }

    public SelectList PeriodList
    {
        get
        {
            return new SelectList(SemesterPeriods, "Id", "Period.Value");
        }
    }

    public void PopulateSelectList(IList<SemesterPeriod> populatedPeriods)
    {
        SemesterPeriods = populatedPeriods;

    }
}

Razor page:

    @model BryantUniversity.ViewModels.TranscriptViewModel
    @using PagedList
    @using PagedList.Mvc
    
    @{
        ViewBag.Title = "Transcript";
    }
    
    <div class="container">
        <div class="row">
            <div class="col-sm">
    
            </div>
            <div class="col-md-6">
                @using (Html.BeginForm())
                {
                    <p>
                        Find by name: @Html.TextBox("SearchString")
                        <input type="submit" value="Search" />
                    </p>
                }
            </div>
            <div class="col-sm">
    
            </div>
        </div>
    
        <div class="row">
            <div class="col-sm">
                <h1>Major: @Model.StudentMajor.Major.Title</h1>
    
            </div>
            <div class="col-md-6">
                <table class="table table-striped table-dark">
                    <thead class="thead-dark">
                        <tr>
                            <th>Course Id</th>
                            <th>@Html.ActionLink("Course", "TranscriptAdmin", "Student", new { studentId = Model.StudentId, sortOrder = ViewBag.NameSortParm }, null)</th>
                            <th>Credits</th>
                            <th>Grade</th>
                            <th>Semester</th>
                        </tr>
                    </thead>
                    <tbody id="myTable">
                        @foreach (var gradeRegistration in Model.AllGradesClasses)
                        {
                            <tr>
                                <td>@gradeRegistration.Registration.CourseSection.Course.CourseTitleId</td>
                                <td>@gradeRegistration.Registration.CourseSection.Course.CourseTitle</td>
                                <td>@gradeRegistration.Registration.CourseSection.Course.Credits</td>
                                @if (gradeRegistration.LetterGrade == null)
                                {
                                    <td>
                                        Pending
                                    </td>
                                }
                                else
                                {
                                    <td>
                                        @gradeRegistration.LetterGrade.GradeVal.Value
                                    </td>
                                }
                                <td>@gradeRegistration.Registration.CourseSection.SemesterPeriod.Period.Value</td>
                            </tr>
                        }
                    </tbody>
        

</table>