澳门威利斯人_威利斯人娱乐「手机版」

来自 网络资讯 2019-07-06 17:47 的文章
当前位置: 澳门威利斯人 > 网络资讯 > 正文

sqlserver完成增删查改,Ajax异步无刷新分页

  近日干活中web客户端要求用到knockout,在此记录下某个Demo,以往用到的时候查找起来方便。也盼望给新入门的knockout使用者一点经验。knockout官方文书档案。那儿是多少个接纳knockout分页的小demo,使用的框架是mvc,javascript框架有jquery,knockout,bootstrap。

      快过年了,集团的业务很少,想着起头学习点新东西。这段时日多少个连串用到了mvc和webapi,然后间接对knockout比较感兴趣,就想着用这些框架做三个小实例。数据库选用的是sqlserver。话非常少说,开头举办项指标步调。

        先上效果图

      第一步:数据库的表创立。创设二个Employees职员和工人表,具体字段见下图:

图片 1

图片 2

   前台view

 

图片 3图片 4

  1 @{    2     //这儿去除该页面的模板页。防止jquery多次引用,当然也可以不去除,下面jquery就可以不用引用了。    3                     4     Layout = null;    5 }    6     7 @*先引用jquery,然后应用knockout,因为knockout依赖于jquery*@    8 <script src="~/Scripts/jquery-1.10.2.js"></script>    9 <script src="~/Scripts/knockout-3.2.0.js"></script>   10    11    12 @*bootstrap,集成到mvc里面的前端开发框架 (官网:http://www.bootcss.com/)*@   13 <link href="~/Content/bootstrap.css" rel="stylesheet" />   14 <script src="~/Scripts/bootstrap.js"></script>   15    16    17    18 <div style="margin:auto;width:500px;text-align:center">   19    20    21     <div style="margin-top:50px">   22         <ul data-bind="foreach:items" style="list-style-type:none">   23             <li>   24                 Title    25                 Content   26             </li>   27         </ul>   28     </div>   29    30     <div>   31         <button type="button" class="btn btn-primary" data-bind="click:first">   32              第一页   33         </button>   34         <button type="button" class="btn btn-success" data-bind="click:previous">   35              上一页   36         </button>   37         <button type="button" class="btn btn-info" data-bind="click:next">   38              下一页   39         </button>   40         <button type="button" class="btn btn-warning" data-bind="click:last">   41             最后一页   42         </button>   43     </div>   44    45     <div style="margin-top:20px" data-bind="foreach:pageNumbers" class="btn-group" role="group">   46         <button data-bind="text:$data,click:$root.gotoPage" type="button" class="btn btn-default">   47         </button>   48     </div>   49    50 </div>   51 @*注意将脚本放在html 代码的下面*@   52 <script type="text/javascript">   53     function NewsPage() {   54         //viewModel本身。用来防止直接使用this的时候作用域混乱   55         var self = this;   56         //数据   57         this.items = ko.observableArray();   58         //要访问的页码   59         this.pageIndex = ko.observable(1);   60         //总计页数   61         this.pageCount = ko.observable(1);   62         //页码数   63         this.pageNumbers = ko.observableArray();   64         //当前页   65         this.currengePage = ko.observable(1);   66         this.refresh = function () {   67             //限制请求页码在该数据页码范围内   68             if (self.pageIndex() < 1)   69                 self.pageIndex(1);   70             if (self.pageIndex() > self.pageCount()) {   71                 self.pageIndex(self.pageCount());   72             }   73             //post异步加载数据   74             $.post(   75                 "/PageList/PageList",   76                 {   77                     pageIndex: self.pageIndex()   78                 },   79                 function (data) {   80                     // 加载新的数据前,先移除原先的数据   81                     self.items.removeAll();   82                     self.pageNumbers.removeAll();   83                     self.pageCount(data.PageCount)   84                     for (var i = 1; i < data.PageCount; i  ) {   85                         //装填页码   86                         self.pageNumbers.push(i);   87                     }   88                     //for...in 语句用于对数组或者对象的属性进行循环操作。   89                     //for ... in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。   90                     for (var i in data.PagedData) {   91                         //装填数据   92                         self.items.push(data.PagedData[i]);   93                     }   94                 }, "json"   95                             )   96         }   97         //请求第一页数据   98         this.first = function () {   99             self.pageIndex(1);  100             self.refresh();  101         }  102         //请求下一页数据  103         this.next = function () {  104             self.pageIndex(this.pageIndex()   1);  105             self.refresh();  106   107         }  108         //请求先前一页数据  109         this.previous = function () {  110             self.pageIndex(this.pageIndex() - 1);  111             self.refresh();  112         }  113         //请求最后一页数据  114         this.last = function () {  115             self.pageIndex(this.pageCount() - 1);  116             self.refresh();  117         }  118         //跳转到某页  119         this.gotoPage = function (data, event) {  120             self.pageIndex(data);  121             self.refresh();  122         }  123         this.refresh();  124     }  125     var viewModel = new NewsPage();  126     ko.applyBindings(viewModel);  127 </script>

View Code

 

        第二步:创造三个MVC项目,项目模板采取webapi。

    后台controller

 

图片 5图片 6

using System;  using System.Collections.Generic;  using System.Linq;  using System.Web;  using System.Web.Mvc;    namespace KnockOutPageDemo.Controllers  {      public class PageListController : Controller      {          // GET: PageList          public ActionResult Index()          {              return View();          }          /// <summary>          /// 异步请求的分页数据,返回一个json对象          /// </summary>          /// <returns></returns>          public ActionResult PageList()          {              //请求的页码              int pageIndex = int.Parse(Request.Form["pageIndex"]);              //每页显示多少条数据              int pageSize = 10;              //取到请求页码的数据              List<News> news = GetNewsData().Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();              //获取总的数据行数              int rowCount = GetNewsData().Count();              //构建数据模型              PageModel pageData = new PageModel()              {                  PageIndex = pageIndex,                  PagedData = news,                  PageCount = rowCount / pageSize                };              //返回数据              return Json(pageData, JsonRequestBehavior.AllowGet);          }          public List<News> GetNewsData()          {              List<News> news = new List<News>();              for (int i = 0; i < 30; i  )              {                  news.Add(new News { Title = "天黑黑", Content = "路上小心" });                  news.Add(new News { Title = "雨滂滂", Content = "记得带伞" });                  news.Add(new News { Title = "人熙熙", Content = "快点回家" });              }              return news;          }      }        //分页数据实体      public class PageModel      {//请求页码的数据          public List<News> PagedData { get; set; }          //请求的页码          public int PageIndex { get; set; }          //页码的大小          public int PageSize { get; set; }          //总页数          public int PageCount { get; set; }          //总行数          public int RowCount { get; set; }      }      //新闻模型      public class News      {          public string Title { get; set; }          public string Content { get; set; }      }  }

View Code

 

      本文地址:

      博客地址:

      转发请以超链接方式注解小说原本出处。

 

  

         

                


图片 7

图片 8

其三步:在Model文件夹下新建二个ado.net实体数据模型,选用大家正好成立的employees的表,生成实体数据模型。

图片 9

第四步:在controller文件夹下新建一个调节器,注意是包蕴读写操作和视图的API调控器,如下图

图片 10

翻开生成的代码如下

图片 11图片 12

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Data;
  4 using System.Data.Entity;
  5 using System.Data.Entity.Infrastructure;
  6 using System.Linq;
  7 using System.Net;
  8 using System.Net.Http;
  9 using System.Web;
 10 using System.Web.Http;
 11 using DemoWebApi.Models;
 12 
 13 namespace DemoWebApi.Controllers
 14 {
 15     public class EmployeeWebApiController : ApiController
 16     {
 17         private DemoDBEntities1 db = new DemoDBEntities1();
 18 
 19         // GET api/EmployeeWebApi
 20         public IEnumerable<Employees> GetEmployees()
 21         {
 22             return db.Employees.AsEnumerable();
 23         }
 24 
 25         // GET api/EmployeeWebApi/5
 26         public Employees GetEmployees(int id)
 27         {
 28             Employees employees = db.Employees.Find(id);
 29             if (employees == null)
 30             {
 31                 throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
 32             }
 33 
 34             return employees;
 35         }
 36 
 37         // PUT api/EmployeeWebApi/5
 38         public HttpResponseMessage PutEmployees(int id, Employees employees)
 39         {
 40             if (!ModelState.IsValid)
 41             {
 42                 return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
 43             }
 44 
 45             if (id != employees.EmployeeID)
 46             {
 47                 return Request.CreateResponse(HttpStatusCode.BadRequest);
 48             }
 49 
 50             db.Entry(employees).State = EntityState.Modified;
 51 
 52             try
 53             {
 54                 db.SaveChanges();
 55             }
 56             catch (DbUpdateConcurrencyException ex)
 57             {
 58                 return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
 59             }
 60 
 61             return Request.CreateResponse(HttpStatusCode.OK);
 62         }
 63 
 64         // POST api/EmployeeWebApi
 65         public HttpResponseMessage PostEmployees(Employees employees)
 66         {
 67             if (ModelState.IsValid)
 68             {
 69                 db.Employees.Add(employees);
 70                 db.SaveChanges();
 71 
 72                 HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, employees);
 73                 response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = employees.EmployeeID }));
 74                 return response;
 75             }
 76             else
 77             {
 78                 return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
 79             }
 80         }
 81 
 82         // DELETE api/EmployeeWebApi/5
 83         public HttpResponseMessage DeleteEmployees(int id)
 84         {
 85             Employees employees = db.Employees.Find(id);
 86             if (employees == null)
 87             {
 88                 return Request.CreateResponse(HttpStatusCode.NotFound);
 89             }
 90 
 91             db.Employees.Remove(employees);
 92 
 93             try
 94             {
 95                 db.SaveChanges();
 96             }
 97             catch (DbUpdateConcurrencyException ex)
 98             {
 99                 return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
100             }
101 
102             return Request.CreateResponse(HttpStatusCode.OK, employees);
103         }
104 
105         protected override void Dispose(bool disposing)
106         {
107             db.Dispose();
108             base.Dispose(disposing);
109         }
110     }
111 }

View Code

本文由澳门威利斯人发布于网络资讯,转载请注明出处:sqlserver完成增删查改,Ajax异步无刷新分页

关键词: 澳门威利斯人 asp.net MVC knockout