title: Mvc 5 pagination using view model
body: <p>Hi i am newbie to Mvc i have a json service which returns a list of walletstatementlogs based on fromdate and todate. I have a controller TopUpReqLogController every time when i hit the action index of the controller it will go to service and fetch the data and returns to view as Ipagedlist and genrates pagelinks. How do i prevent servicecall everytime in TopUpReqLogController index action i just want to load service data once and pass it to index and display data in pages using int ? page please suggest</p>
  
  <pre><code> public class WalletTopUpRequest
      {
  
          public string SlNo { get; set; }
          public string Sequence { get; set; }
          public string Merchant { get; set; }
          public string CustomerCode { get; set; }
          public string CustomerName { get; set; }
          public string BankName { get; set; }
          public string TransactionDate { get; set; }
          public string Reference { get; set; }
          public string Amount { get; set; }
          public string ApprovalStatus { get; set; }
          public string ApproveUser { get; set; }
          public string ApprovalDate { get; set; }
          public string RemarKs { get; set; }
      }
  
  
  public ViewResult Index(int? page)
          {
              int pageSize = 3;
              int pageNumber = (page ?? 1);
              List&lt;WalletTopUpRequest&gt; wallettoprq = new List&lt;WalletTopUpRequest&gt;();
              if (page == null)
              {
                  AgentBusiness business = new AgentBusiness();
                  var result = business.Topuprequestlog("99910011010", "99810001110", "jBurFDoD1UpNPzWd/BlK4hVpV8GF+0eQT+AfNxEHHDKMB25AHf6CVA==", "25052017000000", "01062017000000");
                  wallettoprq = result.wallettopuprequest.ToList();
                  var viewmodel = wallettoprq.ToPagedList(pageNumber, pageSize);
                  return View(viewmodel);
              }
  
              return View(wallettoprq.ToPagedList(pageNumber, pageSize));  
          }
  
  @using PagedList;
  @using PagedList.Mvc;
  @model  IPagedList&lt;HaalMeer.MVC.Client.Models.WalletTopUpRequest&gt;
  
  @{
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;div id="page-wrapper"&gt;
          &lt;div class="page-title-container"&gt;
              @*&lt;div class="container-fluid"&gt;*@
                  &lt;div class="page-title pull-left"&gt;
                      &lt;h2 class="entry-title"&gt;Topup Request Log&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;ul class="breadcrumbs pull-right"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="active"&gt;Topup Request Log&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;section id="content" class="gray-area"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-3"&gt;
                      &lt;/div&gt;
                      @using (Html.BeginForm("Index", "TopUpReqLog", FormMethod.Get))
                      {
                      &lt;div class="col-md-3"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label&gt;From Date&lt;/label&gt;
                              &lt;div class="datepicker-wrap blue"&gt;
                                  @*&lt;input type="text" name="date_from" class="input-text full-width" placeholder="mm/dd/yy" style="background-color: #fff" /&gt;*@
                                  @Html.TextBox("Fromdate", ViewBag.fromdate as string, new { @class = "input-text full-width", @placeholder = "mm/dd/yyy",@style = "background-color: #fff" }) &lt;br /&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-md-3"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label&gt;To Date&lt;/label&gt;
                              &lt;div class="datepicker-wrap blue"&gt;
                                  @*&lt;input type="text" name="date_from" class="input-text full-width" placeholder="mm/dd/yy" style="background-color: #fff" /&gt;*@
                                  @Html.TextBox("Todate", ViewBag.todate as string, new { @class = "input-text full-width", @placeholder = "mm/dd/yyy", @style = "background-color: #fff" }) &lt;br /&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;button type="submit"&gt;Submit&lt;/button&gt;
                      &lt;/div&gt;
                      }
  
                      &lt;div class="col-md-3"&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12 col-sm-12"&gt;
                          &lt;div class="table-responsive"&gt;
  
                              &lt;table class="table"&gt;
                                  &lt;tr class="info" style="text-align: center; font-weight: bold; color: #000"&gt;
                                      &lt;td class="col-md-1"&gt;Sl&lt;/td&gt;
                                      &lt;td class="col-md-2"&gt;Date&lt;/td&gt;
                                      &lt;td class="col-md-1"&gt;Bank Ref.&lt;/td&gt;
                                      &lt;td class="col-md-1"&gt;Bank Name&lt;/td&gt;
                                      &lt;td class="col-md-2"&gt;Remarks&lt;/td&gt;
                                      &lt;td class="col-md-1"&gt;Amount&lt;/td&gt;
                                      &lt;td class="col-md-1"&gt;Status&lt;/td&gt;
                                      &lt;td class="col-md-2"&gt;Action Date&lt;/td&gt;
                                  &lt;/tr&gt; 
  
  
                                          @foreach (var item in Model)
                                          {
                                          &lt;tr&gt;
                                              &lt;td class="hmcenter"&gt;@Html.DisplayFor(modelItem =&gt; item.SlNo)&lt;/td&gt;
                                              &lt;td class="hmcenter"&gt;@Html.DisplayFor(modelItem =&gt; item.TransactionDate)&lt;/td&gt;
                                              &lt;td class="hmcenter"&gt;@Html.DisplayFor(modelItem =&gt; item.Reference)&lt;/td&gt;
                                              &lt;td class="hmcenter"&gt;@Html.DisplayFor(modelItem =&gt; item.BankName)&lt;/td&gt;
                                              &lt;td class="hmleft"&gt;@Html.DisplayFor(modelItem =&gt; item.RemarKs)&lt;/td&gt;
                                              &lt;td class="hmright"&gt;@Html.DisplayFor(modelItem =&gt; item.Amount) &lt;/td&gt;
                                              &lt;td class="hmcenter"&gt;@Html.DisplayFor(modelItem =&gt; item.ApprovalStatus)&lt;/td&gt;
                                              &lt;td class="hmcenter"&gt;@Html.DisplayFor(modelItem =&gt; item.ApprovalDate)&lt;/td&gt;
                                          &lt;/tr&gt;
  
                                           }
  
  
  
                              &lt;/table&gt;
                              &lt;br/&gt;
  
                              Page @(Model.PageCount&lt;Model.PageNumber? 0 : Model.PageNumber) of @Model.PageCount
  
                              @Html.PagedListPager(Model, page =&gt; Url.Action("Index",new { page
                                              }))
  
  
                     @*&lt;div class="form-group"&gt;
                      &lt;ul class="pagination"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="active"&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;*@
  
                          &lt;/div&gt;
                      &lt;/div&gt;
  
  
  
                  &lt;/div&gt;
  
             &lt;/div&gt;
          &lt;/section&gt;
  </code></pre>