使用视图模型的 Mvc 5 分页答案

【问题标题】：Mvc 5 pagination using view model使用视图模型的 Mvc 5 分页
【发布时间】：2017-06-07 22:53:52
【问题描述】：

嗨，我是 Mvc 的新手，我有一个 json 服务，它根据 fromdate 和 todate 返回一个 walletstatementlogs 列表。每次当我点击控制器的操作索引时，我都有一个控制器 TopUpReqLogController，它会去服务并获取数据并以 Ipagedlist 的形式返回查看并生成页面链接。如何防止每次在 TopUpReqLogController 索引操作中调用服务我只想加载一次服务数据并将其传递给索引并使用 int 在页面中显示数据？页面请建议

 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<WalletTopUpRequest> wallettoprq = new List<WalletTopUpRequest>();
            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<HaalMeer.MVC.Client.Models.WalletTopUpRequest>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<html>
<head>
</head>
<body>
   <div id="page-wrapper">
        <div class="page-title-container">
            @*<div class="container-fluid">*@
                <div class="page-title pull-left">
                    <h2 class="entry-title">Topup Request Log</h2>
                </div>
                <ul class="breadcrumbs pull-right">
                    <li><a href="#">Home</a></li>
                    <li class="active">Topup Request Log</li>
                </ul>
            </div>
        </div>
        <section id="content" class="gray-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                    </div>
                    @using (Html.BeginForm("Index", "TopUpReqLog", FormMethod.Get))
                    {
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>From Date</label>
                            <div class="datepicker-wrap blue">
                                @*<input type="text" name="date_from" class="input-text full-width" placeholder="mm/dd/yy" style="background-color: #fff" />*@
                                @Html.TextBox("Fromdate", ViewBag.fromdate as string, new { @class = "input-text full-width", @placeholder = "mm/dd/yyy",@style = "background-color: #fff" }) <br />

                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>To Date</label>
                            <div class="datepicker-wrap blue">
                                @*<input type="text" name="date_from" class="input-text full-width" placeholder="mm/dd/yy" style="background-color: #fff" />*@
                                @Html.TextBox("Todate", ViewBag.todate as string, new { @class = "input-text full-width", @placeholder = "mm/dd/yyy", @style = "background-color: #fff" }) <br />

                            </div>
                        </div>
                        <button type="submit">Submit</button>
                    </div>
                    }

                    <div class="col-md-3">
                    </div>

                </div>
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="table-responsive">

                            <table class="table">
                                <tr class="info" style="text-align: center; font-weight: bold; color: #000">
                                    <td class="col-md-1">Sl</td>
                                    <td class="col-md-2">Date</td>
                                    <td class="col-md-1">Bank Ref.</td>
                                    <td class="col-md-1">Bank Name</td>
                                    <td class="col-md-2">Remarks</td>
                                    <td class="col-md-1">Amount</td>
                                    <td class="col-md-1">Status</td>
                                    <td class="col-md-2">Action Date</td>
                                </tr> 


                                        @foreach (var item in Model)
                                        {
                                        <tr>
                                            <td class="hmcenter">@Html.DisplayFor(modelItem => item.SlNo)</td>
                                            <td class="hmcenter">@Html.DisplayFor(modelItem => item.TransactionDate)</td>
                                            <td class="hmcenter">@Html.DisplayFor(modelItem => item.Reference)</td>
                                            <td class="hmcenter">@Html.DisplayFor(modelItem => item.BankName)</td>
                                            <td class="hmleft">@Html.DisplayFor(modelItem => item.RemarKs)</td>
                                            <td class="hmright">@Html.DisplayFor(modelItem => item.Amount) </td>
                                            <td class="hmcenter">@Html.DisplayFor(modelItem => item.ApprovalStatus)</td>
                                            <td class="hmcenter">@Html.DisplayFor(modelItem => item.ApprovalDate)</td>
                                        </tr>

                                         }



                            </table>
                            <br/>

                            Page @(Model.PageCount<Model.PageNumber? 0 : Model.PageNumber) of @Model.PageCount

                            @Html.PagedListPager(Model, page => Url.Action("Index",new { page
                                            }))


                   @*<div class="form-group">
                    <ul class="pagination">
                        <li><a href="#">1</a></li>
                        <li class="active"><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                    </ul>
                </div>*@

                        </div>
                    </div>



                </div>

           </div>
        </section>

【问题讨论】：

