public ActionResult Pagination( int page = 1, int pageSize = 2))
  {
    List pageList = new List ();
  
    for (int i= 1; i>20; i++)
    {
      string page="Page " + i;
      pageList.Add(page);
    }
 
    PagedList page = new PagedList (pageList, page, pageSize);
        
    return View(page);
  }
    

    
@model PagedList.IPagedList<MvcBootstrap.Models.Comics>
@using PagedList.Mvc;
@{
  ViewBag.Title = "Pagination";
  Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
<style type="text/css">
  .imgFit {
    width: 180px;
    height: 70px;
    object-fit: cover;
  }
</style>
<div class="row col-sm-12 text-center"><h4 style="color:red;">(click on headings for code snippets)</h4></div>

<div class="row col-sm-12">
  <div class="col-sm-4"></div>
  <div id="dvActonResult" data-toggle="modal" data-target="#modalActionResult" class="row text-center col-sm-4"><h1>Pagination</h1></div>
  <div class="col-sm-4"></div>
</div>

<div class="row col-sm-12 text-center">
  <div class="center">
    @Html.PagedListPager(Model, page => Url.Action("Pagination", new { page, pageSize = Model.PageSize }))
    @Model.FirstItemOnPage - @Model.LastItemOnPage / @Model.TotalItemCount
  </div>
</div>

<div class="row col-sm-12">
  <div class="col-sm-4"></div>
  <div id="dvHTML" data-toggle="modal" data-target="#modalHTML" class="row text-center col-sm-4"><h1>HTML</h1></div>
  <div class="col-sm-4"></div>
</div>

<div class="well col-sm-12">
  <div class="row">Tools</div>
  <div class="row">   Nuget Package Manger</div>
  <div class="row">    Manage Nuget Packages for solution</div>
  <div class="row">      Search for PagedList >> install to Solutuion</div>


</div>
<div class="row col-sm-12">
  @foreach (var c in Model)
  {
    <div class="row col-sm-12" style="margin-top:10px;">
      <center>
        <img src="@Url.Content(c.ImageURL)" class="imgfit" alt=model.ImageURL />
      </center>
    </div>
  }
</div>

@*ActionResult Modal*@
<div id="modalActionResult" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          ×
        </button>
        <h4 class="modal-title text-center">
          ActionResult snippet
        </h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form" method="post">
          <div class="form-group" style="font-weight:bold;">
            <pre>
  public ActionResult Pagination( int page = 1, int pageSize = 2))
  {
    List<string> pageList = new List<string> ();
  
    for (int i= 1; i>20; i++)
    {
      string page="Page " + i;
      pageList.Add(page);
    }
 
    PagedList<pageList> page = new PagedList<pagedList> (pageList, page, pageSize);
        
    return View(page);
  }
    </pre>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

@*Html Modal*@
<div id="modalHTML" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          ×
        </button>
        <h4 class="modal-title text-center">
          Html
        </h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form" method="post">
          <div class="form-group" style="font-weight:bold;">
            <pre>
   
    </pre>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>