MVC中ajax调用API版信息分页显示
效果图:

API端采用三层架构控制器显示界面:
UserBll bll = new UserBll();
//获取用户所有信息
[HttpGet]
public DataBase GetAll(int pageindex=,int pagesize=)
{
List<UserInfo> a = bll.GetAll();
var b = a.Skip((pageindex - ) * pagesize).Take(pagesize);
DataBase db = new DataBase();
db.users = b.ToList();
db.PageCount = Convert.ToInt32(Math.Ceiling(a.Count() * 1.0 / pagesize));
return db;
}
MVC端视图界面:
//文档准备就绪函数
$(function () {
lists();
})
//
var MaxPagerCount = ;
//显示信息
function lists() {
var pageIndex = $("#PageIndex").val();
$.ajax({
url: "http://localhost:51071/api/User",
type: "get",
data: { pageIndex: pageIndex },
success: function (data) {
//清空tbd
$("#tbd").empty();
MaxPagerCount = data.PageCount;
for (var item in data.users) {
console.log(data.users)
//进行拼接
$("#tbd").append(
"<tr>" +
//依次获取字段
"<th><input id='Checkbox1' class='Ck' type='checkbox' value='" + data.users[item].Id + "' /></th>" +
"<th>" + data.users[item].Name + "</th>" +
"<th>" + data.users[item].RealName + "</th>" +
"<th>" + data.users[item].Telphone + "</th>" +
"<th>" + data.users[item].Pass + "</th>" +
"<th>" + (data.users[item].Status==?"禁用":"启用") + "</th>" +
"<th><input id='btndel' type='button' value='修改' onclick='Edit(" + data.users[item].Id + ")' />" +
"<input id='btnupdate' type='button' value='删除' onclick='Delete(" + data.users[item].Id + ")' /></th>" +
"</tr>");
}
}
});
}
//首页
function first() {
$("#PageIndex").val();
lists();
}
//尾页
function last() {
$("#PageIndex").val(MaxPagerCount);
lists();
}
//上一页
function prev() {
var pageindex = $("#PageIndex").val() - ;
if (pageindex < )
pageindex = ; $("#PageIndex").val(pageindex);
lists();
}
//下一页
function next() {
var pageindex = parseInt($("#PageIndex").val()) + ;
if (pageindex > MaxPagerCount)
pageindex = MaxPagerCount;
$("#PageIndex").val(pageindex);
lists();
}
first();
MVC中ajax调用API版信息分页显示的更多相关文章
- C#MVC通过AJAX调用API方法进行上传下载
//这是写的一个类,具体是上传图片的上传和下载 public class FileResult { public int Code { get; set; } pub ...
- MVC中ajax调用Controller的方法
1. ajax代码: $.ajax({ async: false, cache: false, type: 'POST', contentType: "application/json&qu ...
- ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则
ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...
- ASP.NET Core MVC中构建Web API
在ASP.NET CORE MVC中,Web API是其中一个功能子集,可以直接使用MVC的特性及路由等功能. 在成功构建 ASP.NET CORE MVC项目之后,选中解决方案,先填加一个API的文 ...
- MVC中使用Web API和EntityFramework
在ASP.NET MVC中使用Web API和EntityFramework构建应用程序 最近做了一个项目技术预研:在ASP.NET MVC框架中使用Web API和EntityFramework ...
- MVC 下 ajax调用 日期差值计算
背景: 服务项目已有服务期起止时间From-To 现在要根据用户输入的新的起始时间, 和该服务期的原有区间值, 计算出新的服务期截止时间 即 NewServiceToDateTime = NewSer ...
- jquery通过AJAX从后台获取信息并显示在表格上的类
前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...
- jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中
不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...
- MVC代码中如何调用api接口
关于代码解释,为了方便读者浏览时更好理解代码的含义,我把注释都写在代码里面了.因为一开始我只考虑到功能上的实现并没有考虑代码的优化所以代码我就全写在一个页面了.至于那些生成扑克牌类.计算类等代码优化方 ...
随机推荐
- Mongodb字段自增长
MongoClient client = new MongoClient("mongodb://xxx.xxx.x.xx:27017"); var mongServer = cli ...
- PHP中的面向对象思想
<?php header("Content-Type: text/html; charset=gb2312"); class person{ /** * 成员属性 * 在类中 ...
- CSS/Xpath 选择器 第几个子节点/父节点/兄弟节点
0.参考 1.初始化 In [325]: from scrapy import Selector In [326]: text=""" ...: <div> ...
- numpy array的复制-【老鱼学numpy】
对象的引用 看例子: a = np.array([0, 1, 2, 3]) b = a a[0] = 5 print("b=", b) # 判断a和b是否是同样的地址 print( ...
- java日志规约及配置示例终极总结
目录 什么是日志 常用日志框架 日志级别详解 日志的记录时机 日志使用规约 logback 配置示例 loh4j2 配置示例 什么是日志? 简单的说,日志就是记录程序的运行轨迹,方便查找关键信息,也方 ...
- Android-动态权限获取
声明权限: 首先在清单文件中写出相应权限 <!--存储权限--> <uses-permission android:name="android.permission.WRI ...
- PBRT笔记(5)——相机模型
Camera class Camera { public: //实现相机在一定时间内进行特定的运动 AnimatedTransform CameraToWorld; //快门开/关数据,可以用于计算动 ...
- django——模板层
每一个Web框架都需要一种很便利的方法用于动态生成HTML页面. 最常见的做法是使用模板. 模板包含所需HTML页面的静态部分,以及一些特殊的模版语法,用于将动态内容插入静态部分. 说白了,模板层就是 ...
- Python金融大数据分析PDF
Python金融大数据分析(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1CF2NhbgpMroLhW2sTm7IJQ 提取码:clmt 复制这段内容后打开百度网盘 ...
- ECMA Script 6_async 函数
async 函数 const promise = new Promise((resolve, reject)=>{ setTimeout(function(){ console.log(&quo ...