APi 调用 MCV 用AJAX做显示分页的方法

一、 MVC + EF

不管是MVC 还是 EF都有文件夹 Controllers 下面的文件必须以Controller 结尾

二、Linq查询

• 多表联查以及Linq方式

• var query = from a in db.Students
                          join b in db.NClasss on a.Cid equals b.CId
                          select new ViewModel
                          {
                              StuId = a.StuId,
                              StuName = a.StuName,
                              Cid = b.CId,
                              CName = b.CName
                          };

   

• 匿名类型

• var query = new { TotalCount,TotalPage,list}

• new出来的就是匿名类型

三 Postman

 

四、 MVC访问API

• WEBAPI 配置 跨域（CORS）

• 第一步打开跨域请求文本 复制到Web.config中的system.webServer里的handlers下面

• 第二部打开跨域设置文本 复制到Global.asax文件中Application_Start()方法的下面

五jQuery + html和C#的区别

• jQuery + html 网页 脚本 执行速度快 解释型语言

• C# 需要 编译 执行速度比较慢

六 API 调用 MVC 使用AJAX 做显示分页

• dal层的方法

• var query = from a in db.Students
                          join b in db.NClasss on a.Cid equals b.CId
                          select new ViewModel
                          {
                              StuId = a.StuId,
                              StuName = a.StuName,
                              Cid = b.CId,
                              CName = b.CName
                          };
   TotalCount = query.Count();
              TotalPage = Convert.ToInt32(Math.Ceiling(TotalCount * 1.0 / PageSize));
  ​
              return query.OrderBy(m => m.StuId).Skip(PageSize * (PageIndex - 1)).Take(PageSize).ToList() ;

• BLL层的调用
• 以及控制器的方法 注意httpget的请求方式

• [HttpGet]
  public IHttpActionResult ShowStu(int Cid, string Name, int PageIndex, int PageSize)
  {
  int TotalCount;
  int TotalPage;
  var list = bll.GetStudents(Cid, Name, PageIndex, PageSize, out TotalCount, out TotalPage);
  var query = new { TotalCount, TotalPage, list };
  return Json(new { TotalCount,TotalPage,list});
  } 

• 最后MVC 的视图页面

• <table class="table table-hover">
  <thead>
  <tr>
  <td>Id</td>
  <td>姓名</td>
  <td>班级</td>
  </tr>
  </thead>
  <tbody id="tolist">
  </tbody>
  </table>

  @section scripts{

  <script>

  var pageindex = 1;
  var pagesize = 3;
  var totalpage = 0;
  var totalcount = 0;
  $(function () {
  LoadData();
  })
  function LoadData() {
  $.get('http://localhost:65136/api/Student/ShowStu?Cid=0&Name=&PageIndex=' + pageindex + '&PageSize=' + pagesize, res => {
  totalcount = res.TotalCount
  totalpage = res.TotalPage;

  $("#tolist").empty();
  $(res.list).each(function () {
  var html = '<tr>' +
  '<td>' + this.StuId + '</td>' +
  '<td>' + this.StuName + '</td>' +
  '<td>' + this.CName + '</td>' +
  '</tr>';
  $("#tolist").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;

  }
  LoadData();
  }

  </script>
  }
  <input type="button" value="首页" onclick="page('F')" />
  <input type="button" value="上一页" onclick="page('P')" />
  <input type="button" value="下一页" onclick="page('N')" />
  <input type="button" value="尾页" onclick="page('L')" />