标签：WebAPI pageindex 跨域 int list totalpage totalcount MVC var
一、MVC+EF
不管是MVC 还是EF 都有文件夹 Controllers 下边的文件必须以Controller 结尾
WEBAPI 接口不要使用中文名称
二、Linq 查询
-
多表联查
-
Linq 查询 使用方法
var list = from a in db.Users
join b in db.AgeTs on a.Cid equals b.Nid
select new Page
{
Id = a.Id,
Name = a.Name,
Nid = b.Nid,
Age = b.Age
};
-
博客园linq 简单语法 https://www.cnblogs.com/knowledgesea/p/3897665.html
-
匿名类型return Json(new {totalcount,totalpage,list });
public IHttpActionResult GetShow(int? age, string name, int pageindex = 1, int pagesize = 3)
{
int totalcount;
int totalpage;
var list = bll.GetShow(out totalcount, out totalpage, age, name, pageindex, pagesize);
var query = new { totalcount, totalpage, list};
return Json(new { totalcount, totalpage, list });
}
三、MVC访问API 跨域
1、在web控制器进行操作
public IHttpActionResult GetStudent(int? nid, string sName, int pageindex = 1, int pageisze = 3)
{
int totalcount;
int totalpage;
var list = bll.GetStudent(out totalcount, out totalpage, nid, sName, pageindex, pageisze);
var query = new { totalcount, totalpage, list };
return Json(new { totalcount, totalpage,list });
}
2、在Ui层的Web.config 里添加跨域请求
在 <handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
下面添加代码
<!--跨域请求：三个配置信息-->
<httpProtocol>
<customHeaders>
<!--响应类型 (值为逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法)-->
<add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS"/>
<!--响应头设置（Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）-->
<add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
<!--如果设置 Access-Control-Allow-Origin:*，则允许所有域名的脚本访问该资源-->
<add name="Access-Control-Allow-Origin" value="*" />
<!--<add name="Access-Control-Allow-Origin" value="http://domain1.com, http://domain2.com" /> 设置允许跨域访问的网址-->
</customHeaders>
</httpProtocol>
3、在Ui层的Global.asax 里添加跨域设置
在
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
的下面添加
/// <summary>
/// 跨域设置
/// </summary>
protected void Application_BeginRequest()
{
//OPTIONS请求方法的主要作用：
//1、获取服务器支持的HTTP请求方法；也是黑客经常使用的方法。
//2、用来检查服务器的性能。如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。
if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
{
//表示对输出的内容进行缓冲，执行page.Response.Flush()时，会等所有内容缓冲完毕，将内容发送到客户端。
//这样就不会出错，造成页面卡死状态，让用户无限制的等下去
Response.Flush();
}
}
4、创建一个新项目，在添加一个MVC添加视图 ajax链接
在content里拉一条引用 bootstrap.css
在scripts里拉一条引用 jquery-3.4.1.min.js
这样可以进行js操作
可以放到创建的表格上面
添加一个加载数据
<script>
//文档就绪函数
$(function () {
LoadData()
})
//加载函数
function LoadData() {
$.get('http://localhost:59507/api/Student?nid={nid}&sName={sName}&pageindex=1&pageisze=3', res => {
console.log(res)
})
}
</script>
四、MVC 分页 显示
1、创建一个MVC控制器创建页面
2、显示 分页 查询 操作
@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<div>
年龄:<select id="Age">
<option>请选择</option>
</select>
姓名:<input type="text" id="name" name="name"/>
<input type="button" value="查询" onclick="GetShow()" />
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
<a href="#" onclick="Page('F')">首页</a>
<a href="#" onclick="Page('P')">上一页</a>
<a href="#" onclick="Page('N')">下一页</a>
<a href="#" onclick="Page('L')">尾页</a>
<script>
//赋值
var pageindex = 1;
var pagesize = 3;
var totalcount = 0;
var totalpage = 0;
//文档就绪函数
$(function () {
GetShow();
GetXiaLa();
})
function GetShow() {
$.get('http://localhost:55350/api/User?age=' + $("#Age").val() + '&name=' + $("#name").val() + '&pageindex=' + pageindex + '&pagesize=' + pagesize, res => {
totalcount = res.totalcount;
totalpage = res.totalpage;
$("#list").empty();//清空
$(res.list).each(function () {
var html = '<tr>'
+ '<td>' + this.Id + '</td>'
+ '<td>' + this.Name + '</td>'
+ '<td>' + this.Age + '</td>'
+ '</tr>';
//追加
$("#list").append(html);
})
})
}
//分页
function Page(o) {
switch (o) {
case 'F':
pageindex = 1;
break;
case 'P':
pageindex = pageindex <= 1 ? pageindex : pageindex - 1;
break;
case 'N':
pageindex = pageindex >= totalpage ? pageindex : pageindex + 1;
break;
case 'L':
pageindex = totalpage;
break;
}
GetShow();
}
//下拉框
function GetXiaLa() {
$.get('http://localhost:55350/api/User', res => {
$(res).each(function () {
$("#Age").append('<option value="' + this.Nid + '">' + this.Age + '</option>')
})
})
}
</script>
待续......
标签：WebAPI,pageindex,跨域,int,list,totalpage,totalcount,MVC,var 来源： https://www.cnblogs.com/sjt9/p/15037126.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。