Implement pagination in MVC?

Question

Im working on a list project, and can't seem to implement pagination in my project. I've tried different solutions I've found on google, but couldn't get it to work. I do not have much experience with C# or MVC projects at all, this is my first project.

Could anyone help me?

This is my Model:

using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MvcMovie.Models
{
public class funnwpweb01
{
    public int ID { get; set; }

    [Display(Name = "Domenenavn")]
    [StringLength(250)]
    [Required]
    public string Domain { get; set; }

    [Display(Name = "IP-Adresse")]
    [StringLength(250)]
    [Required]
    public string IP { get; set; }

    [Display(Name = "Server")]
    [StringLength(250)]
    [Required]
    public string Server { get; set; }

    [Display(Name = "Opprettet")]
    [DataType(DataType.Date)]
    public DateTime Start_Date { get; set; }

    [Display(Name = "Pris")]
    [DataType(DataType.Currency)]
    [Required]
    public string Price { get; set; }

    [Display(Name = "Plattform")]
    [StringLength(250)]
    [Required]
    public string Platform { get; set; }

    [Display(Name = "Firma")]
    [StringLength(250)]
    [Required]
    public string Firm { get; set; }
 }
}

This is my Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;
using MvcMovie.Models;

namespace MvcMovie.Controllers
{
public class Funnwpweb01Controller : Controller
{
    private readonly FunnWebsitesContext _context;

    public Funnwpweb01Controller(FunnWebsitesContext context)
    {
        _context = context;
    }

    // GET: funnwpweb01
    // Requires using Microsoft.AspNetCore.Mvc.Rendering;
    public async Task<IActionResult> Index(string server, string search, string platform)
    {
        // Use LINQ to get list of genres.
        IQueryable<string> genreQuery = from m in _context.Listings
                                        orderby m.Server
                                        select m.Server;

        var funnwpweb01 = from m in _context.Listings
                     select m;

        if (!String.IsNullOrEmpty(search))
        {
            funnwpweb01 = funnwpweb01.Where(s => s.Domain.Contains(search));
        }

        if (!String.IsNullOrEmpty(server))
        {
            funnwpweb01 = funnwpweb01.Where(x => x.Server == server);
        }


        var movieGenreVM = new DomainServerViewModel();
        movieGenreVM.servers = new SelectList(await genreQuery.Distinct().ToListAsync());
        movieGenreVM.funnwpweb01 = await funnwpweb01.ToListAsync();

        return View(movieGenreVM);
    }

    // GET: funnwpweb01/Details/5
    public async Task<IActionResult> Details(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }

        var funnwpweb01 = await _context.Listings
            .FirstOrDefaultAsync(m => m.ID == id);
        if (funnwpweb01 == null)
        {
            return NotFound();
        }

        return View(funnwpweb01);
    }

    // GET: funnwpweb01/Create
    public IActionResult Create()
    {
        return View();
    }

    // POST: funnwpweb01/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create([Bind("ID,Domain,IP,Server,Start_Date,Price,Platform,Firm")] funnwpweb01 funnwpweb01)
    {
        if (ModelState.IsValid)
        {
            _context.Add(funnwpweb01);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(funnwpweb01);
    }

    // GET: funnwpweb01/Edit/5
    public async Task<IActionResult> Edit(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }

        var funnwpweb01 = await _context.Listings.FindAsync(id);
        if (funnwpweb01 == null)
        {
            return NotFound();
        }
        return View(funnwpweb01);
    }

    // POST: funnwpweb01/Edit/5
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Edit(int id, [Bind("ID,Domain,IP,Server,Start_Date,Price,Platform,Firm")] funnwpweb01 funnwpweb01)
    {
        if (id != funnwpweb01.ID)
        {
            return NotFound();
        }

        if (ModelState.IsValid)
        {
            try
            {
                _context.Update(funnwpweb01);
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!Funnwpweb01Exists(funnwpweb01.ID))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }
            return RedirectToAction(nameof(Index));
        }
        return View(funnwpweb01);
    }

    // GET: funnwpweb01/Delete/5
    public async Task<IActionResult> Delete(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }

        var funnwpweb01 = await _context.Listings
            .FirstOrDefaultAsync(m => m.ID == id);
        if (funnwpweb01 == null)
        {
            return NotFound();
        }

        return View(funnwpweb01);
    }

    // POST: funnwpweb01/Delete/5
    [HttpPost, ActionName("Delete")]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> DeleteConfirmed(int id)
    {
        var funnwpweb01 = await _context.Listings.FindAsync(id);
        _context.Listings.Remove(funnwpweb01);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }

    private bool Funnwpweb01Exists(int id)
    {
        return _context.Listings.Any(e => e.ID == id);
    }
}
}

And this is my view:

@model MvcMovie.Models.DomainServerViewModel

@{
    ViewData["Title"] = "Funn Webhotell";
}

<h2>Funn Webhotell</h2>

<p>
    <a asp-action="Create">Opprett ny</a>
</p>
<form asp-controller="funnwpweb01" asp-action="Index">
    <p>
        IP/Server: <select asp-for="Server" asp-items="Model.servers">
            <option value="">All</option>
        </select>
        Domenenavn: <input type="text" name="search">
        <input type="submit" value="Filter" />
    </p>
</form>

