嗨，我是 Mvc 的新手，我有一个 json 服务，它根据 fromdate 和 todate 返回钱包语句日志列表。我有一个控制器 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>
因此，据我了解，您只想让它仅在客户端工作。如果您的模型不为空，则此代码应该可以工作。如果您想将数据作为一个结果加载并在客户端进行分页，那么 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)
下面的示例显示了在服务器端和客户端完成的分页： 这是我的模型：
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>
希望这对您有帮助！
@section scripts{
<script>
$("#dataTable").on("click", "#prod-pag a", function (ev) {
ev.preventDefault();
fetch($(this).attr("href"))
.then(res => res.text())
.then(data => $("#dataTable").html(data))
});
</script>
}
<nav aria-label="Page navigation example">
<ul class="pagination" id="prod-pag">
<li class="page-item @(Model.HasPrev? "":"disabled")">
<a class="page-link" asp-action="ProductPagination" asp-route-page="@(Model.CurrentPage-1)" asp-route-count="4">Previous</a>
</li>
@for(int i =1; i <= Model.LastPage; i++)
{
<li class="page-item @(i == Model.CurrentPage ? "active":"")">
<a class="page-link" asp-action="ProductPagination" asp-route-page="@i" asp-route-count="4">@i</a>
</li>
}
<li class="page-item @(Model.HasNext?"":"disabled")">
<a class="page-link" asp-action="ProductPagination" asp-route-page="@(Model.CurrentPage+1)" asp-route-count="4">Next</a>
</li>
</ul>
</nav>
[Required(ErrorMessage ="Invalid Name !")]
public string Name { get; set; }
[Required(ErrorMessage = "Invalid Name !")]
public string Surname { get; set; }
[Required(ErrorMessage = "Invalid Name !")]
public string Username { get; set; }
[Required,DataType(DataType.EmailAddress)]
public string Email { get; set; }
[Required, DataType(DataType.Password),Compare(nameof(PasswordConfirm))]
public string Password { get; set; }
[Required, DataType(DataType.Password)]
public string PasswordConfirm { get; set; }