knockout+MVC+webapi+sqlserver完成增删查改

快过年了，公司的事情较少，想着开始学习点新东西。这段时间一个项目用到了mvc和webapi，然后一直对knockout比较感兴趣，就想着用这个框架做一个小实例。数据库采用的是sqlserver。话不多说，开始进行项目的步骤。

第一步：数据库的表创建。创建一个Employees员工表，具体字段见下图：

第二步：创建一个MVC项目，项目模板选择webapi。

第三步：在Model文件夹下新建一个ado.net实体数据模型，选择我们刚刚创建的employees的表，生成实体数据模型。

第四步：在controller文件夹下新建一个控制器，注意是包含读写操作和视图的API控制器，如下图

查看生成的代码如下

 using System;

 using System.Collections.Generic;

 using System.Data;

 using System.Data.Entity;

 using System.Data.Entity.Infrastructure;

 using System.Linq;

 using System.Net;

 using System.Net.Http;

 using System.Web;

 using System.Web.Http;

 using DemoWebApi.Models;

 namespace DemoWebApi.Controllers

 {

     public class EmployeeWebApiController : ApiController

     {

         private DemoDBEntities1 db = new DemoDBEntities1();

         // GET api/EmployeeWebApi

         public IEnumerable<Employees> GetEmployees()

         {

             return db.Employees.AsEnumerable();

         }

         // GET api/EmployeeWebApi/5

         public Employees GetEmployees(int id)

         {

             Employees employees = db.Employees.Find(id);

             if (employees == null)

             {

                 throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));

             }

             return employees;

         }

         // PUT api/EmployeeWebApi/5

         public HttpResponseMessage PutEmployees(int id, Employees employees)

         {

             if (!ModelState.IsValid)

             {

                 return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);

             }

             if (id != employees.EmployeeID)

             {

                 return Request.CreateResponse(HttpStatusCode.BadRequest);

             }

             db.Entry(employees).State = EntityState.Modified;

             try

             {

                 db.SaveChanges();

             }

             catch (DbUpdateConcurrencyException ex)

             {

                 return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);

             }

             return Request.CreateResponse(HttpStatusCode.OK);

         }

         // POST api/EmployeeWebApi

         public HttpResponseMessage PostEmployees(Employees employees)

         {

             if (ModelState.IsValid)

             {

                 db.Employees.Add(employees);

                 db.SaveChanges();

                 HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, employees);

                 response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = employees.EmployeeID }));

                 return response;

             }

             else

             {

                 return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);

             }

         }

         // DELETE api/EmployeeWebApi/5

         public HttpResponseMessage DeleteEmployees(int id)

         {

             Employees employees = db.Employees.Find(id);

             if (employees == null)

             {

                 return Request.CreateResponse(HttpStatusCode.NotFound);

             }

             db.Employees.Remove(employees);

             try

             {

                 db.SaveChanges();

             }

             catch (DbUpdateConcurrencyException ex)

             {

                 return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);

             }

             return Request.CreateResponse(HttpStatusCode.OK, employees);

         }

         protected override void Dispose(bool disposing)

         {

             db.Dispose();

             base.Dispose(disposing);

         }

     }

 }

里面有完整的对于实体类中表employee的增删查改操作。

第五步：创建一个空mvc的控制器，命名为EmployeeController，代码如下：

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 using System.Web.Mvc;

 using DemoWebApi.Models;

 namespace DemoWebApi.Controllers

 {

     public class EmployeeController : Controller

     {

         //

         // GET: /Employee/

         private DemoDBEntities1 db = new DemoDBEntities1();

         public ActionResult Create()

         {

             ViewBag.MaxBh = GetMaxBh();

             return View("Create");

         }

         public int GetMaxBh()

         {

             var query = (from d in db.Employees select d.EmployeeID).Max();

             return query + ;

         }

     }

 }

