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 }。这样基本的项目就完成了，运行可以查看效果。

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