试试jquery-datatables插件。这将为您完成所有任务。你只需要提供数据..

标签： asp.net-mvc asp.net-mvc-4 asp.net-mvc-5 asp.net-mvc-2

【解决方案1】：

所以，据我了解，您只想让它只在客户端工作。如果您的模型不为空，则此代码应该可以工作。如果您想将数据作为一个结果加载并在客户端进行分页，那么 IPageList 不是您要寻找的。因为，它只用在服务器端，总是返回一页数据来刹车大结果。您还可以尝试将数据列表传递给视图并将其转换为 IPageList 结果在视图中并显示每个选项卡中的页面，但不是一个好习惯。在这种情况下，我会使用数据表仅在客户端使用常规数据列表进行分页： https://datatables.net/。改进当前代码的提示：
控制器：

    public ViewResult Index(int? page = 1)
    {
      AgentBusiness business = new AgentBusiness();
      var result = business.Topuprequestlog("99910011010", "99810001110", "jBurFDoD1UpNPzWd/BlK4hVpV8GF+0eQT+AfNxEHHDKMB25AHf6CVA==", "25052017000000", "01062017000000");                 
      return View(result.wallettopuprequest.ToPagedList(pageNumber, 3)); 
    }

查看：

@Html.PagedListPager(Model, page => Url.Action("Index", new { page }), PagedListRenderOptions.ClassicPlusFirstAndLast)

【讨论】：

【解决方案2】：

以下示例显示了在服务器端和客户端进行的分页：这是我的模型：

 public partial class Employee
    {
        public int Id { get; set; }
        public string FName { get; set; }
        public string Lname { get; set; }
    }

行动：

 public ActionResult Index(int? Page)
    {
        return View();
    }

     /// returns Partial View
    public ActionResult _PartialIndex(int? Page)
    {
        return PartialView(db.Employees.ToList().ToPagedList(Page ?? 1, 10));
    }

观看次数：

1.索引视图：Index.cshtml

@{
    ViewBag.Title = "Index";
}

<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
<script>

    $(document).ready(function () {
        $('#loading').show();
        debugger;
        var Page = '';
        $.ajax({
            url: '/Employees/_PartialIndex',
            contentType: "application/json; charset=utf-8",
            type: 'get',
            datatype: 'html'
        }).success(function (result) {
            $('#main').html(result);
            $('#loading').hide();
        });
    });
</script>
<h2>Index</h2>
<div class="col-md-8 col-md-offset-2">
    <center>
        <div id="loading" style="display:none; z-index:200; position:absolute; top:50%; left:45%;">
            <img src="~/Content/loading.gif" />
        </div>
    </center>
    <div id="main">

    </div>
</div>

2.局部视图：_PartialIndex.cshtml

@using PagedList.Mvc
@using PagedList;
@model IPagedList<samplePaging.Models.Employee>
@{
    ViewBag.Title = "Index";
}

<h2>Employee List</h2>



<table class="table">
    <tr>
        <th>
            First Name
        </th>
        <th>
          Last Name
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.FName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Lname)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        </tr>
    }

</table>
<center>
    @Html.PagedListPager(Model, page => Url.Action("_PartialIndex", new {  page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new PagedListRenderOptions() { DisplayPageCountAndCurrentLocation = true }, new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "main", LoadingElementId = "loading" }))
</center>

如果您想在客户端进行分页，请按照以下步骤操作：

行动：

  public ActionResult JsonIndex(int? Page)
        {
            return Json(db.Employees.ToList(), JsonRequestBehavior.AllowGet);
        }

查看：

@{
    ViewBag.Title = "Index2";
}

<h2>Index2</h2>

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>  
<script>


    $(document).ready(function () {
        //Call EmpDetails jsonResult Method
        $.getJSON("/Employees/JsonIndex",
        function (json) {
            var tr;

        //Append each row to html table
        for (var i = 0; i < json.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + json[i].FName + "</td>");
                tr.append("<td>" + json[i].LName + "</td>");

                $('table').append(tr);

        }
        $('#EmpInfo').DataTable();
        });

    });

</script> 
<hr />
<div class="form-horizontal">
    <table id="EmpInfo" class="table table-bordered  table-hover">
        <thead>
            <tr>
                <th>Fname</th>
                <th>LName</th>

            </tr>
        </thead>
        <tbody></tbody>
    </table>

</div>

希望对您有所帮助！

【讨论】：