第六步：创建视图。代码如下：

 @{

     ViewBag.Title = "Create";

 }

 @section scripts{

     <script src="~/Scripts/knockout.mapping-latest.js"></script>

     <script src="~/Scripts/knockout-2.2.0.js"></script>

     <script type="text/javascript">

         var maxbh = '@ViewBag.MaxBh';

         var EmpViewModel = function () {

             var self = this;

             self.EmployeeID = ko.observable(maxbh);

             self.EmployeeName = ko.observable("");

             self.Salary = ko.observable("");

             self.DeptName = ko.observable("");

             self.Address = ko.observable("");

             var EmpData = {

                 EmployeeID: self.EmployeeID,

                 EmployeeName: self.EmployeeName,

                 Salary: self.Salary,

                 DeptName: self.DeptName,

                 Address: self.Address

             };

             //生成一个ObservableArray来存储返回的所有数据

             self.Employees = ko.observableArray([]);

             GetEmployees(); //通过ajax请求返回所有数据

             //保存数据

             self.save = function () {

                 //Ajax 提交到webapi保存数据

                 $.ajax({

                     type: "POST",

                     url: "/api/EmployeeApi",

                     data: ko.toJSON(EmpData),

                     contentType: "application/json",

                     success: function (data) {

                         alert("记录保存成功");

                         self.EmployeeID(data.EmployeeID);

                         window.location.reload();

                         GetEmployees();

                     },

                     error: function () {

                         alert("提交失败");

                     }

                 });

             };

             self.update = function () {

                 var url = "/api/EmployeeApi/" + self.EmployeeID();

                 $.ajax({

                     type: "PUT",

                     url: url,

                     data: ko.toJSON(EmpData),

                     contentType: "application/json",

                     success: function (data) {

                         alert("修改成功");

                         GetEmployees();

                     },

                     error: function (error) {

                         alert(error.status + "<!----!>" + error.statusText);

                     }

                 });

             };

             //删除操作

             self.deleterec = function (employee) {

                 $.ajax({

                     type: "DELETE",

                     url: "/api/EmployeeApi/" + employee.EmployeeID,

                     success: function (data) {

                         alert("Record Deleted Successfully");

                         GetEmployees();//Refresh the Table

                     },

                     error: function (error) {

                         alert(error.status + "<--and--> " + error.statusText);

                     }

                 });

             };

             //获取所有Employee

             function GetEmployees() {

                 //Ajax 获取所有Employee记录

                 $.ajax({

                     type: "GET",

                     url: "/api/EmployeeApi",

                     contentType: "application/json; charset=utf-8",

                     dataType: "json",

                     success: function (data) {

                         self.Employees(data);

                     },

                     error: function (error) {

                         alert(error.status + "<--and--> " + error.statusText);

                     }

                 });

             };

             //点击右侧列表某一行左侧编辑赋值

             self.getselectedemployee = function (employee) {

                 self.EmployeeID(employee.EmployeeID),

                 self.EmployeeName(employee.EmployeeName),

                 self.Salary(employee.Salary),

                 self.DeptName(employee.DeptName),

                 self.Address(employee.Address)

             };

         };

         //激活knockout

         ko.applyBindings(new EmpViewModel());

     </script>

 }

 <body class="easyui-layout">

     <form>

         <table>

             <tr>

                 <td>

                     <!--将textbox监控属性的值与ViewModel绑定 -->

                     <table id="tbldml">

                         <tr>

                             <td>编号</td>

                             <td>

                                 <input type="text" id="txteno" data-bind="value: $root.EmployeeID" readonly="readonly"/></td>

                         </tr>

                         <tr>

                             <td>名称</td>

                             <td>

                                 <input type="text" id="txtename" data-bind="value: $root.EmployeeName" /></td>

                         </tr>

                         <tr>

                             <td>薪资</td>

                             <td>

                                 <input type="text" id="txtsal" data-bind="value: $root.Salary" /></td>

                         </tr>

                         <tr>

                             <td>部门</td>

                             <td>

                                 <input type="text" id="txtdname" data-bind="value: $root.DeptName" /></td>

                         </tr>

                         <tr>

                             <td>籍贯</td>

                             <td>

                                 <input type="text" id="txtdesig" data-bind="value: $root.Address" /></td>

                         </tr>

                         <tr>

                             <!--ko控制的保存和修改按钮-->

                             <td>

                                 <button data-bind="click: $root.save" style="width: 100px;">保存</button></td>

                             <td>

                                 <button data-bind="click: $root.update" style="width: 100px;">修改</button></td>

                         </tr>

                     </table>

                 </td>

                 <td>

                     <div class="FixedContainer">

                         <!--控制有数据的时候显示表格-->

                         <table data-bind="visible: Employees().length > 0">

                             <thead>

                                 <tr>

                                     <td style="width: 100px;">编号</td>

                                     <td style="width: 100px;">名称</td>

                                     <td style="width: 100px;">薪资</td>

                                     <td style="width: 100px;">部门</td>

                                     <td style="width: 100px;">籍贯</td>

                                     <td style="width: 100px;"></td>

                                 </tr>

                             </thead>

                             <!--遍历所有数据-->

                             <tbody data-bind="foreach: Employees">

                                 <tr style="border: solid" data-bind="click: $root.getselectedemployee" id="updtr">

                                     <td><span data-bind="text: EmployeeID" style="width: 100px;"></span></td>

                                     <td><span data-bind="text: EmployeeName" style="width: 100px;"></span></td>

                                     <td><span data-bind="text: Salary"></span></td>

                                     <td><span data-bind="text: DeptName"></span></td>

                                     <td><span data-bind="text: Address"></span></td>

                                     <td>

                                         <button data-bind="click: $root.deleterec">删除</button></td>

                                 </tr>

                             </tbody>

                         </table>

                     </div>

                 </td>

             </tr>

         </table>

     </form>

 </body>

使用knockout绑定值需要引用两个js，knockout.mapping-latest.js和knockout-2.2.0.js。

第七步：修改RouteConfig.cs路由配置文件， defaults: new { controller = "Employee", action = "Create", id = UrlParameter.Optional }。这样基本的项目就完成了，运行可以查看效果。

以上就是所有的项目内容。

巴特西

knockout+MVC+webapi+sqlserver完成增删查改

最新文章

热门文章