<table class="table">
    <thead>
        <tr>
            <th width="15%">
                @Html.DisplayNameFor(model => model.funnwpweb01[0].Firm)
            </th>
            <th width="15%">
                @Html.DisplayNameFor(model => model.funnwpweb01[0].Domain)
            </th>
            <th width="15%">
                @Html.DisplayNameFor(model => model.funnwpweb01[0].IP)
            </th>
            <th width="15%">
                @Html.DisplayNameFor(model => model.funnwpweb01[0].Server)
            </th>
            <th width="10%">
                @Html.DisplayNameFor(model => model.funnwpweb01[0].Start_Date)
            </th>
            <th width="10%">
                @Html.DisplayNameFor(model => model.funnwpweb01[0].Price)
            </th>
            <th width="10%">
                @Html.DisplayNameFor(model => model.funnwpweb01[0].Platform)
            </th>
            <th width="10%">
                Detaljer
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.funnwpweb01)
        {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Firm)
            </td>
            <td>
                <a href="http://@Html.DisplayFor(modelItem => item.Domain)">@Html.DisplayFor(modelItem => item.Domain)</a>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.IP)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Server)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Start_Date)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Platform)
            </td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.ID">Endre</a> |
                <a asp-action="Details" asp-route-id="@item.ID">Detaljer</a> |
                <a asp-action="Delete" asp-route-id="@item.ID">Slett</a>
            </td>
        </tr>
        }
    </tbody>
</table>

Any help would be highly appreciated!

Answer 1

See this Gist - https://gist.github.com/McKabue/8ecc676b871b33114dc6d2c3e055b900 Usage: Call this extention list.Paging(numberOfResults: 20, page: 2, pageNumbersCount: 5) on any IEnumerable and you get a PagedObject with the following properties:

HasNext         (bool)
HasPrevious     (bool)
Next            (int)
PagedResults    (IEnumerable<T>)
PageNumbers     (List<PagedObjectPages>)
Pages           (int)
Previous        (int)
Total           (int)
Last            (int)
First           (int)
HasFirst        (bool)
HasLast         (bool)

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

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

public static class Pager
{

    /// <summary>
    /// Pages the specified items.
    /// </summary>
    /// <typeparam name="T"></typeparam>
    /// <param name="items">The items.</param>
    /// <param name="numberOfResults">The number of results.</param>
    /// <param name="page">The page.</param>
    /// <returns></returns>
    public static PagedObject<T> Paging<T>(this IEnumerable<T> items, int numberOfResults, int page = 1, int pageNumbersCount = 10)
    {
        page = Math.Max(1, page);
        int itemCount = items.Count();
        float pages = numberOfResults >= itemCount || numberOfResults == 0 ? 1 : ((float)itemCount / (float)numberOfResults);
        int _pages = Convert.ToInt32(Math.Ceiling(pages));

        var _return = numberOfResults >= itemCount ? items : page > _pages ? items.Reverse().Take(numberOfResults).Reverse() : items.Skip(((page - 1) * numberOfResults)).Take(numberOfResults);

        return CreatePagedObjects(page, pageNumbersCount, itemCount, _pages, _return);

    }

    private static PagedObject<T> CreatePagedObjects<T>(int page, int pageNumbersCount, int itemCount, int pages, IEnumerable<T> result)
    {
        int _page = page;
        int _pageNumbersCount = pageNumbersCount;
        int _itemCount = itemCount;
        int _pages = pages;
        var _result = result.ToList();
        var _pageNumbers = GetPages(_pages, _page, _pageNumbersCount);
        int _lastPageNumber = _pageNumbers?.LastOrDefault()?.Page ?? _pages;
        int _firstPageNumber = _pageNumbers?.FirstOrDefault()?.Page ?? 1;

        return new PagedObject<T>
        {
            PagedResults = _result,
            Pages = _pages,
            PageNumbers = _pageNumbers,
            Next = _page < _pages ? (1 + _page) : _pages,
            HasNext = _page < _pages,
            Previous = (_pages > 1 && _page > 1) ? (-1 + _page) : 1,
            HasPrevious = (_pages > 1 && _page > 1),
            Last = _pages,
            HasLast = _lastPageNumber < _pages,
            First = 1,
            HasFirst = _firstPageNumber > 1,
            Total = _itemCount
        };
    }

    private static List<PagedObjectPages> GetPages(int pages, int current, int pageNumbersCount)
    {
        var _pages = new List<PagedObjectPages>();
        if (pages > 1)
        {
            int firstHalfPageNumbersCount = pageNumbersCount / 2;
            int secondHalfPageNumbersCount = pageNumbersCount - firstHalfPageNumbersCount - 1;

            int _start = Math.Max(1, (current - firstHalfPageNumbersCount));
            int _last = Math.Min(pages, (current + secondHalfPageNumbersCount));

            _start = Math.Max(1, (_start - (secondHalfPageNumbersCount - (_last - current))));

            for (int i = _start; i <= pages && _pages.Count < pageNumbersCount; i++)
                _pages.Add(new PagedObjectPages { Page = i, IsCurrent = current == i ? true : false });
        }

        return _pages;
    }

    public class PagedObjectPages
    {
        public bool IsCurrent { get; set; }
        public int Page { get; set; }
    }

    public class PagedObject<T>
    {
        public bool HasNext { get; set; }
        public bool HasPrevious { get; set; }
        public int Next { get; set; }
        public IEnumerable<T> PagedResults { get; set; }
        public List<PagedObjectPages> PageNumbers { get; set; }
        public int Pages { get; set; }
        public int Previous { get; set; }
        public int Total { get; set; }
        public int Last { get; set; }
        public int First { get; set; }
        public bool HasFirst { get; set; }
        public bool HasLast { get; set; }
    }
}

Answer 2

Pagination will be much easier if you use any third party Grids like Jquery datatables, Dev express Grid, Kendo Grid.